Membuat Daftar Isi Mantap untuk Blog

Oleh Unknown

Saturday, May 2, 2015

Membuat Daftar Isi Mantap untuk Blog - Daftar isi adalah salah satu unsur yang wajib ada di setiap publisitas karya tulis, apapun bentuk karya tulisnya. Termasuk di antaranya adalah media blog. Apalagi untuk sebuah blog yang sudah terbangun dengan baik, artikel yang banyak, dan memiliki banyak pengunjung. Maka sangat perlu membuat daftar isi blog yang sedap dipandang.

Dengan adanya daftar isi, pengunjung akan dimudahkan dan lebih terarah untuk mencari informasi sesuai yang diinginkan. Ratusan atau bahkan ribuan artikel blog kamu akan tersusun dengan teratur.
Nah, kalau pengunjung sudah dimudahkan mengakses artikel yang diinginkan dengan daftar isi, maka otomatis lalu lintas trafik blog akan naik. Selain membuat daftar isi yang menarik, kamu mungkin tertarik untuk menjaring para pengunjung dengan facebook like plugin keren.

Cara Mudah Membuat Daftar Isi untuk Blog

Cara kerja daftar isi ini adalah dengan mengelompokkan artikel sesuai label. Jadi, pastikan setiap artikel yang kamu publish sudah dicantumkan label yang sesuai. Daftar isi yang sinahu coding bagikan ini juga responsive, bisa beradaptasi dengan tampilan menarik di semua jenis device.

Oke, langsung saja ikuti langkah berikut untuk memasang daftar isi di blog :

1. Login ke Blogger
2. Pilih Opsi Laman

3. Buat Laman Baru

4. Pilih mode pengeditan HTML, kemudian Copy Paste kode berikut ini

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-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:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop

(1,#C2EAFE));
border:1px solid #2D96DF;
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:#FF5F00;
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>
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" 

type="text/javascript"></script>
<script src="http://sinahu-coding.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-

in-script&amp;callback=loadtoc">
</script></div>

Keterangan :

Ganti kode warna merah dengan alamat url blog kamu

5. Beri judul laman yang kamu suka, misal Daftar Isi. Kemudian Publikasikan. 

Seperti itu ya. Selanjutnya bisa dilihat hasilnya. Semoga bermanfaat dan sampai ketemu lagi di episode sinahu coding berikutnya. 

---