Herkese selam THT ailesi , basit bir blog sc paylaşıyorum tam kapsamlı olarak geliştirmedim tema tasarımlarını halletim responsive ve karanlık tema gibi özellikleri mevcut kulanmak isteyen arkadaşlar olursa üstünde biraz çalışma yapıp işlevselliğini daha iyi bir hale getirebilirler kodları ayırmadım html css bootsrap javascript bir arada hepsi herkese iyi kullanımlar.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlogHub Ultra Pro - İçerik Platformu</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
:root {
--primary-color: #4a4af6;
--secondary-color: #ff6b6b;
--background-light: #f4f7ff;
--background-dark: #121212;
--text-color-light: #2c3e50;
--text-color-dark: #ecf0f1;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
transition: all 0.3s ease;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: var(--background-light);
color: var(--text-color-light);
line-height: 1.6;
}
body.dark-mode {
background-color: var(--background-dark);
color: var(--text-color-dark);
}
.navbar {
backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
transition: all 0.4s ease;
}
.dark-mode .navbar {
background: rgba(18, 18, 18, 0.95);
color: var(--text-color-dark);
}
.hero-section {
background: linear-gradient(135deg, var(--primary-color) 0%, #2575fc 100%);
color: white;
position: relative;
overflow: hidden;
padding: 120px 0;
}
.hero-section::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, rgba(255,255,255,0.1), transparent 60%);
animation: hero-pulse 10s infinite alternate;
}
@keyframes hero-pulse {
0% { transform: scale(0.95); opacity: 0.8; }
100% { transform: scale(1.05); opacity: 1; }
}
.blog-card {
border: none;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transform: perspective(1000px);
transition: all 0.4s ease;
}
.blog-card:hover {
transform: scale(1.05) rotateX(5deg) rotateY(-5deg);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.15);
}
.blog-card .card-img-overlay {
background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.8));
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.category-badge {
background: var(--secondary-color);
color: white;
padding: 5px 10px;
border-radius: 20px;
font-size: 0.7rem;
text-transform: uppercase;
}
.interactive-features {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 30px;
}
.feature-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 20px;
text-align: center;
transition: all 0.4s ease;
}
.feature-card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.2);
}
.newsletter-section {
background: linear-gradient(135deg, var(--primary-color) 0%, #2575fc 100%);
color: white;
border-radius: 15px;
}
.profile-section {
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 30px;
}
.profile-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag {
background: var(--primary-color);
color: white;
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8rem;
}
.dark-mode .tag {
background: var(--secondary-color);
}
.social-links a {
color: var(--primary-color);
margin: 0 10px;
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.social-links a:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<!-- Navigasyon -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<strong style="color: var(--primary-color);">Blog Script</strong>
</a>
<div class="d-flex align-items-center">
<div class="search-container me-3">
<input type="text" class="form-control rounded-pill" placeholder="Yazı ara...">
</div>
<button id="darkModeToggle" class="btn btn-outline-secondary rounded-circle">
<i class="fas fa-adjust"></i>
</button>
</div>
</div>
</nav>
<!-- Hero Bölümü -->
<section class="hero-section text-center">
<div class="container">
<h1 class="display-4 fw-bold mb-3">Blog Script Coder Bytncpx</h1>
<p class="lead mb-4">Teknoloji, Yazılım ve Yaşam Üzerine Derinlikli İçerikler</p>
<a href="#blog-posts" class="btn btn-light btn-lg shadow-lg">İçerikleri Keşfet</a>
</div>
</section>
<!-- Blog Yazıları -->
<section id="blog-posts" class="py-5">
<div class="container">
<div class="row g-4">
<div class="col-md-4">
<div class="card blog-card position-relative">
<img src="https://picsum.photos/seed/tech/800/400" class="card-img" alt="Blog Yazısı">
<div class="card-img-overlay">
<span class="category-badge">Teknoloji</span>
<h5 class="card-title text-white mt-auto">Yapay Zeka Çağı</h5>
<p class="card-text text-white-50">Modern teknolojinin yapay zeka ile değişen geleceği...</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-white-50">15 Aralık 2024</small>
<a href="#" class="btn btn-sm btn-light">Oku</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card blog-card position-relative">
<img src="https://picsum.photos/seed/code/800/400" class="card-img" alt="Blog Yazısı">
<div class="card-img-overlay">
<span class="category-badge">Yazılım</span>
<h5 class="card-title text-white mt-auto">Modern Web Geliştirme</h5>
<p class="card-text text-white-50">Frontend teknolojilerindeki devrim niteliğinde yaklaşımlar...</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-white-50">10 Aralık 2024</small>
<a href="#" class="btn btn-sm btn-light">Oku</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card blog-card position-relative">
<img src="https://picsum.photos/seed/design/800/400" class="card-img" alt="Blog Yazısı">
<div class="card-img-overlay">
<span class="category-badge">Tasarım</span>
<h5 class="card-title text-white mt-auto">Kullanıcı Deneyimi Rehberi</h5>
<p class="card-text text-white-50">Kullanıcı merkezli tasarım stratejileri ve psikolojisi...</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-white-50">5 Aralık 2024</small>
<a href="#" class="btn btn-sm btn-light">Oku</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- İnteraktif Özellikler -->
<section class="container my-5">
<div class="interactive-features">
<h2 class="text-center mb-4">Blog Script Özellikleri</h2>
<div class="row">
<div class="col-md-4">
<div class="feature-card">
<i class="fas fa-mobile-alt fa-3x mb-3"></i>
<h4>Responsive Tasarım</h4>
<p>Her ekran boyutunda mükemmel görüntü</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<i class="fas fa-comments fa-3x mb-3"></i>
<h4>Topluluk Etkileşimi</h4>
<p>Yazarlarla ve diğer okuyucularla etkileşim</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<i class="fas fa-chart-line fa-3x mb-3"></i>
<h4>Performans Analizleri</h4>
<p>İçerik ve kullanıcı istatistikleri</p>
</div>
</div>
</div>
</div>
</section>
<!-- Profil ve Etiket Bulutu -->
<section class="container my-5">
<div class="row">
<div class="col-md-4">
<div class="profile-section text-center">
<img src="https://picsum.photos/200/200" alt="Editör Profili" class="profile-avatar mb-3">
<h4>Blog Editörü</h4>
<p class="text-muted">Teknoloji ve yazılım tutkunu</p>
<div class="social-links mt-3">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
<div class="col-md-8">
<div class="profile-section">
<h4 class="mb-4">İçerik Etiketleri</h4>
<div class="tag-cloud">
<span class="tag">Yapay Zeka</span>
<span class="tag">Web Geliştirme</span>
<span class="tag">Tasarım</span>
<span class="tag">Mobil Teknolojiler</span>
<span class="tag">Yazılım Mühendisliği</span>
<span class="tag">Bulut Bilişim</span>
<span class="tag">Veri Bilimi</span>
<span class="tag">UX/UI</span>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="container my-5">
<div class="newsletter-section p-5 text-center">
<h2 class="mb-4">Blog'dan Haberdar Ol</h2>
<p class="mb-4 text-white-50">En son yazılarımızdan ve teknoloji gündeminden anında haberdar olun.</p>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="input-group">
<input type="email" class="form-control rounded-pill" placeholder="E-posta adresiniz">
<button class="btn btn-light ms-2 rounded-pill" type="button">Abone Ol</button>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white py-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<h4 class="mb-3">BlogHub Ultra Pro</h4>
<p class="text-white-50">Teknoloji, yazılım ve tasarım dünyasından özgün ve derinlikli içerikler.</p>
</div>
<div class="col-md-4">
<h5 class="mb-3">Hızlı Erişim</h5>
<ul class="list-unstyled text-white-50">
<li><a href="#" class="text-white-50 text-decoration-none">Ana Sayfa</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Blog Yazıları</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Kategoriler</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Hakkımızda</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">İletişim</a></li>
</ul>
</div>
<div class="col-md-4">
<h5 class="mb-3">Sosyal Medya</h5>
<div class="social-links">
<a href="#" class="text-white me-3"><i class="fab fa-twitter"></i> Twitter</a>
<a href="#" class="text-white me-3"><i class="fab fa-linkedin"></i> LinkedIn</a>
<a href="#" class="text-white"><i class="fab fa-github"></i> GitHub</a>
</div>
</div>
</div>
<hr class="my-4 text-white-50">
<div class="text-center">
<p class="mb-0 text-white-50">© 2024 BlogHub Ultra Pro. Tüm hakları saklıdır.</p>
</div>
</div>
</footer>
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Modüler Yapılandırma ve Uygulama Yönetimi
const BlogHubApp = (() => {
// Konfigürasyon Ayarları
const config = {
darkMode: {
storageKey: 'blogHubDarkMode',
prefersDarkScheme: window.matchMedia('(prefers-color-scheme: dark)').matches
},
newsletter: {
maxSubscriptions: 3,
cooldownPeriod: 24 * 60 * 60 * 1000 // 24 saat
},
analytics: {
enabled: true
}
};
// Yardımcı Utility Fonksiyonları
const utils = {
// E-posta doğrulama
validateEmail: (email) => {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
},
// Güvenli localStorage işlemleri
storage: {
set: (key, value) => {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch (error) {
console.error('Storage yazma hatası:', error);
}
},
get: (key) => {
try {
const item = localStorage.getItem(key);
return item ? JSON.parse(item) : null;
} catch (error) {
console.error('Storage okuma hatası:', error);
return null;
}
}
},
// Toast bildirimleri
toast: {
show: (message, type = 'info') => {
const toastContainer = document.getElementById('toast-container');
if (!toastContainer) {
const container = document.createElement('div');
container.id = 'toast-container';
container.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
`;
document.body.appendChild(container);
}
const toast = document.createElement('div');
toast.className = `toast toast-${type}`;
toast.style.cssText = `
background-color: ${type === 'success' ? '#28a745' : type === 'error' ? '#dc3545' : '#17a2b8'};
color: white;
padding: 15px;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
animation: fadeIn 0.5s, fadeOut 0.5s 3s forwards;
`;
toast.textContent = message;
document.getElementById('toast-container').appendChild(toast);
// Otomatik toast kaldırma
setTimeout(() => {
document.getElementById('toast-container').removeChild(toast);
}, 3500);
}
}
};
// Dark Mode Yönetimi
const darkModeManager = {
init: () => {
const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;
// Başlangıç durumu
const savedMode = utils.storage.get(config.darkMode.storageKey)
?? config.darkMode.prefersDarkScheme;
if (savedMode) {
body.classList.add('dark-mode');
darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
}
// Toggle Event Listener
darkModeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
const isDarkMode = body.classList.contains('dark-mode');
utils.storage.set(config.darkMode.storageKey, isDarkMode);
darkModeToggle.innerHTML = isDarkMode
? '<i class="fas fa-sun"></i>'
: '<i class="fas fa-adjust"></i>';
// Analytics için dark mode değişikliği
if (config.analytics.enabled) {
console.log('Dark Mode Değişikliği:', isDarkMode ? 'Açık' : 'Kapalı');
}
});
}
};
// Newsletter Abonelik Yönetimi
const newsletterManager = {
init: () => {
const newsletterForm = document.querySelector('.newsletter-section .input-group');
const emailInput = newsletterForm.querySelector('input[type="email"]');
const subscribeButton = newsletterForm.querySelector('button');
subscribeButton.addEventListener('click', () => {
const email = emailInput.value.trim();
// E-posta doğrulaması
if (!utils.validateEmail(email)) {
utils.toast.show('Lütfen geçerli bir e-posta adresi giriniz.', 'error');
return;
}
// Abonelik sınırı kontrolü
const subscriptions = utils.storage.get('newsletterSubscriptions') || [];
const lastSubscriptionTime = subscriptions.length > 0
? subscriptions[subscriptions.length - 1].timestamp
: 0;
// Cooldown kontrolü
if (Date.now() - lastSubscriptionTime < config.newsletter.cooldownPeriod) {
utils.toast.show('Çok fazla abonelik denemesi. Lütfen bekleyin.', 'error');
return;
}
// Abonelik işlemi
subscriptions.push({
email: email,
timestamp: Date.now()
});
// Son 3 aboneliği sakla
if (subscriptions.length > config.newsletter.maxSubscriptions) {
subscriptions.shift();
}
utils.storage.set('newsletterSubscriptions', subscriptions);
utils.toast.show('Aboneliğiniz başarıyla alındı!', 'success');
emailInput.value = '';
});
}
};
// Blog Yazısı Arama ve Filtreleme
const contentManager = {
init: () => {
const searchInput = document.querySelector('.search-container input');
const blogPosts = document.querySelectorAll('.blog-card');
const tagCloud = document.querySelector('.tag-cloud');
// Arama işlevi
searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
blogPosts.forEach(post => {
const title = post.querySelector('.card-title').textContent.toLowerCase();
const category = post.querySelector('.category-badge').textContent.toLowerCase();
const description = post.querySelector('.card-text').textContent.toLowerCase();
const isMatch = title.includes(searchTerm) ||
category.includes(searchTerm) ||
description.includes(searchTerm);
post.style.display = isMatch ? 'block' : 'none';
});
});
// Etiket filtreleme
tagCloud.addEventListener('click', (event) => {
if (event.target.classList.contains('tag')) {
const selectedTag = event.target.textContent.toLowerCase();
blogPosts.forEach(post => {
const category = post.querySelector('.category-badge').textContent.toLowerCase();
const description = post.querySelector('.card-text').textContent.toLowerCase();
const isMatch = category.includes(selectedTag) ||
description.includes(selectedTag);
post.style.display = isMatch ? 'block' : 'none';
});
}
});
}
};
// Sayfa Kaydırma ve Navigasyon Yönetimi
const navigationManager = {
init: () => {
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// Yumuşak sayfa kaydırma
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
}
};
// Performance ve Analytics
const performanceTracker = {
init: () => {
if (!config.analytics.enabled) return;
const trackPageLoad = () => {
const perfData = window.performance.timing;
const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
console.log('Sayfa Yükleme Süresi:', pageLoadTime + 'ms');
};
window.addEventListener('load', trackPageLoad);
}
};
// Public metodlar ve başlatma
return {
init: () => {
darkModeManager.init();
newsletterManager.init();
contentManager.init();
navigationManager.init();
performanceTracker.init();
}
};
})();
// Uygulamayı başlat
document.addEventListener('DOMContentLoaded', BlogHubApp.init);
// Dark Mode Toggle
</script>
</body>
</html>
