Cara Otomatis Dalam Membuat Daftar Isi / Sitemap di Blog

Oleh Bardil

19 Juni, 2014

Bagikan :

Tweet

Cara Membuat Daftar Isi / Sitemap di Blog sebenarnya bisa dibuat secara otomatis, tapi banyak juga blogger indonesia yang memilih untuk Membuat Daftar Isi / Sitemap tersebut dengan Manual. Alasannya pun beragam, ada yang bilang 'biar ringan' ya biar ringan, karena memang Sitemap yang dibuat dengan Manual (bukan otomatis) tidak memerlukan JavaScript, sebaliknya untuk Sitemap yang dibuat dengan cara otomatis tentu akan membutuhkan bantuan JavaScript, dan ini dianggap sebagian Blogger akan memberatkan situs tersebut saat dibuka.

Tapi masih banyak juga Blogger indonesia yang tetap memilih untuk membuat sitemap dengan cara otomatis, karena mereka menganggap selain praktis dan cepat, juga tidak sulit dalam membuatnya.

Untuk itulah, disini saya akan menjelaskan kedua cara tersebut, otomatis dan manual. Jadi nantinya Anda bisa memilih mana yang akan Anda gunakan.

• Cara Otomatis Dalam Membuat Daftar Isi / Sitemap di Blog
• Cara Manual Dalam Membuat Daftar Isi / Sitemap di Blog

Mungkin tak perlu berlama-lama langsung saja kita masuk pada cara yang pertama, yaitu membuat daftar isi atau sitemap di blog secara otomatis.

Cara Membuat Daftar Isi / Sitemap di Blog secara Otomatis

Seperti yang saya jelaskan, cara membuat daftar isi secara otomatis, akan membuat loading blog Anda menjadi sedikit lebih berat, karena apa ? dikarenakan, ada JavaScript yang harus dibaca oleh Browser yang digunkan oleh pengunjung, dan dampak yang lebih parah jika Browser yang digunakan oleh pengunjung Anda tidak support JavaScript atau JavaScript di Browsernya sedang dimatikan, tentu Daftar Isi / Sitemap yang Anda buat, tidak akan terlihat.

Tapi jika Anda tetap ingin menggunakan Cara Otomatis ini, saya akan menjelaskan Tahap demi Tahapnya, dan pastikan Anda membacanya dengan teliti.

1. Masuk ke Blogger, dan klik pada menu Laman

2. Pilih Laman Baru

3. Tuliskan Judul terlebih dahulu, untuk Judul bisa Anda isi Daftar Isi atau Sitemap

4. Pindah ke Mode HTML (defaultnya adalah Compose)

5. Copy dan Paste, script dibawah ini

<script type="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('')}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
</span>"}else{var f='<span class="toc-note">Menampilkan '+l+" artikel dengan kategori '";f+=postFilter+"' dari "+postTitle.length+" Total Artikel
</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("
");document.write('Post Link  : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a>
");document.write('Download mp3  : <a href="'+postMp3[a]+'">'+postTitle[a]+"</a>
");document.write("
")}};</script> <script src="http://berguruseo.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

6. Penting ! Ganti alama blog yang saya beri warna merah (berguruseo.blogspot.com) dengan alamat Blog yang akan Anda isi Daftar Isi atau Sitemap

7. Klik Publikasikan

Cek dengan cara mengklik ' Lihat ' apakah sudah muncul ? jika sudah muncul Daftar Isi atau Sitemap seperti gambar diatas, berarti Anda sudah sukses membuat daftar isi di blog.

Mudah bukan, hanya butuh beberapa langkah dan waktu yang sangat singkat.

Nah, kita akan melanjutkan cara membuat daftar isi atau sitemap di blog yang kedua, yaitu dengan cara Manual, yang tentunya akan sedikit lebih merepotkan ketimbang cara yang pertama, dan jauh lebih menguntungkan dari segi performa blog.

Cara Membuat Daftar Isi / Sitemap di Blog secara Manual

Keuntungan membuat daftar isi atau sitemap di blog secara manual adalah fleksibel. Ya, karena tetap akan terlihat walaupun Browser tersebut tidak support javascript (opera mini). Dan selain itu, tentunya tidak akan memberatkan blog kita.

Mungkin langsung saja, berikut adalah cara membuat daftar isi di blog secara manual.

1. Sama seperti langkah diatas, Masuk ke Blogger, lalu pilih Laman

2. Klik Laman Baru

3. Masukkan Judul yang Anda inginkan, misal Sitemap atau Daftar Isi

4. Ubah ke Mode HTML caranya dengan mengklik Tombol HTML (kiri atas)

5. Copy Paste script dibawah ini

<p><a href="/search/label/Alexa Rank">Alexa Rank</a></p><ol><li><a href="http://berguruseo.blogspot.com/2013/06/cara-meningkatkan-alexa-rank-dengan.html">Cara Meningkatkan Alexa Rank Dengan Manipulasi Referer Link</a></li><li><a href="http://berguruseo.blogspot.com/2013/06/cara-unik-meningkatkan-alexa-rank-blog.html">Cara Unik Meningkatkan Alexa Rank Blog</a></li></ol>

6. Seperti biasa ubah alamat blog saya, dan ganti dengan alamat blog Anda, jangan lupa juga ganti Anchor Textnya

Sedikit Penjelasan : Kata yang diapit oleh kode HTML <p> dan </p> adalah untuk menuliskan Judul Label, sementar yang diapit oleh <li> dan </li> digunakan untuk menuliskan Isi dari Label tersebut.

Disini Anda juga bisa lebih leluasa dalam mengedit atau mendesain tampilan Daftar Isi, sebagai contoh jika ingin membuat Judul Daftar isi tersebut berwarna Merah, ya tingga kita tambahkan <span style="color: red;">Judul Label</span>, atau bisa juga kita buat hurufnya jadi lebih besar, ingin menambahkan border atau garis bawah ? bisa juga caranya cukup mudah yaitu dengan dengan menambahkan font-size: 14px; border-bottom: 1px solid blue jadi nanti hasilnya akan seperti gambar dibawah ini.



Tidak terlalu susah bukan dalam membuat sitemap ? namun, jika Anda tetap merasa kesulitan, jangan sungkan-sungkan untuk bertanya di kolom komentar, nanti akan coba saya bantu.

Itu saja dari saya, akhir kata saya ucapkan terimakasih banyak telah sudi meluangkan waktu sejenak untuk membaca Cara Otomatis Dalam Membuat Daftar Isi / Sitemap di Blog dan semoga dapat bermanfaat.

Tag : Belajar menjadi bloger keren