Script daftar isi super responsive di blog

<style type='text/css'>

#show-cat {float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px;margin:20px 2% 20px 0}

#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:#555;text-decoration:none}

#show-cat ul li a, #navi-cat a, #navi-cat span{font-size:13px}

#show-cat ul li a:hover, #navi-cat a:hover{background:#666;color:#fff}

#show-post{float:left;width:60%}

#show-post ul li{list-style-type:none;padding:8px 0;border-bottom:1px solid rgba(0,0,0,0.1);font-size:14px;margin:0 0 0 -25px}

#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}

#show-cat::-webkit-scrollbar{widht:8px;height:8px}

#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);}

#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}

#show-cat::-webkit-scrollbar-thumb{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{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://parsua.blogspot.com';cat_numb=12;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>

Itulah script daftar isi super responsive 2017. Untuk bisa mengcopy kode diatas, disable javascript di browser yang anda gunakan. Letakkan script tersebut di laman blog anda. Ganti link parsua.blogspot.com dengan link blog anda. Untuk demonya lihat daftar isi blog ini.

Comments

  1. Artikelnya sangat jelas gan, to the point. Tapi alangkah baiknya kalau dikasih keterangan lebih jelas lagi karena tidak semua orang mengerti. Terima kasih ya sudah berbagi.

    ReplyDelete
    Replies
    1. Ok mas, terimakasih sarannya. Postingan kedepan akan diusahakan lebih jelas.

      Delete

Post a Comment

Komentar yang membangun dan bersifat positif anda sangat diharapkan.

Popular posts from this blog

Ketawadhuan Al-Imam Asy-Syafi'i Rahimahullah Dan Kebijaksanaan Ibunya

Aplikasi LangitMusik : Oksigennya Pecinta Musik

Bisikan Kedamaian Dari Kesunyian Malam

Kisah Sang Taman Hati

Situs yang harus diketahui oleh blogger