Mempercantik Daftar Isi dengan CSS

Tips-n-trik kali ini dibuat untuk melengkapi artikel sebelumnya yaitu "Membuat Daftar Judul Artikel tanpa Isi" dan "Memanajemen Arsip Blog". Sehingga tampilan daftar isi akan semakin menarik jika kita sudah menerapkan kedua artikel tersebut dan mempercantiknya dengan kode CSS yang akan dibahas dibawah ini. Pemanis ini akan berlaku disemua arsip, jika pengunjung membuka arsip dari kategori atau dari arsip secara keseluruhan. Coba silahkan klik disini untuk melihat hasilnya modifikasi arsip blog.

Percantik Daftar Isi Dengan CSS

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
cari kode dibawah ini:

]]></skin>

Langkah 4
Masukan kode dibawah ini diatas kode pada langkah 3:

.daftar_isi{
padding: 5px 0pt 5px 5px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-bottom: 2px; background: none repeat scroll 0% 0% #eae9e9;
color: #406a0e;
}

Langkah 5
Cari kode dibawah ini:

<data:post.title/>

Secara keseluruhan kode yang dicari seperti dibawah ini (ini kode hasil modifikasi pada artikel "Membuat Daftar Judul Artikel tanpa Isi"):

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Langkah 6
Tambahkan kode dibawah ini:

<div class="daftar_isi"><data:post.title/></div>

Sehinga secara keseluruhan kode menjadi seperti dibawah ini:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div class="daftar_isi"><data:post.title/></div>
</a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Langkah 7
Simpan template dan preview

Keterangan:

• Jika blogger anda belum menerapkan artikel "Membuat Daftar Judul Artikel tanpa Isi" maka hal ini tidak akan berjalan dan atau bahkan membuat tampilan layout blog anda menjadi kacau.
• Silahkan anda atur-atur kode CSS yang ada pada langkah 4

Selamat mencoba dan semoga berhasil... happy Blogging...:)