Dapatkan informasi menarik seputar dunia internet marketing, catatan pribadi, dunia teknologi dan infromasi menarik lainnya secara gratis.
Jasa Pembuatan Website

Membuat Widget Sitemap atau Daftar Isi Versi Terbaru untuk Blogger

· · 11 comments

Bisa dikatakan sitemap merupakan daftar isi dari sebuah blog atau website yang digunakan untuk menampilkan apa saja yang terdapat pada blog atau website. Dan tak jarang kita sering menemui sitemap di beberapa website atau blog ternama yang begitu tertata rapi dan begitu bermanfaat bagi para visitor. Begitupun juga kita juga menemui sitemap pada blog yang menggunakan platform blogger atau blogspot. Meskipun sitemap pada blogger tak sehebat sitemap blog berplatform lainnya, namun juga tak jarang beberapa teman blogger yang menggunakan widget sitemap tersebut dan tentunya untuk mempermudah para visitor dalam hal navigasi konten blog.

Dalam kesempatan kali ini IdBlogDesign ingin berbagi dengan Anda para blogger mania dalam membuat widget sitemap untuk blog Anda. Meskipun sudah banyak yang membahas tentang pembuatan sitemap pada blogger, namun sitemap kali ini yang akan kita bahas sedikit berbeda. Selain tetap masih mengandalkan fitur json feed, sitemap ini dilengkapi dengan css dan jquery sehingga akan terlihat berbeda dan lebih menarik tentunya.

Membuat Widget Sitemap atau Daftar Isi Versi Terbaru untuk Blogger

Jika Anda penasaran dan tertarik untuk membuat sitemap atau daftar isi blogger tersebut, bisa langsung mengikuti langkah-langkah berikut ini:

  1. Masuk ke akun blogger Anda dan pilih Template - Edit HTML - Lanjutkan.
  2. Masukan kode css dibawah ini pada template blog Anda, dengan cara copy paste kode css tersebut sebelum kode ]]></b:skin>
    .sitemapnav{width:100%;padding:0;margin:0;font:normal 12px arial}
    ul.sitemapnav{padding:0;margin:0;line-height:0.5em;list-style:none}
    ul.sitemapnav li{list-style:none;}
    ul.sitemapnav li a{line-height:10px;padding:8px 5px;color:#000;display:block;text-decoration:none;font-weight:bold}
    ul.sitemapnav li a:hover{background-color:#666;color:white}ul.sitemapnav ul{margin:0;padding:0;display:none}
    ul.sitemapnav ul li{margin:0 0 0 34px;padding:0;clear:both;list-style-type:decimal;}
    ul.sitemapnav ul li a{font-weight:normal;outline:0}
    ul.sitemapnav ul li a:hover{background-color:#999;color:#fff}
    ul.sitemapnav ul ul li a{color:silver;padding-left:40px}
    ul.sitemapnav ul ul li a:hover{background-color:#999;color:#fff}
    ul.sitemapnav span{float:right}
    
  3. Simpan template Anda.
  4. Langkah selanjutnya adalah membuat halaman static dengan cara masuk ke menu Laman dan pilih Laman baru - Laman kosong.
  5. Beri judul halaman Anda(ex: Sitemap, Daftar isi) dan setelah itu masukan kode script berikut ini di dalam halaman tersebut:
    <script src='http://ibd.googlecode.com/files/jquery-1.5.2.min.js' type='text/javascript'></script><script src="http://ibd.googlecode.com/files/sitemap.js" type="text/javascript"></script><script src="http://idblogdesign.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
    
  6. Ganti warna merah dengan url blog Anda kemudian simpan dan terbitkan halaman Anda.
Widget sitemap blogger tersebut sudah dilakukan uji coba menggunakan browser firefox versi terbaru, internet explorer 8, opera mini dan bekerja dengan baik, namun untuk jenis browser yang lainnya belum dilakukan uji coba. Selamat mencoba dan semoga berhasil dalam membuat widget sitemap versi terbaru untuk blogger kesayangan Anda.

11 comments:

  1. Wow mangtap gan budi
    tks ilmunya ya...

    ReplyDelete
  2. Gan, saya ingin membeli Template Premium anda, saya sudah mengirim email ke [email protected] mohon segera di tanggapi.

    ReplyDelete
  3. mantab gan suwon ilmune

    ReplyDelete
  4. Makasih banyak ilmunya.
    Saya udah berhasil nerapin di blog :)

    ReplyDelete
  5. Langsung saya terapin ke blog saya :D
    Makasih ilmunya

    ReplyDelete
  6. makasih banget gan sangat membantu anee

    ReplyDelete
  7. terimakasih Gan ilmunya

    ReplyDelete
  8. mantap kang mas widgetnya

    ReplyDelete
  9. Sudah saya pasang..sekalian minta izin pakai.
    Praktis..minimalis

    ReplyDelete
  10. (Ganti warna merah dengan url blog Anda kemudian simpan dan terbitkan halaman Anda)
    saya lihat kok tidak ada tulisan yang di warnai merah, apa maksudnya URL Anda yaa ?
    Terima kasih sudah berbagi infonya.

    ReplyDelete