Blogger arşiv sayfası oluşturma, Bloglar için site haritası ekleme kodları, Blogger için arşiv eklentisi
Arşiv eklentisi her blog sayfasında olması gereken önemli sayfadır. Hangi isimle sayfa oluşturacağınız sizin isteğinize kalmış ama mutlaka bu tür bir sayfa oluşturmalısınız. Oluşturduğunuz arşiv sayfası ile ziyaretçilerinize sıralı, geçmişe dönük yazılarınızı gösterirsiniz. Böylece blogunuzu ziyaret eden ve arşivinizi merak edenler için yol gösterici bir iş yapmış olursunuz. Bu eklentiler ile blogunuzda geçirilen süre yani hemen çıkma oranı da olumlu etkilenecektir. Her 100 ziyaretçiden 10 tanesini bu şekilde blog sayfanızda fazladan tutsanız bile SEO açısından faydalıdır.
Ayrıca blogger servisinin blog siteleri için gadget olarak hazırladığı arşiv eklentisi mevcut. Buradaki sorun sunulan arşiv eklentisinin profesyonellikten uzak ve tasarımının kötü olmasıdır. Bazı bloglarda bu eklentiyi görüyorum ama onlarda genelde yeni başlayanlar oluyor. Blog yazarlığı konusunda 1 yılı devirmiş ve tasarıma özen gösteren her blog yazarı değişim ve gelişim yoluna gitmeye başlarlar. Bu düşüncedeki arkadaşlarım için faydalı olabilecek ve kenara not ettiğim arşiv eklentilerini seçenekler halinde sunmaya karar verdim. Bu eklentiyle alakalı bir kaç soru almıştım ve nasıl eklediğimin kodunu paylaşmıştım ama buz yazı ile daha kapsamlı ve bol seçenekli bir kaç eklenti göstermek istiyorum.
Eğer önceden oluşturduğunuz arşiv sayfası varsa yazı alanında "HTML" seçiliyken aşağıdaki kodlardan birini ekleyin. Arşiv sayfanız yok ve yeni oluşturmak istiyorsanız Sayfalar>Yeni Sayfa üzerinden sayfanıza isim vererek kodlardan birini ekleyip kaydedebilirsiniz.
1. Arşiv Sayfası Eklentisi:
<div style="background-color: none; border: 1px solid #ccc; height: auto; overflow: auto; padding: 5px; width: auto;">Bu kod ile yazılarınız açık bir şekilde sıralanır ve yazılarınızın yayınlandığı gün hemen başında gözükür. Kendi blogumda uzun zamandır kullandığım ve sorun yaşamadığım bir eklenti. Blog sayfanıza eklerken blog url adresinizi değiştirmeyi unutmayın.
<script src="https://meftunmede.github.io/javascripts/MeftunMede_Blogger_sitemap.js"></script><script src="https://dogushakanyilmaz.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script></div>
2. Arşiv Sayfası Eklentisi:
<div style="list-style-type: none;"><script src="http://yourjavascript.com/8875514172/arsiv.txt.js" type="text/javascript">Bu eklenti ile tarihler daha belirgin ve koyu ama hangi gün yazıldığını gösteren bölüm yok. Daha mı iyi bilmiyorum ve size bırakıyorum. Eklemek isterseniz aynı şekilde blog url adresinizi değiştirmeyi unutmayın.
</script><script src="http://dogushakanyilmaz.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script><br /></div>
3. Arşiv Sayfası Eklentisi:
<script src="http://yourjavascript.com/9184200431/blogtoc-min.js"type="text/javascript">Bu eklenti blog yazılarınıza verdiğiniz etiketler üzerinden sıralama yapıyor. Ayrıca en son yazdığınız yazıları Yeni!! şeklinde gösterebiliyor. Tek dezavantajı yazılarınıza kategorilemek yerine çok sayıda etiket verdiyseniz arşivlerken uzun ve kötü görüntü olabilir. Yazılarınızı az sayıda genel etiket ile yayınlıyorsanız değişik ve kolay bir site haritası. Değiştirmek için kendi url adresinizi eklemeyi unutmayın. Ayrıca etiketleme konusunda daha çok bilgi almak için buradaki yazımı da okuyabilirsiniz.
</script>
<script src="http://dogushakanyilmaz.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>
4. Arşiv Sayfası Eklentisi:
<style type='text/css' scoped='scoped'> #sidebar-wrapper{display:none!important}#main-wrapper{width:100%!important}#show-cat{float:left;margin:20px 5% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px solid #ccc}#show-cat ul{margin:0;border-top:0 solid #ccc;padding:0}#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0 solid #ccc;border-left:0 solid #ccc;padding:0}#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #ccc}#navi-cat a:hover{color:#fff!important}#show-cat ul li:last-child a{border-bottom:none}#show-cat ul li a,#navi-cat a{background:#fff;color:#555;font-weight:bold;text-decoration:none}#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}#show-cat ul li a:hover,#navi-cat a:hover{background:#666;color:#fff}#show-post{float:left;width:69%;line-height:1.6em}#show-post ul li{list-style-type:none;margin:10px 0 0 -40px;padding:10px;border:1px solid #ddd}#show-post a:hover{color:#07ACEC}#show-post a{color:#333;font-weight:bold}#navi-cat{padding:20px 0}#navi-cat a{margin-right:10px;border:1px solid #ccc}#navi-cat a,#navi-cat span{padding:10px 15px}#navi-cat span{float:right}#show-cat::-webkit-scrollbar{width:8px;height:8px}#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:2px}#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}#show-cat::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}@media screen and (max-width:768px){#show-cat{width:35%}#show-post{width:59%}}@media screen and (max-width:480px){#show-cat{width:100%;margin:20px 0}#show-post{width:100%}} </style> <div id='show-cat'></div> <div id='show-post'> <script type='text/javaScript'> var cat_home='https://dogushakanyilmaz.blogspot.com';cat_numb=10;cat_pre='Geri';cat_nex='İleri'; var cat_name;var cat_start;var cat_class; function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>'); </script> </div> <div style='clear:both'></div>Bu eklentiyi sayfanıza eklediğinizde çok kullanışlı ve açılır menü şeklinde site haritasına sahip olacaksınız. Etiketleriniz sütunlar halinde dizilirken merak ettiğiniz etikete tıkladığınızda ilgili yazılar yan tarafında sıralanır. Yazılar 10'ar şekilde sıralanır ve 10'dan fazla yazınız varsa ileri seçeneği gelerek diğer 10 yazıyı gösteriyor. Aynı şekilde 3-4 sayfa ileri gittiğinizde geri seçeneği gelerek bir önceki sayfaya gelmenizi sağlıyor.
✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵
Emeğine sağlık.
YanıtlaSilTeşekkürler
SilSonuncusu görünüm olarak en çok ilgimi çeken oldu,denemek isterim.
YanıtlaSilBende onu kullanıyorum. Sıkıntısı yok
SilBlog tasarımı hakkındaki ipuçları çok hoşuma gidiyor. Çok güzel bir yazı olmuş. Deneyeceğim en kısa zamanda...
YanıtlaSilTeşekkür ederim, değer kattın.
SilFaydalı bir içerik hazırlamışsın... emeğine sağlık...
YanıtlaSilTeşekkürler faydalı bulmana sevindim
Silen son olan kodu uyguladığımda: yalnızca boş bir dikdörtgen çerçeve görünüyor.
YanıtlaSilHalil bey, Kodu kopyaladıktan sonra kendi blog url adresinizi ekleyerek tekrar deneyebilir misiniz?
SilEn son vermiş olduğunuz kodu eklemeye çalıştığımda " HTML'iniz kabul edilemez: Etiket bozuk: UL " hatası veriyor. Yoksay diyip devam etsem bir sıkıntısı olur mu?
YanıtlaSilYoksay dediğinizde çalışıyorsa bir sıkıntı olmaz.
SilEmeğinize sağlık... Sizleri de kendi güzel söz bloguma bekliyorum.
YanıtlaSilunlumeshursozler.blogspot.com