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. Untuk demonya bisa Anda lihat pada menu navigasi sitemap blog IdBlogDesign atau pada link berikut ini.
Jika Anda penasaran dan tertarik untuk membuat sitemap blogger tersebut, bisa langsung mengikuti langkah-langkah berikut ini:
- Masuk ke akun blogger Anda dan pilih Template - Edit HTML - Lanjutkan.
- 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}
- Cari kode </head> dan letakkan kode script dibawah ini tepat diatasnya
<script src='http://ibd.googlecode.com/files/jquery-1.5.2.min.js' type='text/javascript'></script>
- Simpan template Anda.
- Langkah selanjutnya adalah membuat halaman static dengan cara masuk ke menu Laman dan pilih Laman baru - Laman kosong.
- Beri judul halaman Anda(ex:Sitemap) dan setelah itu masukan kode script berikut ini di dalam halaman tersebut:
<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>
- Ganti warna merah dengan url blog Anda kemudian simpan dan terbitkan halaman Anda.
Ruarrr biasa keren gan! Gan boleh tau donk gimana cara pasang read more kayak di homepage blog ini tanpa harus konflik sama halaman statis....thx b4.
BalasHapushehe..maksudnya gimana ya masta? kalau dihomepage blog yang ini menggunakan jason feed masta, tapi kalau dibagian kategori menggunakan metode post snippet. Tutorialnya udah ada di blog ini masta, coba dicari dulu. :)
Hapus