Cara Membuat Daftar Isi/Sitemap di Blog - Jangan hanya sekadar membuat goresan pena 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.
1. Login ke akun Blogger Anda
2. Pada halaman awal Blogspot, di menu bab kanan pilih Pages.
3. Selanjutnya klik New Pages.
Pada halaman gres tadi, silakan buat Title sesuka Anda, misalnya "Sitemap". Lalu silakan Anda copy dan paste isyarat berikut:
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 di Blog
Makara 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 bab kanan pilih Pages.
3. Selanjutnya klik New Pages.
Pada halaman gres tadi, silakan buat Title sesuka Anda, misalnya "Sitemap". Lalu silakan Anda copy dan paste isyarat 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&alt=json-in-script&callback=bloggersitemap"></script>
Silakan ganti goresan pena http://bloganda.blogspot.com dengan alamat blog Anda. Lalu paste ke Page gres yang Anda buat tadi.
Untuk alternatif lainnya, Anda mampu copy dan paste isyarat 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&alt=json-in-script&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 mampu eksklusif 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 mampu tampil), silahkan coba dengan memakai isyarat script di bawah ini :
<script style="text/javascript">Silahkan ganti goresan pena yang berwarna merah dengan alamat URL blog anda.
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=" " 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="Cara Membuat Daftar Isi Otomatis Keren dan Responsive di Blog">'+e+"</a>";h+="</td>";h+='<td class="toc-header-col2">';h+='<a href="javascript:toggleDateSort();" title="Cara Membuat Daftar Isi Otomatis Keren dan Responsive di Blog">'+d+"</a>";h+="</td>";h+='<td class="toc-header-col3">';h+='<a href="javascript:allPosts();" title="Cara Membuat Daftar Isi Otomatis Keren dan Responsive di Blog">'+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&alt=json-in-script&callback=loadtoc"></script>
Demikian panduan bagaimana membuat daftar isi/sitemap di blog yang responsive dan otomatis. Silahkan terapkan pada blog Anda dan agar bermanfaat. Sumber http://www.panduaneka.com/