Membuat Daftar isi/Menu CSS dengan Icon Blogger

Membuat blog tampil simple dan cantik pada tampilan menu/daftar isi sangatlah penting karena untuk mempermudah penelusuran/pencarian page blog oleh visitor, dengan banyaknya seorang blogger pasti beda pula selera tampilan yang di inginkan untuk halaman blognya dan dalam tutorial kali ini kang roni akan berbagi tutor bagaimana cara membuat daftar isi cantik dengan menambahkan icon blogger disetiap baris pada halaman daftar isi, tehnik membuat daftar isi ini akan menggunakan kode css jadi sangat bagus untuk blog dengan daftar isi yang besar karena CSS sangat bagus untuk menghindari loading page yang terlalu lama.

Langkah Membuat Daftar isi dengan Icon Blogger
Copy kode dibawah ini dan taruh pada laman mandiri/static page atau bisa juga di taruh pada halaman Tambah Gadget untuk HTML/JavaScript.

<div style="font-family: arial, sans-serif; font-size: 9px;" id="rcdr"><a href="http://vikitctc.blogspot.com/" title="tulisan muncul">JUDUL 1</a></div>

<div style="font-family: arial, sans-serif; font-size: 9px;" id="rcdr"><a href="http://vikitctc.blogspot.com/" title="tulisan muncul">JUDUL 2</a></div>

<style type=text/css>

.rcw-comments a {text-transform: capitalize;}

.rcw-comments {border-bottom: 1px #cccccc dotted; padding-top: 7px!important; padding-bottom: 7px!important;}

#rcdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfLrJMQA8S8wTYv6DfWShSb_jgg6EE3U7dP_CXCD_RaF7h2DCqV1OYOGV3rlb8NyfRuvJjnzcP3f92B3m4h_1PAYgfO1s9LC7IxO4fKXJx5jH2_8w6mFrFdxNIZRpbJqdrWohWZdDuiRMS/s400/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}

#rcdr, #rcdr a {color:#DD0B0B;}

</style>

Ket:Untuk menambahkan daftar isi lagi sobat tinggal menambahkan kode yang sama seperti dibawah ini

<div style="font-family: arial, sans-serif; font-size: 9px;" id="rcdr"><a href="http://vikitctc.blogspot.com/" title="tulisan muncul">JUDUL 1</a></div>

Atau sobat bisa menggunakan kode yang satu lagi untuk target blank seperti dibawah ini

<div style="font-family: arial, sans-serif; font-size: 9px;" id="rcdr"><a href=http://vikitctc.blogspot.com/ target=_blank title=tulisan muncul>judul menu</a></div>

Masih seputar keterangan di atas sobat perhatikan tulisan yang diberi warna merah ganti dengan link/URL halaman yang di tuju dan tulisan dengan warna biru untuk judul/nama, dan kode {color:#DD0B0B;} yang ada di atas adalah kode untuk mengganti warna tulisan, sedangkan kode dengan warna hijau untuk mengganti icon blogger.

Satu lagi untuk mempercantik tampilan sobat bisa mengganti kalimat tulisan muncul di atas dengan kalimat sendiri supaya Daftar isi/Menu CSS dengan Icon Blogger tampil maksimal.

Semoga Bermanfaat teman

Semoga artikel Membuat Daftar isi/Menu CSS dengan Icon Blogger bermanfaat bagi Anda.