Cara Membuat Kotak Daftar Isi

Posted by Herman on Friday, May 22, 2009 46 comments

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 class="list">
2. <a href="http://www.hermanblog.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
#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>
.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>
Ganti tulisan yang berwarna merah dengan alamat icon gambar anda dan hapus angka pada setiap judul postingan.

Selamat mencoba. Semoga berhasil


Recent Posts:

46 comments

pengguna said... 23 May, 2009
wehehe...bener-bener sangat membantu bro herman nih...top abizzz...
herman said... 23 May, 2009
@blockcno3: thanks bgt sob..
Imam Wildan Ar said... 28 May, 2009
Makasih banyak buat Mas Herman... Tips nya bermanfaat banget terutama buat aku yang masih belajar... Tank..
herman said... 28 May, 2009
@imam: yup sama2. smoga bermanfaat ;)
Haedir 'sisi' said... 04 August, 2009
mantap ni !!

thankss

(wuaaa ane pengunjung setia ente ni) hahaha
PutrAtjeh said... 09 August, 2009
thank infonya mas
Paijo said... 24 September, 2009
:)) Thank alot ya atas bagi2 ilmunya! I think this site very helpfull n powerful!
Ichal said... 30 September, 2009
ini dia yg sy cari-cari,
akhirnya ane temuin juga kau...hehe


makaci y kang herman :)
sukses truz dech
bullirus said... 11 November, 2009
seep...tq mas, aku dah berlangganan. tambah lg dong artikel yang bermanfaatnya buat kita. lama ga ada artikel yg baru niy mas. Sukses yaa...
infonetmu said... 27 December, 2009
wah aq baru buat blog nih.... mksh... kotak daftar isinya langsung saya pakai nih....
sabarmuanas said... 27 December, 2009
aq tak coba dulu ya...
SMP NEGERI 4 KERITANG said... 27 December, 2009
Mas, cara membuat blogup udah dicoba mas tapi tampilan iklannya aza tampilan blognya saya ngga' muncul caranya gimana mas?
Anonymous said... 11 March, 2010
mas kalau ditaruh disebelah kiri jadi g berurutan...gimana tuh benerinnya
Unknown said... 22 March, 2010
ciipp....

buanget tips and trick nya neh sob....
wat gw yg baru mulai nge-blog lage...
thanks yah....
ROESMIANTO said... 25 March, 2010
Keterangan anda Te O Pe Be Ge Te... brow...
Thanks.... saya terbantu sekali... tolong koreksi ya... di http://smart-vku.blogspot.com
chemee said... 31 March, 2010
akhirnya dapet juga nich, makasih infonya. kalo untuk blog gratisan di wordpress gimana? kayaknya nggak boleh nambah2 gitu ya?
BA said... 11 April, 2010
terima kasih ...atas tip dan panduan :may1357
banyak membantu saya mencipta blog idaman
Anonymous said... 28 June, 2010
kalo mau ganti warna tulisan sebelah mana di edit ?
Anonymous said... 23 July, 2010
TERIMAKASIH BOS..TAPI SAYA MASIH BINGUNG CARA MENYEMBUNYIKAN NAVBAR MASALAHNYA SY CARI KODE YANG DITUNJJUKKAN GA KETEMU DAN SAYA GA PEKEK TEMPELT DEPAUL
Orend Produk said... 09 August, 2010
salam kenal...., kok saya gak berhasil yach bikinnya????
Mohon penjelasannya gan.
coba lihat di blog saya ini :
http://orendproduk.blogspot.com
Pas link nya di klik ada tulisan laman tidak ditemukan?
risna said... 10 November, 2010
wuehh,ok banget tutornya,perlu pasang yang kayak gini nich.trimmsss...
Unknown said... 25 January, 2011
makasih banyak ya mas,emang ini blog keren abis,simple tapi menarik,,;;)
danie.ayank said... 26 January, 2011
ok gan... makasih bgt infonya udh banyak ngebantu ;)
NNC said... 18 February, 2011
This comment has been removed by the author.
umam said... 10 March, 2011
makasih bgt gan buat infonya... :))
puluth® said... 16 April, 2011
maanual dong ne?
Zey said... 20 May, 2011
ma ksh tman, aku minta ijin copy kodenya trus lngsung di pasang di http://parabolicinfo.blogspot.com, eehh trnyata kureeenzz bget. klo di wordpress bisa ga ya??
Arif Pri said... 04 October, 2011
Trims banget boss, sangat membantu buat saya yang baru bikin belajar blog.
arminagroup said... 06 November, 2011
Terima kasih, artikelnya ya. Mampir juga ke web kami ya.
Bobby Asakura said... 21 December, 2011
buat warna teksnya gmana?
Unknown said... 24 December, 2011
matur suwun sanget njih pak.....
aditya tri hutama said... 09 January, 2012
thank's ya,

salam blogger ..

aditya-trihutama.blogspot.com
Dhita Prianthara said... 12 January, 2012
thx infonya
rajablog said... 15 February, 2012
OK n MAKASIH INFONYA MAS HERMAN...
wisnugundul said... 15 February, 2012
OK..SAYA UDAH NYOBA MAS...http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif
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...
Bower said... 22 April, 2012
kalo yang otomatis ada nggak sob?
anang said... 23 April, 2012
mantap ini baru yg nama nya blog top , I like It :)]
Unknown said... 02 May, 2012
siiiippp dah............ langsung tancap... oh ya.. kalau nggak di delet nih.. mau share juga nih.. visit me at di www.sohibulhabib.com

peace...
MAN 1 PRAYA said... 20 May, 2012
bagus sekli daftar isi scroll
saya sudah pakai tapi belum muncul scrol nya apakah nunggu banyak atrtikel dulu
trims
Rizal said... 10 June, 2012
thanks ilmu nya bro,sudah saya coba dan berhasil
Listarina said... 05 July, 2012
Thanks gan infonya..
Anonymous said... 10 July, 2012
Makasih pak herman..? saya mau tanya bila soal G.adsense. Kenapa GA saya masih dalam tahap peninjauan ya pdhl sudah bisa login adsense dan berapa lama? Mohon diblz
Admin said... 21 August, 2012
Mantab gan postingannya..udah nyari kesana-kemari cara membuat kolom daftar isi,ternyata adanya di web nya agan.saya udah coba dan triknya berhasil..alhamdulillaah..thanks gan...saya mau deeh belajar..
Unknown said... 05 November, 2012
kopas ya gan..
Husckyever said... 20 January, 2013
makasih nih Gan , Selama ini saya cari - cari ternyata di Blog anda

# :)]
Unknown said... 28 January, 2013
blognya bagus gan
http://www.minimalisjati.com

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment