Membuat Daftar Isi Blog Per Label (Box)

sumber gambar : www.mjmonaghan.com

   Seperti halnya membuat daftar isi blog berdasarkan label yang ada pada post saya sebelumnya, daftar isi kali ini juga kurang lebih sama, tapi perbedannya adalah pada penampilannya. Tampilan yang akan kita buat kali ini bukanlah list  per baris seperti sebelumnya, tetapi berupa box yang memiliki efek CSS tertentu. Efek CSS (Cascading Style Sheet) ini misalnya warna, font, efek perubahan warna ketika pointer mouse berada di atasnya, serta efek - efek lainnya.

   
   Cara yang digunakan untuk membuat daftar isi ini hanya tinggal mengcopy kode dan memasukkannya ke post saja tanpa perlu mengubah HTML template blog atau menambahkan widget. Cara ini juga sama seperi yang sebelumnya, bisa digunakan baik pada Laman maupun Post. Namun, kebanyakan daftar isi blog ini dibuat di Laman, karena jika dibuat di post tidak akan muncul pada tab menu horizontal atas blogger. Sebaliknya, jika Anda membuatnya di Laman, secara otomatis akan ditambahkan di menu tab atas blog (pada template yang tidak mendukung maka tidak akan otomatis ditambahkan).

   Post yang akan ditampilkan disini dibagi berdasarkan label, jadi sama seperti daftar isi yang sebelumnya, jika post Anda belum diberi label, kemungkinan tidak akan ditampilkan. Untuk screenshotnya, saya perlihatkan seperti gambar di bawah ini.

Warna yang ditunjukkan tersebut merupakan warna yang ada pada kode di bawah ini, tetapi Anda bisa mengubahnya sendiri. Warna pada Post 2 adalah warna ketika pointer mouse berada di atasnya.

Untuk membuatnya,

1. Login ke Blogger lalu masuk Laman atau Post. Tapi saya sarankan Anda masuk Laman karena daftar isi tidak berkaitan dengan artikel yang Anda buat.

2. Setelah masuk, buatlah Post Baru. Baik di Laman maupun Post, lakukan hal seperti ini.

3. Pilih mode HTML, bukan Compose.

4. Masukkan kode di bawah ini pada kotak post di bawahnya.

<script src="https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js" type="text/javascript"></script>

<script src="http://urlbloganda.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

<style type="text/css">

.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }

.post-archive h4 { border-bottom: 2px solid #ff0000; color: #00ff00; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}

.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #0000ff; color: #000000; display: block; border: 1px solid #fffff1; font-size: 14px; line-height: normal; outline: 1px solid #0087da; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }

.ct-columns-3 p a:hover { background: #555555; color: #ffffff; }

@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }

</style>

Untuk mengubah warna, ganti kode warna berikut dengan kode warna yang Anda inginkan. Untuk mengecek kode warna, silakan buka link Colorhexa ini.
#ff0000 : untuk mengubah warna garis merah di bawah label
#00ff00 : untuk mengubah warna font hijau Label
#0000ff : untuk mengubah warna biru background box ketika pointer tidak berada di atsanya (hover)
#000000 : untuk mengubah warna font hitam
#fffff1 : untuk mengubah warna border box, di screenshot di atas tidak terlihat karena warnanya putih
#0087da : untuk mengubah warna garis di atas dan di bawah box

#555555 : untuk mengubah warna abu - abu ketika hover
#ffffff : untuk mengubah warna font saat hover

5. Klik Publikasikan.

Selamat mencoba.... semoga berhasil... :-)