Cara Membuat Sitemap/Daftar isi di Blog
Sitemap atau kata lainnya daftar isi sangatlah penting untuk
sebuah blog. Karena dengan adanya daftar isi, pengunjung akan lebih
mudah untuk mencari artikel yang di butuhkan untuk di baca.
Maka dari itu, di sini akan share tutorial membuat Sitemap/daftar isi dengan tampilan manis dan lebih profesional karena tampilan ini akan slider, klik label akan keluar hasil pencarian daftar isi setiap label. Contoh seperti pada gambar bawah ini :
Oke kita mulai, Cara membuat Sitemap slider di blog
1. Pertama, login terlebih dahulu
2. Selanjutnya, di dasbor masuk ke Laman,
3. Pilih laman baru, pilih yang laman kosong
4. Tulis judul, "Sitemap" Atau "Daftar Isi"
5. Masukkan kode di bawah ini pada isian posting, jangan lupa rubah mode di edit html
NB : Rubahlah blog yang saya warnai dengan merah, untuk angka 200 anda bisa merubah dengan pilihan anda, itu adalah posting yang akan muncul.
6. Jika sudah semua, silahkan untuk di terbitkan dan lihat hasilnya.
kutipan dari : http://www.wartabeta.com
Maka dari itu, di sini akan share tutorial membuat Sitemap/daftar isi dengan tampilan manis dan lebih profesional karena tampilan ini akan slider, klik label akan keluar hasil pencarian daftar isi setiap label. Contoh seperti pada gambar bawah ini :
Oke kita mulai, Cara membuat Sitemap slider di blog
1. Pertama, login terlebih dahulu
2. Selanjutnya, di dasbor masuk ke Laman,
3. Pilih laman baru, pilih yang laman kosong
4. Tulis judul, "Sitemap" Atau "Daftar Isi"
5. Masukkan kode di bawah ini pada isian posting, jangan lupa rubah mode di edit html
<link href="http://sites.google.com/site/congcot/kode-1/CCcss1.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://facewoman.googlecode.com/files/Daftar-isi-andikwin-facewoman.js">
</script>
<script src="http://perdana-pulsa.blogspot.com/feeds/posts/summary?max-results=200&alt=json-in-script&callback=loadtoc">
</script>
<script type="text/javascript">
$(function() {
$("#daftar-isi .judul-list").hide();
$("#daftar-isi .judul-label:first").addClass('headactive').next().slideDown();
$("#daftar-isi .judul-label").css("cursor", "pointer");
$("#daftar-isi .judul-label").click(function() {
if($(this).next().is(':hidden')) {
$("#daftar-isi .judul-label").removeClass('headactive').next().slideUp();
$(this).toggleClass('headactive').next().slideDown();
}
});
}); </script>
NB : Rubahlah blog yang saya warnai dengan merah, untuk angka 200 anda bisa merubah dengan pilihan anda, itu adalah posting yang akan muncul.
6. Jika sudah semua, silahkan untuk di terbitkan dan lihat hasilnya.
kutipan dari : http://www.wartabeta.com