Skip to main content

Responsive Simple Sitemaps Dari Kompi Ajaib

Website Mini - Halo sobat blogger, selamat Malam, di malam 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 kita publish. Untuk penampilan sitemaps ini sangat simple dan sangat menarik menurut 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 bisa kita sesuaikan dengan nomer yang kita tentukan. Selain itu akan ada tombol next, jadi untuk membuka halaman sitemaps ini tidak memerlukan loading yang lama, karena 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. 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, 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://www.websitemini.net/';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://www.websitemini.net/ yang saya marking warna kuning dengan url blog Anda, dan untuk angka 15 yang saya marking warna kuning adalah 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://www.kompiajaib.com/2014/09/responsive-simple-sitemaps-blogger.html

You Might Also Like:

Buka Komentar