Postingan ini saya buat untuk menjawab pertanyaan dari seorang rekan blogger yang menanyakan kepada saya melalui email. Beliau bertanya kesaya, "mas, bagaimana cara membuat kotak blogger tutorial seperti di blog mas herman?" Hm.. Mungkin yang dimaksud adalah yang ini kali ya :)
Blogger Tutorial
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 Design -> 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://www.hermanblog.com/2008/10/apa-itu-blog_15.html">Apa itu blog</a></div>
</div>
Keterangan:
380px merupakan lebar kotak
180px merupakan tinggi kotak
#ffffff pada background-color merupakan warna background
#ffffff pada border merupakan warna garis pinggir. Silahkan ganti 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 ini
<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>
Dengan kode berikut
<style>Ganti tulisan yang berwarna merah dengan alamat icon gambar anda dan hapus angka pada setiap judul postingan.
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDo5WmjcqzzF8AIZkxNmIZbGmGI3dpEcP7i0wq1mQqMVcdhlaWT_7cFbTwm4SBg007rgItvaKIhPbRLAsnsF2qbRE5aY2yv9DtXPlZqDJXqQXTJxm7LfX4OfWyeQRzfvwWjIDR1py_rQA6/") no-repeat left center;
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px 0px 0px 20px;
}
</style>
Selamat mencoba. Semoga berhasil
Recent Posts:
Sudah gabung dengan sumber dolar berikut ini?
46 comments
thankss
(wuaaa ane pengunjung setia ente ni) hahaha
akhirnya ane temuin juga kau...hehe
makaci y kang herman :)
sukses truz dech
buanget tips and trick nya neh sob....
wat gw yg baru mulai nge-blog lage...
thanks yah....
Thanks.... saya terbantu sekali... tolong koreksi ya... di http://smart-vku.blogspot.com
banyak membantu saya mencipta blog idaman
Mohon penjelasannya gan.
coba lihat di blog saya ini :
http://orendproduk.blogspot.com
Pas link nya di klik ada tulisan laman tidak ditemukan?
salam blogger ..
aditya-trihutama.blogspot.com
cuma nomor urutnya gak ada...?
terus kalo di klik salah satu muncul pesan "maaf laman yg anda cari tidak ada di gratiss"
itu kurang apa mas yaa?
tolong di cek & di koreksi ke tempat kejadian ya mas...
peace...
saya sudah pakai tapi belum muncul scrol nya apakah nunggu banyak atrtikel dulu
trims
# :)]
http://www.minimalisjati.com
Post a Comment