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.

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!