Biasanya saat tertarik pada suatu blog, Visitor ingin mengeksplorasi apa saja isi blog tersebut. Untuk maksud tersebut yang pertama dicari adalah daftar semua artikel. Begitu pentingnya daftar artikel karena akan memudahkan Visitor menelusuri artikel yang paling menarik hatinya.
Daftar isi situs sangatlah penting peranannya untuk memudah pengunjung menemukan konten yang diprioritaskan untuk dibuka lebih dahulu. Kemudahan ini menjanjikan visitors akan datang lagi ke Blog tersebut. untuk memanjakan tamu pengunjung, blog seharusnya dilengkapi dengan Daftar Artikel dan Daftar Kategori.
Tetapi sayangnya www.blogger.com tak menyediakan fasilitas pembuatan Daftar Artkel, dan hanya menyediakan cara pembuatan Daftar Kategori dengan menggunakan Widget Label.
Untuk membuat Daftar Artikel terpaksa harus menggunakan resource dari pihak ketiga. Tetapi untuk membuat Daftar Artikel ini Anda harus terlebih dahulu membuat Daftar Kategori (Daftar Label). Sedangkan bagaimana cara membuat Daftar Artikel akan dibahas pada akhir artikel ini.
Bagaimana Membuat Daftar Kategori Artikel ?
Jika blog Anda baru dan belum ada Daftar Kategori Artikel, maka sebaiknya dibuat sekarang. Tetapi untuk membuatnya setiap artikel atau entry yang Anda posting harus diberi LABEL dahulu. Silahkan memeriksanya, Buka Rancangan | POSTING | EDIT ENTRY, maka nampak seluruh entry Blog Anda dengan nama label di belakang judul artikel.
JIka label belum ada, maka tidak ada tulisan nama label. Bukalah entry tersebut dengan memberi Centang (“check”) kotak yang tersedia (paling kiri), lalu klik EDIT. Arahkan kursor ke kolom LABEL di bagian bawah, isikan nama kategori Artikel tersebut. Kemudian klik TERBITKAN ENTRY. Ulangi langkah-langkah tersebut pada entry-entry yang belum dicantumkan nama Label hingga semua entry telah memiliki nama kategorinya.
Kemudian membuat Daftar label dengan menambahkan widget Label. Untuk membuatnya silahkan membuka Menu Rancangan | Add Gadget dan pada kotak pilihan widget pilih LABEL. Tentukan konfigurasi Label yang tersedia. Lalu klik SAVE WIDGET, maka widget LABEL (secara default ada di kotak paling atas). Silahkan pindahkan dengan menggeserkan ke posisi yang dikehendaki pada Layout. Terakhir pada halaman Rancangan klik SAVE dan untuk melihat hasilnya klik LIHAT BLOG.
Ada cara lain dalam membuat Daftar Label lebih elegan dan menjadikan “Beautiful Web” karena menawarkan desain dengan banyak pilihan style dan kaya warna, yaitu memanfaatkan software yang bisa di-download gratis – CSS Tab Designer 2.0.1. Silahkan membuka Google Search dengan kata kunci CSS Tab Designer 2 untuk memburu software gratis tersebut.
Untuk Lebih jelasnya Anda bisa dilihat pada artikel “Making Tab View on Page of Your Blog By CSS Tab Designer 2.01 (Part 1) dan (Part 2) pada kategori FORUM BLOGGER di blog ini juga.
Membuat Daftar Entry Atau Daftar Artikel
Daftar isi ini hanya akan menampilkan judul dan label postingan kita saja dan tersusun secara berurutan abjad namun sangat bermanfaat bagi suatu situs yang mempunyai entry atau posting yang banyak.
Bagaimana Caranya :
1 Pertama masuklah ke account Blogger Anda lalu pada halaman
DASHBOARD klik RANCANGAN | POSTING | NEW POST.
2 Isikan Title dengan judul yang diinginkan : "Daftar Isi" atau semacamnya.
3 Kemudian copy-paste kode di bawah ini:
4. <script type='text/javascript'>
5. //<![CDATA[6. 7. 8. //]]>9. </script><script src="http://www.BLOGKAMU.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script> Lalu KLIK file ini untuk men_download file dari URL :
http://www.ziddu.com/download/9932751/contents.rar.html
- Hasil Download adalah file contens.rar Buka contents.rar (size 1.8 kb atau 2 kb) kemudian klik kanan pada file contents.js dan di-Extract to specified folder (saya simpan di My Document or terserah Anda dimana menyimpan) lalu klik OK.
- Kemudian buka file yang baru saja disimpan di My Document. Hasilnya file contents.JS (size 6.06 kb. Lalu diatasnya di-klik kanan
- pilih EDIT WITH NOTEPAD | SELECT ALL | COPY dan di-PASTE diantara kode //<![CDATA[ dan kode //]]> seperti tercantum di atas.
BLOGKAMU dengan URL blog Anda, (contoh ketik yusufzulkarnain) Untuk mencegah daftar isi ini berada di halaman paling depan pada page blog Anda, klik "Post Option" di bagian bawah sebelah kiri, kemudian ganti tanggalnya jadi sebulan yang lalu, atau setahun yang lalu, Kemudian di SAVE dan silahkan LIHAT BLOG untuk melihat hasilnya.
NB : Lampiran
File contents.js pada My Document saya ketika dibuka dengan NOTEPAD hasilnya terlihat berupa kode HTML seperti ini :
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.thehack3r.com/2009/11/cara-memasang-widget-daftar-isi-pada.html" style="font-size: 8px; text-decoration:none; color: #80FF00;">Widget by TheHack3r.com. Baca DISINI untuk memasang widget ini di blog anda...</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://i49.tinypic.com/29o3dr7.jpg"/>'}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>")}};
Selesai
< Wallaahu a’lam bi sawab >
