Pelajaran kali ini adalah bagaimana kita bisa membuat kotak dartar isi seperti inilah kiranya
Ok sebenarnya cukup mudah untuk membuat daftar isi seperti diatas. Bagi anda yang sudah lama ngeblog pasti sudah tahu cara membuatnya hanya saja mungkin caranya yang berbeda.
Nah berikut saya akan memberikan cara membuat kotak daftar isi dengan cara saya sendiri. 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://riduansept.blogspot.com/2010/03/cara-membuat-menu-dropdown-pada-blogger.html">Cara membuat menu dropdown</a></div>
<div class="list">
2. <a href="http://riduansept.blogspot.com/2010/03/membuat-efek-marquee-atau-teks-berjalan.html">Membuat efek marquee/text berjalan</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 dibawah ini :
<div class="list">
2. <a href="http://riduansept.blogspot.com/2010/03/membuat-efek-marquee-atau-teks-berjalan.html">Membuat efek marquee/text berjalan</a></div>
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh82OnuoULJJgodTZXsVBNlGX-qK8dfxAApWnCGlDAqYA_wcKFJO8dStdoHZm9WyadKr-XiIopoK62kNudxfxigqj7GCmy-Hmi54sy5zW75fjp2cOKFcgemZENhI86uKY0Qu4KLBiNZ5ojR/") 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
0 komentar:
Posting Komentar