PANDUANEKA

Aneka Panduan & Solusi Anda

13 August 2017

Cara Membuat Daftar Isi Otomatis Keren dan Responsive di Blog

Cara Membuat Daftar Isi/Sitemap di Blog - Jangan hanya sekadar membuat tulisan di blog, membuat daftar isi blog atau disebut juga sitemap blog penting sekali untuk sebuah navigasi, seorang pengunjung akan segera dapat mengakses isi posting atau konten blog Anda dengan mudah.

Seperti halnya buku, daftar isi pada blog akan memudahkan pengunjung blog untuk menjelajahi konten yang ada selain itu fungsi daftar isi blog juga menambah tampilan blog lebih elegan dan terlihat profesional.

Di samping itu sitemap atau daftar isi juga bermanfaat untuk mengoptimalkan mesin pencarian (SEO). Tak lupa, daftar isi pada blog akan membantu membuat link internal antar-postingan untuk menaikkan page rank postingan Anda.
Cara Membuat Daftar Isi Otomatis Keren dan Responsive di Blog

Cara Membuat Daftar Isi Otomatis di Blog

Jadi kalau blog Anda belum ada daftar isinya segera buat untuk melengkapi navigasi blog Anda. Berikut saya sajikan panduan bagaimana cara membuat daftar isi di blog secara otomatis sesuai label dan tanggal postingan, berikut langkah-langkahnya :
1. Login ke akun Blogger Anda
2. Pada halaman awal Blogspot, di menu bagian kanan pilih Pages.
3. Selanjutnya klik New Pages.
Pada halaman baru tadi, silakan buat Title sesuka Anda, misalnya "Sitemap". Lalu silakan Anda copy dan paste kode berikut:
<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script src="http://yourjavascript.com/7366511402/simplesitemap.js" type="text/javascript"></script>
<script src="http://bloganda.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

Silakan ganti tulisan http://bloganda.blogspot.com dengan alamat blog Anda. Lalu paste ke Page baru yang Anda buat tadi.

Cara Membuat Daftar Isi Otomatis Keren dan Responsive di Blog

Untuk alternatif lainnya, Anda bisa copy dan paste kode berikut:
<style>
p.labels a {
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    display: block;
    padding: 8px;
    background: #555;
}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
.sitemap-link{display:none}
</style>
<script type="text/javascript" src="http://yourjavascript.com/7366511402/simplesitemap.js"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

Selanjutnya Anda harus menghubungkan Page yang dibuat tadi ke menu Navigasi di blog Anda, berikut caranya :
1. Silahkan masuk menu Layout/Tata Letak
2. Cari Widget Pages/Laman/Menu/Navigasi (tergantung template)
3. Lalu centang judul laman yang Anda buat tadi.
4. Kemudian Save Template.

Anda juga bisa langsung edit di HTML, caranya :
1. Masuk ke menu Theme/Template
2. Klik Edit HTML
3. Cari link Menu di halaman HTML Anda
4. Silahkan ganti dengan URL Page yang Anda buat tadi
5. Klik Save Settings

Update :
Pada sebagian template penggunaan cara di atas kemungkinan tidak dapat bekerja (sitemap tidak bisa tampil), silahkan coba dengan memakai kode script di bawah ini :
<script style="text/javascript">
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postMp3[ii]=o;if(h<10){postBaru[ii]=true}else{postBaru[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><a href="http://www.mengelolablog.com/2017/02/cara-pasang-sitemap-dihalaman-statis.html" style="font-size: 10px; text-decoration:none; color: #616469;">Sitemap</a>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postMp3[e];postMp3[e]=postMp3[g];postMp3[g]=f;var f=postBaru[e];postBaru[e]=postBaru[g];postBaru[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postMp3[f];postMp3[f]=postMp3[h];postMp3[h]=g;var g=postBaru[f];postBaru[f]=postBaru[h];postBaru[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Judul Artikel";var m="Klik untuk sortir berdasarkan judul";var d="Tanggal";var k="Klik untuk Sortir bedasarkan tanggal";var c="Kategori";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Klik untuk menampilkan semua"}h+="<table>";h+="<tr>";h+='<td class="toc-header-col1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="toc-header-col2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="toc-header-col3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="toc-header-col4">';h+="Download MP3";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Menampilkan Semua '+postTitle.length+" Artikel<br/></span>"}else{var f='<span class="toc-note">Menampilkan '+l+" artikel dengan kategori '";f+=postFilter+"' dari "+postTitle.length+" Total Artikel<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postBaru[a]==true){document.write(' - <strong><em><span style="color: rgb(255, 0, 0);">New !!</span> </em></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Menampilkan Daftar Isi</a> <img src="http://radiorodja.googlepages.com/new_1.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link    : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Download mp3  : <a href="'+postMp3[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
</script>
<script src="http://www.panduaneka.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
Silahkan ganti tulisan yang berwarna merah dengan alamat URL blog anda.

Demikian panduan bagaimana membuat daftar isi/sitemap di blog yang responsive dan otomatis. Silahkan terapkan pada blog Anda dan semoga bermanfaat.

2 comments:

  1. sangat disayangkan... tidak work di blog ane..
    terpaksa aku cari cara di blog lain...

    ReplyDelete
  2. Tidak bisanya kenapa ya? Cara ini sudah saya terapkan di blog ini dan hasilnya bisa dilihat di sitemap menu blog ini

    ReplyDelete

- Silahkan berkomentar sesuai topik.
- Mohon centang pada Notive me agar tahu balasan dari kami.
- Sebelum bertanya, silahkan Anda cari terlebih dahulu di kotak pencarian (Search)
- Untuk setiap komentar saya akan lakukan kunjungan balik ke situs Anda dengan atau tanpa komentar
Terima kasih atas kunjungan dan komentarnya