Blogger İçin Yeni Arşiv Tablosu

2017 için aldığım kararları yazdığım yazının 5. maddesi olan kullanıcı deneyimi maddesinde arşiv sayfamla ilgili bir düzenlemeye gideceğimi belirtmiştim. Bu yönde yaptığım araştırmalar  ve çalışmalar sonucunda kullanıcıların eski yazılara kolayca ulaşmasını sağlayacak çok faydalı bir eklenti edindim.

Bu arşiv tablosu eklentisini Blog Hocam’a uygun tasarıma getirip kullanmaya başlamadan önce ham halini sizlerle paylaşmak istedim.

Bu arşiv tablosu kodlarını arşiv sayfanıza eklediğinizde resimde gördüğünüz gibi blog yazılarınızda kullandığınız etiketler (ben bunları kategori şeklinde kullanıyorum) sol tarafta gözükecek ve etiket ismine tıkladığınızda o etikete ait yazılarınızın sağ tarafta listelenecek. 10ar 10ar listelenecek yazılar arasında ileri – geri butonlarını kullanarak gezinti yapabiliyorsunuz.

Blogger arşiv tablosu


Bu arşiv tablosu sayesinde ziyaretçiler istedikleri konularla ilgili eski yazılarınıza kolayca ulaşabilecekler.

Arşiv tablosunu blogunuza eklemek ise oldukça basit. Hali hazırda bir arşiv sayfasınız varsa Blogger kumanda panelinden Sayfalar > Arşiv > Düzenle diyerek sayanın HTML kodlarının olduğu sekmeyi açıyorsunuz.

Eğer henüz bir arşiv sayfanız yoksa Sayfalar > Yeni Sayfa diyerek sayfa başlığına Arşiv yazıyorsunuz ve yine sayfanın HTML sekesini açıyorsunuz.

HTML penceresine aşağıdaki kodları yapıştırıyorsunuz ve mavi renkle gösterdiğim http://bloghocam.blogspot.com yazan yere kendi blog adresinizi yazıyorsunuz.

<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='
http://bloghocam.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+=' &ndash; '+(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>

Sayfayı yayınlayıp görüntülediğinizde arşiv tablonuzun hazır olduğunu göreceksiniz.

Bu arşiv tablosunu en kısa sürede Blog Hocam’ın arşiv sayfasına ekleyeceğim ve eski yazılar arasında kolayca gezebileceksiniz.

Umarım işinize yarar. İyi bloglar!

11 yorum:

  1. Arşiv tablosu her blogun kullanması gereken bir eklenti.Bir önceki yazınızda arşiv sayfanızın boş olduğunu farketmiştim.Eski arşiv sayfası kodlarının çoğu çalışmıyor.Yeni arşiv kodları herkesin çok işine yarayacaktır.Ellerinize sağlık :)

    YanıtlaSil
  2. Merhaba Hocam,
    Ben Ahmet Bekirhanlı (Kuru Sözlük - http://kuru-sozluk.blogspot.com.tr/ ) bloğunun sahibiyim bloğum kayboldu blogger tarafından bana herhangi bir mail ya da uyarı gelmedi bloğun ne olduğu konusunda yardımcı olursanız sevinirim.İyi Çalışmalar...

    YanıtlaSil
  3. Gayet başarılı, elinize sağlık hocam...

    YanıtlaSil
  4. merhaba hocam,
    kodu uyguladım fakat yayınlarımın tamamını arşivde listelemiyor. kodların çalışma mantığına göre sitede düzenleme yapmam gerekiyor herhalde. yardımcı olursanız sevinirim.

    YanıtlaSil
  5. Çok güzel bir yenilik, keşke benim içeriklerde anahtar kelimelerle ayrılmış olsa, uygulayabilirdin.

    YanıtlaSil
  6. Çok faydalı bir yazı. Teşekkürler..

    YanıtlaSil
  7. Faydalı ve fikir verici bir yazıydı.
    Sizin sayesinde blogunu büyütmeye çalışanlardan biriyim bende.
    Hayırlı günler.

    YanıtlaSil
  8. Gayet kullanışlı görünüyor. Fakat benim blogumda çalışmadı. sayfayı büyütüyor ve aşağıya doğru bir kutu çıkıyor içerikler görünmüyor. Nedenini çözemedim.

    YanıtlaSil
  9. https://getproknowledge.blogspot.com/ haleda blogumda yorum yapılmıyor sadece google + yorumları gözüküyor :( Yardım

    YanıtlaSil
  10. Süpersin Varya Ne Ararsam Sende Var Senin Blog Adresinin Reklamını Kendi Bloguma Ekledim Hocam

    YanıtlaSil
  11. Ben sayfayı oluşturduğumda sadece boş bir panel göründü.

    YanıtlaSil

Blogger tarafından desteklenmektedir.