Otomatik İçerik Çeken Sitemap (Blogger için)
Yazar: Murat Marti
Tarih: 27.06.2025 11:45:24
19 kelime – tahmini okuma süresi: 1 dakika
Bu çözüm, Blogger'ın JSON feed'ini kullanarak blog yazılarınızı çeker ve kategorilere göre veya tümünü listeleyerek şık bir şekilde gösterir.
Bu yazı 4.638 kişi tarafından okundu.
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Site Haritası - Blog Adınız</title> <meta name="description" content="Blogunuzun otomatik güncellenen site haritası. Tüm yazılara ve kategorilere kolayca erişin."> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f4f7f6; color: #333; } .sitemap-container { max-width: 900px; margin: 30px auto; background-color: #ffffff; padding: 40px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } h1 { text-align: center; color: #2c3e50; margin-bottom: 40px; font-size: 2.5em; font-weight: 600; } .sitemap-section { margin-bottom: 30px; } .sitemap-section h2 { color: #34495e; font-size: 1.8em; border-bottom: 2px solid #e0e0e0; padding-bottom: 10px; margin-bottom: 20px; } .sitemap-section ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; } .sitemap-section li { background-color: #f8fbfd; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; } .sitemap-section li:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .sitemap-section li a { text-decoration: none; color: #007bff; font-weight: 500; display: block; font-size: 1.1em; word-wrap: break-word; } .sitemap-section li a:hover { color: #0056b3; text-decoration: underline; } #all-posts-list, #categories-list { /* JavaScript ile doldurulacak */ } .loading-message { text-align: center; font-size: 1.2em; color: #555; padding: 20px; } .sitemap-footer { text-align: center; margin-top: 50px; padding-top: 20px; border-top: 1px solid #eee; color: #777; font-size: 0.9em; } </style> </head> <body> <div class="sitemap-container"> <h1>Site Haritası</h1> <div class="sitemap-section"> <h2>Tüm Yazılar</h2> <ul id="all-posts-list"> <li class="loading-message">Yazılar yükleniyor...</li> </ul> </div> <div class="sitemap-section"> <h2>Kategoriler</h2> <ul id="categories-list"> <li class="loading-message">Kategoriler yükleniyor...</li> </ul> </div> <div class="sitemap-section"> <h2>Diğer Sayfalar</h2> <ul> <li><a href="/p/hakkimda.html">Hakkımda</a></li> <li><a href="/p/iletisim.html">İletişim</a></li> <li><a href="/p/gizlilik-politikasi.html">Gizlilik Politikası</a></li> </ul> </div> <div class="sitemap-footer"> © 2025 <span id="blog-name-footer">Blog Adınız</span>. Tüm Hakları Saklıdır. </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Blogunuzun URL'sini buraya girin (örneğin: 'https://benimblogum.blogspot.com') const blogUrl = 'https://[BLOGUNUZUN-ADRESİ].blogspot.com'; // BURAYI KENDİ BLOG URL'NİZLE DEĞİŞTİRİN! const allPostsList = document.getElementById('all-posts-list'); const categoriesList = document.getElementById('categories-list'); const blogNameFooter = document.getElementById('blog-name-footer'); let categories = new Set(); // Tekrarlanan kategorileri önlemek için Set kullanıyoruz // Blogger JSON Feed'inden verileri çekme fonksiyonu function fetchBlogPosts() { fetch(`${blogUrl}/feeds/posts/summary?alt=json&max-results=999`) // Max-results limitini artırabilirsiniz .then(response => response.json()) .then(data => { const posts = data.feed.entry; allPostsList.innerHTML = ''; // Yükleme mesajını kaldır categoriesList.innerHTML = ''; // Yükleme mesajını kaldır blogNameFooter.textContent = data.feed.title.$t; // Blog adını footera çek if (!posts) { allPostsList.innerHTML = '<li>Yazı bulunamadı.</li>'; categoriesList.innerHTML = '<li>Kategori bulunamadı.</li>'; return; } // Tüm yazıları listeleme posts.forEach(post => { const postTitle = post.title.$t; let postUrl = ''; for (let i = 0; i < post.link.length; i++) { if (post.link[i].rel == 'alternate') { postUrl = post.link[i].href; break; } } if (postUrl) { const listItem = document.createElement('li'); const link = document.createElement('a'); link.href = postUrl; link.textContent = postTitle; listItem.appendChild(link); allPostsList.appendChild(listItem); } // Kategorileri toplama if (post.category) { post.category.forEach(cat => { categories.add(cat.term); }); } }); // Kategorileri listeleme if (categories.size > 0) { categories.forEach(category => { const listItem = document.createElement('li'); const link = document.createElement('a'); // Blogger'da kategori URL'leri genellikle "/search/label/KategoriAdı" şeklindedir link.href = `${blogUrl}/search/label/${encodeURIComponent(category)}`; link.textContent = category; listItem.appendChild(link); categoriesList.appendChild(listItem); }); } else { categoriesList.innerHTML = '<li>Kategori bulunamadı.</li>'; } }) .catch(error => { console.error('Yazılar yüklenirken bir hata oluştu:', error); allPostsList.innerHTML = '<li>Yazılar yüklenirken bir hata oluştu. Lütfen daha sonra tekrar deneyin.</li>'; categoriesList.innerHTML = '<li>Kategoriler yüklenirken bir hata oluştu.</li>'; }); } fetchBlogPosts(); // Fonksiyonu çağırarak verileri çekmeye başla }); </script> </body> </html>
Nedir?
Nasıl Kullanılır ve Özelleştirilir?
Blogger'da Yeni Sayfa Oluşturun: Blogger kontrol panelinize gidin ve "Sayfalar" bölümünden Yeni Sayfa oluşturun.
HTML Görünümüne Geçin: Sayfa düzenleyicisinde, sağ üst köşede veya altta bulunan kalem ikonuna tıklayarak HTML görünümüne geçin.
Kodu Yapıştırın: Yukarıdaki tüm HTML kodunu kopyalayıp bu HTML düzenleyiciye yapıştırın.
blogUrl Değişkenini Güncelleyin: Yapıştırdığınız kodun içinde,
const blogUrl = 'https://[BLOGUNUZUN-ADRESİ].blogspot.com'; // BURAYI KENDİ BLOG URL'NİZLE DEĞİŞTİRİN!
0 Comments:
Yorum Gönder