Cara Membuat Peta Blog atau Daftar Isi Blog

 Blog, Cara, Tutorial

Daftar Isi Blog di Berbagai Blog Populer

Setelah blogwalking di beberapa blog populer, mereka rata-rata menyediakan halaman daftar isi tulisan di blog mereka. Fitur peta blog ini sangat membantu pengunjung untuk mencari tulisan yang mereka inginkan. Muncul pertanyaan, bagaimana cara membuat peta blog atau daftar isi blog seperti itu?



Hanya berbekal pengetahuan akan jquery, javascript, dan DOM serta sedikit nekad dan sok tahu alias berani coba, yuk kita bikin sesuatu yang bisa disebut sitemap page. Cara membuat halaman tersebut tidak susah lho (setelah berhasil aku bilang gak susah, tapi pas belajarnya waktu itu ya lumayan susah ^_^).
Sekedar memberitahu, tips ini saya fokuskan untuk pengguna blogger blogspot ya. Untuk pengguna blog domain wordpress, mohon maaf trik ini tidak bisa dijalankan karena di wordpress user tidak bisa menambahkan script JavaScript. Sedangkan untuk pengguna domain blog lainnya, ini bisa disesuaikan sendiri ya ^.^

Langkah-Langkah Membuat Halaman Peta Blog

1. Cek dan perhatikan sitemap.xml blogmu

Untuk blogger, letak file sitemap.xml secara default berada di path: http://namablog.blogspot.com/sitemap.xml. Contoh: http://ifaniqbal.blogspot.com/sitemap.xml . Nah, alamat ini nantinya perlu kamu tambahkan atau replace di kode JavaScript yang diberikan nanti.

ScreenShot: Buka sitemap.xml blogmu dan copy link address-nya

2. Siapkan dan buat halaman baru

Beri judul semacam peta blog atau daftar isi blog. Setelah memberi judul, siapkan editornya ke modus HTML, bukan Compose. Di modus HTML tersebutlah akan di paste kode/skrip JavaScript untuk membuat halaman peta blog atau daftar isi blogmu.

ScreenShot: Buat halaman baru seperti ini untuk membuat halaman sitemap blog/website

3. Copy and Paste Kode JavaScript

Copy dan paste kode/skrip plugin di bawah ini ke halaman sitemap-mu yang masih kosong dan berada di modus HTML. Hehe, sok ya aku bilang plugin barusan. Padahal cuma skrip JavaScript biasa. Gak apa-apa donk, biar keren dikit hasil kodinganku ^.^

Kode/Skrip Plugin JavaScript untuk Membuat Daftar Isi Blog

<ul id="ifaniqbal-sitemap-plugin"></ul> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(function() { $.ajax({ type : "GET", url : "http://ifaniqbal.blogspot.com/sitemap.xml", dataType : "xml", success : function(xml) { $(xml).find('loc').each(function() { var link = $(this).text(); var title = link.substring(38,link.length-5); for(var i=0; i<7 ; i++){ title = title.replace("-"," "); } if(title.length > 37){ title = title.concat("..."); } var elem = $('<a href="'+link+'"></a>').html(title).css("text-transform","capitalize"); $(' <li></li> ').html(elem).prependTo('#ifaniqbal-sitemap-plugin'); }); } }); }); </script>

ScreenShot: Salin skrip Plugin Sitemap Ifan Iqbal

ScreenShot: Paste skrip plugin di halaman baru dalam modus HTML

4. Replace dengan URl Sitemap Blogmu

Perhatikan garis ke-7 di skrip di atas. Replace url sitemap tersebut dengan url sitemap blogmu. Misalkan url sitemapmu adalah http://blogyangkerenbangetgituloh.blogspot.com/sitemap.xml, maka baris ke-7 tersebut di-replace menjadi:

?

1	url : "http://blogyangkerenbangetgituloh.blogspot.com/sitemap.xml",

ScreenShot: Paste skrip plugin di halaman baru dalam modus HTML

5. Ucapkan "Alhamdulillah" dan Publish Halaman Sitemap-mu

Selesai... ^_^ Silakan mencoba.

dipetik daripada:
 http://www.ifaniqbal.com/2012/07/cara-membuat-peta-daftar-isi-blog.html