Cara Membuat Daftar Isi/Sitemap Blog/Situs Keren Di Blogger

Cara Membuat Daftar Isi/Site Map Blog/Situs Keren Di Blogger - Sitemap/daftar isi adalah suatu daftar judul postingan/artikel di blog beserta dengan link artikel tersebut. Biasanya artikel yang ada didaftar isi dikelompokkan berdasarkan label yang tertera dalam artikel. Tujuan dari daftar isi/sitemap ini adalah untuk memudahkan pengunjung blog dalam menjelajahi artikel yang ada didalam situs/blog. Karena artikel didalam daftar isi sudah dikelompokkan menurut label-labelnya maka bisa memudahkan pengunjung blog dalam mencari artikel yang diinginkan.

Ada 2 jenis daftar isi yang ada,yaitu daftar isi otomatis dan manual. Daftar isi otomatis adalah daftar isi yang dibuat secara otomatis(otomatis artinya artikel yang abru dibuat dan dipublikasikan akan otomatis masuk ke daftar isi) . Daftar isi manual adalah daftar isi yang dibuat manual,jadi kita harus menambahkan dan memasukkan artikel secara manual. Kebanyakan para blogger malas untuk membuat daftar isi manual termasuk saya,jadi saya lebih suka menggunakan daftar isi yang otomatis apalagi yang sudah bisa mengelompokkan artikel sesuai dengan labelnya. Daftar isi/sitemap yang akan saya bagikan ini memiliki desain yang keren dan menarik,jadi cocok untuk blog yang memiliki gaya flat ui.Langsung saja berikut langkah-langkahnya.

Cara Membuat Daftar Isi Otomatis dan Keren

Langkah 1
Silakan buka dasbor blog sobat,laman lalu buat laman baru,jangan lupa untuk memberikan judul daftar isi/sitemap

Langkah 2
Ganti mode pembuatan laman dari Compose menjadi HTML,lalu salin kode dibawah ini dan pastekan dilaman daftar isi.

Kode HTML
<style type="text/css"> #toc{ width:97%; margin:5px auto; border:1px solid #00a3c1; -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); } .labl{ color:#ff0000; font-weight:bold; margin:0 -5px; padding:1px 0 2px 11px; background:-moz-linear-gradient(right,#C2EAFE 0%,#00a3c1 40%); background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#00a3c1),color-stop(1,#C2EAFE)); border:1px solid #00a3c1; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb; -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block; } .labl a{ color:#fff; } .labl:first-letter{t ext-transform:uppercase; } .new{ color:#ff0000; font-weight:bold; font-style:italic; } .postname{ font-weight:normal; background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%); background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE)); } .postname li{ border-bottom: #ddd 1px dotted; margin-right:5px } </style> <br /> <div id="toc"> <script src="https://cdn.rawgit.com/aramdan/share/master/sitemap.js" type="text/javascript"></script> <script src="http://www.anggasave.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div>

Kode HTML

#NB.
Ganti kode yang berwarna merah dengan url alamat situs/blog sobat

Lalu klik Publikasikan

Itulah tutorial cara membuat sitemap/daftar isi yang menarik dan keren,semoga tutorial ini bermanfaat bag sobat AS.

Incoming search :