6 Dec 2016

Sitemap / Daftar Isi Blog, Bagaimana Cara Membuatnya? | Tukang Ketik

Tags

Daftar isi blog - Beberapa hari yang lalu saya membeli template blogger dari mbak Arlina, nama templatenya Simplify Responsive Blogger Template. Seperti biasa biar lebih mudah, pembayaran dilakukan melalui Paypal dengan dana sebesar $3,84 atau jika dirupiahkan setara dengan Rp. 50.000,-. Uang sudah ditransfer dan template juga sudah dikirim via email, tapi malah bingung bagaimana cara menggunakannya, Maklum, blogger pemula dan baru pertama pake template premium. Akhirnya tak tanyakan ke mbak Arlina beberapa pertanyaan dan salah satunya adalah cara membuat sitemap blog atau daftar isi.


Dengan sabar, mbak Arlina menjawab setiap pertanyaan dari sekian banyak pertanyaan yang saya tanyakan. Karena sebelum membeli templatenya, saya pernah bilang "nanti kalau ada kesulitan atau apa-apa saya tanya ya mbak? Jawab mbak Arlina "iya boleh" ☺

Postingan cara membuat sitemap blog ini sudah saya buktikan sendiri di blog ini dan 100% berhasil. Jika kalian belum berhasil, mungkin template yang digunakan berbeda dengan yang dipratekkan di sini. Karena template yang saya gunakan namanya "Simplify Responsive Blogger Template" [ versi premium / berbayar]. Tidak ada cara khusus, hanya memasukkan beberapa kode ke dalam halaman statis.

Daftar isi blog atau sitemap berfungsi untuk memudahkan para pembaca blog untuk mencari artikel yang dibutuhkan sesuai dengan label yang kita buat. Misalkan kita buat label "download", secara otomatis postingan kita tentang download akan terkumpul di sana dan para pembaca bisa dengan mudah mengetahuinya.

Cara membuat daftar isi blogger

Perhatikan kode yang ada di area kuning ini, copy dan paste pada halaman statis yang akan kamu buat. Ganti https://designerabalabal.blogspot.com/ dengan alamat url blog kamu. Klik menu Laman - Laman baru pilih mode HTML. Jika masih bingung lihatlah screenshoot di bawah kode ini.
<div id='show-cat'>
</div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='https://designerabalabal.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>
<style scoped="" type="text/css">
#show-cat{float:left;margin:20px 2% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:normal;border:1px solid rgba(0,0,0,0.1)}
#show-cat ul{margin:0;border-top:0 solid rgba(0,0,0,0.1);padding:0}
#show-post ul li{list-style-type:none;margin:0 0 0 -25px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#show-post ul li:hover{margin-right:10px;border-color:#fcd3d3}
#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid rgba(0,0,0,0.1);transition:initial}
#navi-cat a:hover{color:#fff!important}
#show-cat ul li:last-child a{border-bottom:none}
#show-cat ul li a,#navi-cat a{background:#fff;color:#555;font-weight:bold;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:69%;line-height:1.6em}
#show-post a{color:#333;font-size:14px}
#show-post a:hover{color:#f14b4b}
#navi-cat{padding:20px 0}
#navi-cat a{padding:5px 10px;background:rgba(0,0,0,0.7);margin:0 5px 0 0;color:#fff;border-radius:3px;}
#navi-cat a:nth-child(2){background:#f14b4b;margin:0 10px 0 0;color:#fff}
#navi-cat span{float:right;padding:5px 0;font-size:12px;color:rgba(0,0,0,0.5);font-weight:700}
#show-cat::-webkit-scrollbar{width: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{width:100%;margin:20px 0}#show-post{width:100%}}
</style>


Pilih mode HTML



Jika sudah klik publikasikan. Bagaimana mudahkan cara membuatnya? Semoga artikel dengan judul cara membuat sitemap atau daftar isi blog di blogger ini bisa bermanfaat. Semoga langsung bisa diterapkan dan tidak ada masalah.

Artikel Terkait

2 komentar

makasih tutornya gan...

Sama-sama mas, semoga tutorial cara membuat sitemap di blogger ini bermanfaat :D

Assalamu'alaikum Wr. Wb
Mohon maaf yak komentarnya dimoderasi ^_^ bukan bermaksud tidak percaya, atau menganggap spam komentar yang masuk ^_^

Komentar yang masuk akan segera kami publikasikan :D

Tidak usah ragu-ragu setelah meninggalkan komentar, tukang ketik tahu harus bagaimana [siap-siap meluncur ke blog sampeyan ^_^]
EmoticonEmoticon