Sitemap (Daftar Isi) Responsive Untuk Blogger

Oleh Unknown

Sabtu, 24 Mei 2014

Bagikan :

Tweet

Sitemap (Daftar Isi) Responsive Untuk Blogger - Sitemap atau daftar isi ini bisa menyesuaikan sesuai ruang yang ada. Maka dari itu, sitemap ini bisa dibilang responsive. Desainnya pun juga simple dan ringan. Terdiri atas label-label yang jika diklik akan keluar postingan-postingan pada label tersebut. 

Dan uniknya sitemap ini terdapat page navigationnya. Jadi, kita bisa mengatur berapa jumlah postingan yang akan tampil untuk satu halamannya. Sehingga, sitemap ini tidak akan memanjang ke bawah meskipun postingannya banyak. Bisa kita lihat gambarnya di bawah ini

DEMO

Untuk memasangnya, silahkan simpan kode berikut ini di halaman statis. Ingat menyimpannya pada mode HTML, bukan Compose. Usahakan setelah kita menaruh kode tersebut di bagian HTML, jangan kita klik Compose. Karena ketika kita mengklik Compose dan coba anda mengklik HTML lagi, kodenya bisa berubah. Dan kalau orang tidak cermat dan langsung dipublish saja halamannya, maka daftar isi tersebut akan tampak kosong. Ini seperti yang saya alami dulu.

Berikut ini kodenya.

<style type='text/css' scoped='scoped'>
#show-cat{float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px}
#show-cat ul{margin:0;border-top:1px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px}
#show-cat ul li a,#navi-cat a{background:#fff;color:#d80556;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:15px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:60%}
#show-post ul li{list-style-type:none;padding-bottom:15px}
#navi-cat{padding:20px 0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px}
#navi-cat span{float:right}
</style>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://blog-thoni.blogspot.com';cat_numb=11;cat_pre='Prev';cat_nex='Next';
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>

Silahkan ubah URL nya dengan URL blog anda. Untuk kode cat_numb=11 itu merupakan kode jumlah postingan yang tampil per halamannya. Anda bisa mengubahnya sesuai selera.

Ingat, ketika anda memasukkan di HTML, usahakan jangan sesekali membuka bagian Compose, karena nanti kodenya akan berubah. Jika berubah, maka hasilnya akan kosong. Ini banyak yang mengalaminya, termasuk saya sendiri.

Jangan lupa juga untuk mematikan komentar pada halamannya. Caranya lihat bagian samping kanan saat membuat halamannya, klik Pilihan, lalu pilih Jangan bolehkan, sembunyikan yang ada. Dengan begitu, komentar pada halaman tersebut telah dinonaktifkan.

Untuk membuat halaman statis bisa lebar tanpa ada sidebarnya, gunakan tag kondisional dan taruh di atas </head>.
Seperti tag kondisional pada blog yang saya jadikan demo.

<b:if cond='data:blog.url == &quot;URL HALAMAN DAFTAR ISI&quot;'>
<style type='text/css'>
.sidebar-wrapper {display:none}
.main-wrapper{width:100%}
.post h1,.post h2{text-align:center}
.post-footer{display:none}
.breadcrumbs{display:none}
#comments{display:none}
</style>
</b:if>

Jika elemen CSS-nya sama, gunakan saja seperti kode di atas. Dan jangan lupa mengubah URL HALAMAN DAFTAR ISI dengan URL halamannya. Jika elemen CSS-nya berbeda, ya sesuaikanlah sendiri. Itu hanya contoh saja.

Resource : blog.duypham.info

Tag : Blogging