Responsive Simple Sitemaps Dari Kompi Ajaib

- Halo sahabat blogger, selamat Malam, di malam ini saya mau posting menyerupai 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 kita publish. Untuk penampilan sitemaps ini sangat simple dan sangat menarik berdasarkan Saya. Karena sitemaps ini tidak menampilkan 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 dapat kita sesuaikan dengan nomer yang kita tentukan. Selain itu akan ada tombol next, jadi untuk membuka halaman sitemaps ini tidak memerlukan loading yang lama, alasannya yaitu memang simple dan tidak memakan banyak ruang halaman.
Baca juga: Membuat Sitemap Untuk Blog AMP Pada Halaman Static

Dengan adanya sitemaps atau daftar isi akan memudahkan pengunjung yang ingin menjelajahi semua isi artikel pada blog anda. Makara sitemaps atau daftar isi ini penting untuk kita terapkan pada blog kita. kalau 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! ketika menciptakan laman, yang pertama di isi yaitu mengisi judul laman terlebih dahaulu, gres isi laman, Agar URL Laman Sesuai Dengan Judul Laman.

<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='https://xomlic.blogspot.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 https://xomlic.blogspot.com yang saya marking warna kuning dengan url blog Anda, dan untuk angka 15 yang saya marking warna kuning yaitu jumlah link artikel yang akan ditampilkan. Silahkan ganti angka 15 dengan angka yang Anda inginkan. Setelah itu publish laman.

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

Source: https://xomlic.blogspot.com/search?q=responsive-simple-sitemaps-blogger

Share this Article