Cara membuat kotak daftar isi blog dengan Scrooll

Panduan Blogger untuk blogger pemula.Panduan blogger yang akan membahas dan menjelaskan serta membantu sobat blogger semua dalam “Cara Membuat Daftar Isi Blog Dalam Scroll Box”.Daftar isi blog merupakan bagian penting yang terdapat pada blog.Tujuan dari dibuatnya daftar isi menurut akuadalah selain untuk melengkapi tampilan blog supaya keliatan tampak lebih profesional juga untuk membantu visitor/pengunjug blog dalam mencari apa yang dicari.
Dan dalam hal ini akan memudahkan para pengunjung blog tersebut.Coba aja bayangkan jika sobat misalkan berkunjung ke suatu blog dan blog tersebut tanpa adanya daftar isi,mungkin sobat akan kesulitan dalam mencari suatu artikel yang mungkin sedang sobat butuhkan.Memasang daftar isi di blog memang dianjurkan,namun jika isi suatu blog ( artikel ) sudah mencapai ratusan maka daftar isi tersebut besar kemungkinan akan nampak “melorot” dan membuat blog jadi kurang enak dilihat.Nah…untuk mengatasi masalah tersebut,solusinya adalah “bungkus” daftar isi tersebut menggunakan scroll box.
Dan untuk mengetahui “Cara Membuat Daftar Isi Blog Dalam Scroll Box” langsung saja sobat blogger ikuti langkah-langkah seperti berikut ini :

  1. Login ke blogger
  2. Klik rancangan/tata letak
  3. Add gadget/tambah gadget
  4. Masukkan kode di bawahn ini:

<style>



.list {background:url("http://i1011.photobucket.com/albums/af239/sabarmuanas/sideicon.gif")


no-repeat left center;border-bottom:1px dotted
#ddd;line-height:1.2em;padding:3px 0px 0px 20px;


}


</style>


<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:220px; height:350px; background-color: #fffff; border:0px solid #000000;">




<div class="list">
<a href="http://www.kepribest.com/2012/07/cara-menambah-kolom-di-sidebar-blog.html">Cara Menambah Kolom di Sidebar Blog</a>
</div>

<div class="list">
<a href="http://www.kepribest.com/2012/06/kata-bijak.html">Kata Bijak</a>
</div>

<div class="list">
<a href="http://www.kepribest.com/2012/06/kata-mutiara.html">Kata Mutiara</a>
</div>

<div class="list">
<a href="http://www.kepribest.com/">KepriBest</a></div>

</div>

Maka hasilnya akan seperti dibawah ini:

Contoh:
.list { background: url(“http://i1011.photobucket.com/albums/af239/sabarmuanas/sideicon.gif&#8221;) no-repeat left center;border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px; }

NB:

  • yang berwarna Biru adalah Lebar dan Tinggi
  • yang berwarna Merah adalah Artikel dari URL Posting Blog kamu

Semoga Bermanfaat..

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s