Son Yazılar Kenar Çubuğu

Yazar: Murat Marti

Tarih: 12.06.2025 11:20:33

44 kelime – tahmini okuma süresi: 1 dakika

Blogunuzun dinamikliğini artırmak ve ziyaretçilerin en güncel içeriklere kolayca ulaşmasını sağlamak için Son Yazılar Kenar Çubuğu önemli bir araçtır. Bu özellik sayesinde okuyucular, en son yayınlanan yazılarınızı hızlıca keşfedebilir ve blog içeriğinize daha fazla etkileşim sağlayabilirsiniz. Peki, kenar çubuğunu nasıl optimize edebilirsiniz? İşte detaylar!

Bu yazı 428 kişi tarafından okundu.

<!-- Son Yazılar Kenar Çubuğu --> <div id="recent-posts-sidebar"> <h3 class="recent-posts-title">Son Yazılar</h3> <ul id="recent-posts-list"></ul> <button id="close-recent-posts">Kapat</button> </div> <button id="open-recent-posts">Son Yazılar</button> <style> #recent-posts-sidebar { position: fixed; right: -310px; top: 0; width: 300px; height: 100%; background: #fff; border-left: 1px solid #ddd; box-shadow: -2px 0 5px rgba(0,0,0,0.1); padding: 20px; box-sizing: border-box; overflow-y: auto; transition: right 0.3s; z-index: 1000; } #recent-posts-sidebar.open { right: 0; } .recent-posts-title { font-size: 18px; text-align: center; margin-bottom: 15px; } #recent-posts-list { list-style: none; padding: 0; margin: 0; } #recent-posts-list li { margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; } #recent-posts-list li a { font-weight: bold; text-decoration: none; color: #007bff; display: block; } #recent-posts-list li a:hover { color: #0056b3; } #open-recent-posts { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); background: #007bff; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; z-index: 999; } #close-recent-posts { background: #dc3545; color: white; border: none; padding: 8px 12px; width: 100%; border-radius: 4px; margin-top: 10px; cursor: pointer; } </style> <script> document.addEventListener('DOMContentLoaded', function () { const sidebar = document.getElementById('recent-posts-sidebar'); const openBtn = document.getElementById('open-recent-posts'); const closeBtn = document.getElementById('close-recent-posts'); openBtn.addEventListener('click', () => { sidebar.classList.add('open'); if (!document.getElementById('recent-loaded')) loadRecentPosts(); }); closeBtn.addEventListener('click', () => { sidebar.classList.remove('open'); }); window.loadSidebarPosts = function (data) { const container = document.getElementById('recent-posts-list'); container.innerHTML = ''; const entries = data.feed.entry || []; entries.forEach(entry => { const title = entry.title.$t; const link = entry.link.find(l => l.rel === 'alternate').href; const li = document.createElement('li'); li.innerHTML = `<a href="${link}">${title}</a>`; container.appendChild(li); }); const marker = document.createElement('div'); marker.id = 'recent-loaded'; marker.style.display = 'none'; document.body.appendChild(marker); }; function loadRecentPosts() { const script = document.createElement('script'); script.src = '/feeds/posts/default?alt=json-in-script&callback=loadSidebarPosts&max-results=5'; document.body.appendChild(script); } }); </script>