Membuat Daftar isi/Menu CSS dengan Icon Blogger

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://roningasinanblog.blogspot.com/" title="tulisan muncul">JUDUL 1</a></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rcdr"><a href="http://roningasinanblog.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(http://3.bp.blogspot.com/-wsIqUGbMUyk/TchLsqCK3QI/AAAAAAAACmU/udeV22bGZ78/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://roningasinanblog.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://roningasinanblog.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.


Related Post:

8 comments:

AcerNoval said...

keren juga nih kayanya, tapi saya sudah punya daftar isi saya sendiri sob hehe :)

ohya, ada postingan baru dari saya, silahkan dibaca2 yaa, di komentar juga bila perlu, thanks sebelumnya :D

CHORD-MUSIK DIGITAL said...

Informasi mantap gan, demi mempererat persahabatan, kami menganugerahkan AWARD PERSAHABATAN kepada blog anda ini, silahkan diambil di : http://chorddigital.blogspot.com/p/chord-award.html

Salam.

Mudho said...

Thanks ya gan,,,

sasuke uchiha said...

Sample nya kakak :(

roni said...

Adik klik aja menu di atas dengan label TUTORIAL BLOG karena kang roni juga menggunakan menu ini.
Atau klik DISINI

Rezky Maulana said...

keren bang jngan lupa mmpir juga ke Rezky Maulana

ibrahim Lubis said...

Terima kasih atas informasinya mas terkait dengan cara membuat daftar isi di blog, artikel ini sangat membantu saya. Salam hangat

Sukrianto Dg Patang said...

mantap bang, sudah saya terapkan di blog saya

sentraledukasi.b l o g s p o t.co.id

Post a Comment