masukan email anda:

artikel baru langsung masuk ke email anda, GRATIS!

membuat Kolom Daftar Isi

Labels:

daftar isi | tipsyournet
Arsip merupakan hal yang utama bagi pengunjung blog, apalagi kalau blog kita berisi full posting yang tipsyournet terjemahkan sendiri menurut nenek moyang, yaitu blog yang isinya posting2 alias banyak posting.. nah untuk menjaga loyalitas konsumen, dengan kata yang sebenarnya adalah kesetiaan pengunjung, maka tipsyournet melaunching, jiaahh...  ::bahasanya terlalu keren:: padahal tipsyournet sendiri gak tahu apa itu launching heheehe :) tipsyournet memunculkan judul yaitu membuat kolom daftar isi, yang fungsinya untuk kearsipan, gak usah panjagn lebar lagi, ayo kita langsung merapat ke TKP.
Share

Bookmark and Share





Silahkan diikuti bagi yang ingin mencobanya.

1. Login ke blogger. Buka menu Layout -> Page Elements
2. Klik Add a Gadget -> HTML/Javascript. Masukkan kode dibawah ini kedalam kotak

<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">

<div class="list">
1. <a href="http://tipsyournet.blogspot.com/2008/10/apa-itu-blog_15.html">Apa itu blog</a></div>

<div class="list">
2. <a href="http://tipsyournet.blogspot.com/2008/10/cara-membuat-blog-di-blogger_16.html">Panduan membuat blog di blogger</a></div>

</div>

Keterangan:
380px merupakan lebar kotak, 180px merupakan tinggi kotak, #ffffff pada background-color merupakan warna background, dan #ffffff pada border merupakan warna garis pinggir. Silahkan diganti sesuai dengan template anda.

Ingat:
Ganti tulisan yang berwarna merah dengan alamat postingan anda dan ganti tulisan berwarna merah yg dicetak tebal dengan judul postingan anda. Jika anda ingin menambah postingan baru maka copy kode yang berkedip lalu letakkan diatas kode </div>

Jangan lupa untuk mengganti angkanya dengan angka 3 dan begitu seterusnya jika anda ingin menambah postingan baru lagi.

3. Kalau sudah klik Save Template. Selesai.

Jika anda ingin menggunakan icon gambar sebagai pengganti angka maka ganti kode dibawah ini

<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>

Dengan kode

<style>
.list {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBS0W-6XMy48gOZbV19GPOBzsiDjBXuVwpZU_70JPEwJR9pUOe1YKnv6URAxBw_EippXjmzQ8y1gXONhgcW5NpiDHBb5RuPBDUsSvhmGytPQTcIWJoC3CW8EcGVLJuzBYg9hj5YNtUw0xz/") no-repeat left center;
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px 0px 0px 20px;
}
</style>
Ganti tulisan yang berwarna merah dengan alamat icon gambar anda dan hapus angka pada setiap judul postingan.

Selamat mencoba. Semoga berhasil
Ingin artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan atau Mau dapet tips2 lain yang lebih seru & orang lain belum tahu.

Masukan alamat email anda:

GRATIS!

Postingan Terkait Lainnya :


Related post | Widget by Tipsyournet.blogspot.com
.Ingin artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan atau Mau dapet tips2 lain yang lebih seru & orang lain belum tahu.

Masukan alamat email anda:

GRATIS!

0 comments:

Post a Comment

Powered By Blogger