Responsive Simple Sitemaps Dari Kompi Ajaib

Coba Ngetik - hay sobat blogger, selamat pagi, di pagi ini saya mau posting seperti judul di atas, yaitu Responsive Simple Sitemaps Dari Kompi Ajiab. Sitemaps atau yang sering di bilang daftar isi blog/peta situs. Sitemaps merupakan sebuah kumpulan dari seluruh isi artikel blog yang telah anda publish. Untuk penampilan sitemaps ini sangat simple dan sangat menarik menurut saya. Karena sitemaps ini tidak menmpilkan semua link postingan, Tapi hanya menmpilkan tiap-tiap label saja, apabila label di dalam sitemaps ini di klik maka akan memunculkan link artikelnya. Dan jumlah link artikel yang di tampilkan juga bisa kita sesuaikan dengan nomer yang tertentu. dan akan ada tombol next nya, jadi untuk membuka halaman sitemaps ini tidak memerlukan loading yang lama, karena memang simple dan tidak memakan banyak ruang halaman.



jika anda penasaran dengan demonya silahkan anda klik sitemaps di blog ini pada menu di atas. Bagaimana menurut anda, keren kan?. Dengan adanya sitemaps atau daftar isi akan memudahkan pengunjung yang ingin menjelajahi semua isi artikel pada blog anda. Jadi sitemaps atau daftar isi ini penting untuk kita terapkan pada blog kita. jika anda tertarik dan ingin memasang Responsive Simple Sitemps Dari Kompi Ajaib ini, mari kita simak caranya sebagai berikut.

1. Pertama masuk di akun blogger anda.

2. Pilih ==> Laman ==> Laman Baru.

3. Coppy script di bawah ini dan paste/tempelkan pada laman kosong tadi. Perlu di ingat! saat membuat laman, yang pertama di isi adalah mengisi judul laman terlebih dahaulu, baru isi laman. Karena agar judul laman dan link seauai.

<style type='text/css' scoped='scoped'>
#show-cat{float:left;margin:10px 5% 20px 0;width:25%;height:389px;overflow:auto;line-height:18px;border:1px solid #ccc}
#show-cat ul{margin:0;border-top:0px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0px solid #ccc;border-left:0px solid #ccc;padding:0}
#show-cat ul li a{display:block!important;padding:10px;border-bottom:1px solid #ccc;}
#show-cat ul li:last-child a{border-bottom:none;}
#show-cat ul li a,#navi-cat a{background:#fff;color:#4d90f0;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:#ccc;color:#fff}
#show-post{float:left;width:69%}
#show-post ul li{list-style-type:none;margin-left:-20px}word-wrap:break-word;
#show-post ul li a{word-wrap:break-word;}
#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}

@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://www.cobangetik.com/';cat_numb=15;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>


4. Jangan lupa ganti url http://www.cobangetik.com/ yang saya marking warna merah dengan url blog anda, Dan Untuk angka 15 yang saya marking warna merah adalah jumlah link artikel yang akan ditampilkan. Silahkan ganti angka 15 dengan angka yang and inginkan. Setelah itu publish laman.

Nah, itulah cara memasang Responsive Simple Sitemaps Dari Kompi Ajaib. Semoga bermanfaat.

Source: http://www.kompiajaib.com/2014/09/responsive-simple-sitemaps-blogger.html

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser