Membuat Daftar Isi Dengan Navigasi di blog, daftar isi atau biasa dikenal oleh para blogger dengan sebutan Sitemaps merupakan semua isi halaman url artikel blog dan untuk mempermudah pengunjung mengetahui lebih jauh isi dari blog tersebut secara keseluruhan. Sedangkan fungsi Sitempa sendiri terhadap SEO untuk menginformasikan url-url yang berada di blog agar lebih mudah di crawl dan dijelajahi oleh mesin pencari (Search Engine) sehingga bisa lebih cepat terindeks.
Diartikel hari ini saya akan mencoba membagikan widget daftar isi dengan navigasi kepada Anda yang menurut saya jauh berbeda dengan daftar isi yang ada pada blog lainnya.
Screenshot
1. Login pada blog
2. Pilih Page/Laman kosong
3. Masukan code berikut, pada halaman HTML bukan pada Compose
<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_facebook-theme.css" type="text/css" />
<script type="text/javascript">
var showPostDate = true,
showComments = true,
idMode = true,
sortByLabel = false,
labelSorter = "JQuery",
loadingText = "Loading...",
totalPostLabel = "Jumlah posting:",
jumpPageLabel = "Halaman",
commentsLabel = "Komentar",
rmoreText = "Selengkapnya ►",
prevText = "Sebelumnya",
nextText = "Berikutnya",
siteUrl = "http://www.fianetmu.com",
postsperpage = 4,
numchars = 370,
imgBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIrHkxOmbZ6yjQLEHEnN1NUOJoE_94S9XaEPw_5agYhARmTVGh0hf5YUMJlVfwYEgre9g9SKGqfMnAkD3qvoTGJb8dj8xQl4d46z3KwqyZKz5y1wzQyUpIMqghWyqznO9pOXq8YO5N55E/s1600/no+image.jpg";
</script>
<script type="text/javascript" src="http://fianetmu-com.googlecode.com/files/blog%20daftar%20isi.js"></script>
<script type="text/javascript">
var showPostDate = true,
showComments = true,
idMode = true,
sortByLabel = false,
labelSorter = "JQuery",
loadingText = "Loading...",
totalPostLabel = "Jumlah posting:",
jumpPageLabel = "Halaman",
commentsLabel = "Komentar",
rmoreText = "Selengkapnya ►",
prevText = "Sebelumnya",
nextText = "Berikutnya",
siteUrl = "http://www.fianetmu.com",
postsperpage = 4,
numchars = 370,
imgBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIrHkxOmbZ6yjQLEHEnN1NUOJoE_94S9XaEPw_5agYhARmTVGh0hf5YUMJlVfwYEgre9g9SKGqfMnAkD3qvoTGJb8dj8xQl4d46z3KwqyZKz5y1wzQyUpIMqghWyqznO9pOXq8YO5N55E/s1600/no+image.jpg";
</script>
<script type="text/javascript" src="http://fianetmu-com.googlecode.com/files/blog%20daftar%20isi.js"></script>
Keterangan :
- Kode CSS Warna merah adalah tampilan Widget, silahkan ganti dengan code berikut ini sesuai Thema daftar isi yang Anda inginkan :
Brown Theme - Demo
http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-brown.css
Black Theme - Demo
http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_elegant-black-theme.css
Diary Book Theme - Demo
http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_CSS3-diary-book-theme.css
White Theme - Demo
http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-white-theme.css
Yellow Green Theme - Demo
http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_yellow-green-theme.css
Dark Red Thema - Demo
http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_dark-red-theme.css
Construction Thema - Demo
http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_construction-theme.css
Default Thema - Demo
http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_default-theme.css
- Selanjut untuk kode yang berwarna Pink jumlah tampilan pada postsperpage
- Dan kode url yang berwarna biru silahkan ganti dengan url blog Anda
4. Save
Daftar isi serta Thema ini dibuat oleh master Blog Taufik Nurrohman pada salah satu situsnya (www.dte.web.id), jadi untuk lebih jelas silahkan menuju ke website beliau.
—
Blogspot
