Tuesday, November 17, 2009

CARA MEMBUAT DAFTAR ISI SECARA MANUAL...

Bookmark and Share

Kalian pasti sudah melihat Daftar isi yang terpampang jelas di blog saya ini... yang ada icon bintang kerlap-kerlip itu... baiklah akan saya bahas di postingan kali ini... karena juga ada yang tanya lagi "Gimana Bang cara bikin daftar isi kayak di blognya ini..? " .. oke bagi blogger pemula silahkan simak artikel ini.. bagi blogger senior ya silahkan ditambahkan jika masih kurang jelas..

MySpace...Bagi Blogger pemula saya sangat sarankan belajar Tutorial Blogging di Blognya Kang Rohman .. di situ juga banyak Blogger-blogger Senior yang OnLine di Shoutmix-nya.. kamu bisa bertanya langsung disana (komunikasi 2 arah yang aktif menurut saya)..

Baiklah kembali ke topik semula... Sebenarnya daftar isi ini mudah membuatnya.. hanya tergantung dari kreatifitas kita saja memanfaatkan widget-widget yang sudah ada di blog kita..


MySpace..Asal mula Widget Daftar Isi Manual yaitu dari Widget BlogRoll Manual.. kenapa dikatakan Manual ? karena kita sendiri yang harus mengisi daftar isinya.. Paham ya .. Daftar isi yang saya buat ini terinspirasi dari Daftar isi yang ada di blognya Kang Rohman..

Daftar isi manual
MySpace..Tapi ada juga Widget Daftar isi Otomatis yang disertai dengan gambar & komentar yang ada pada postingan itu.. lalu kenapa dikatakan Otomatis ? karena widget itu sendiri yang akan scanning postingan artikel di blog kita dan akan ditampilkan menjadi daftar isi yang keren... tapi Daftar isi otomatis ini menggunakan java scripts (.js) jadi akan sedikit memperlambat loading blog kita.. Paham ya.. ini Contoh Daftar isi Otomatis -> www.bloggertricks.com .. ini pernah saya lihat di tempat sahabat Mas Doyok..

Daftar isi otomatis
MySpace..Jadi terserah kalian mau menggunakan Daftar isi yang mana..

Kali ini saya hanya akan membahas Daftar Isi Manual saja... oke kita langsung saja yaa.. ikuti langkah-langkahnya sebagai berikut :

1. Loginlah dulu di Blogger > > Tata letak > Elemen Halaman.. Klik tambah Gadget > HTML/Java Scripts.. Buatlah Namanya Gadget-nya misalnya Daftar isi Blog..

2. Copy-paste kode dibawah ini ke dalam gadget tadi..
<div style="border: 0px solid rgb(153, 153, 153);
overflow: auto;
width: 500px;
height: 150px;
text-align: left; ">

<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/09/linkwithin-widget-mini-yang-praktis.html"> LinkWithin...WidGet Mini yang Praktis MenampiLkan Cuplikan Postingan!!!</a>
<br/>
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/09/ganti-emo-box-shoutmix-di-blog-simple.html"> GanTi eMO box Shoutmix di BLoG.. SimPLe Bgt</a>
<br/>
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/10/cara-membuat-blogroll-scrolling_04.html"> Cara MemBuaT BLogRoLL ScroLLing Otomatis dan yang ManuaL...</a>
<br/>
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/10/bagi-sobat2-blogger-yang-blognya-ber.html"> Cara PaSanG JaM & KaLenDeR iSLaMi aL-HaBib di BLoG</a>
<br/>
</div>
3. Dari kode itu.. gantilah kode scripts berikut ini ;
- <img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/09/linkwithin-widget-mini-yang-praktis.html"> LinkWithin...WidGet Mini yang Praktis MenampiLkan Cuplikan Postingan!!!</a>

Merah = Gantilah dengan URL HTML Code Gambar Icon kamu..
Biru = Gantilah dengan Direct URL ke postingan Artikel kamu..
Hijau = Gantilah dengan Judul Artikel kamu..

Ulangilah langkah diatas ini sampai semua postingan artikelmu terdaftar semua..

Lainnya :
- <br/> = Seperti spasi yang memberikan jarak antar text....
- style="border: 0px = Gantilah angka border-nya dengan 1px atau 2px atau biarkan saja 0px..
- width: 500px; = Sesuaikan dengan lebar kolom di blog kamu.. atau aturlah sesukamu
- height: 150px; = Sesuaikan dengan tinggi kolom di blog kamu.. bisa 100px atau 200 / 250 px..
- text-align: left; "&gt; = Mengatur posisi text widget ini / daftar isi ..ganti dengan Center jika mau di tengah-tengah..

4. Jika selesai semua kamu membuat daftarnya dan mengeditnya.. silahkan di simpan widget daftar isi-nya dan tempatkan di tempat yang strategis..

MySpace
... Selamat MengOprek2 yaa ...

48 comments:

  1. pertamax g ya...... keren nih daftar isi, Rizky monanya, blog q kan dah berat, yg paling terasa itu ada d daftar isi, kalau misalnya daftar isi aq pindah ke postingan kira2 bagus ga nantinya ? mohon Rizky d beri aufklarung

    ReplyDelete
  2. @ Rizky : Congratulation Riz.. ! :D ..kamu memang yg pertamaX.. heuumm.. saya lihat daftar isi mu yang otomatis ya.. pake Java Scripts sih, ini yang bikin berat Riz krn udah loading + scanning dahulu widget itu..knapa ngak dicoba dulu pake Daftar isi ManuaL.. tpi tetap simpan/backup dahulu daftar isi otomatismu itu.. Silahkan dicoba & lihat perbedaannya Riz.. :-)

    ReplyDelete
  3. walaupun aq masih bingung maksud daftar isi otomatis, kan Rizky coba deh.....

    ReplyDelete
  4. @ Rizky : hehe... ko' bingung Riz.. daftar isi otomatismu itu kan yg sprti gw terangkan di postingan ini.. :-D

    ReplyDelete
  5. ada yg bisa lebih otomatis gak sob, maksudku tanpa di kasih apa2 udah langsung keluar sendiri....hehehe...mimpi kali..., btw tetap semangat...

    ReplyDelete
  6. wah sob g bilang dr awal, post q dah 147 masak harus buka satu2.... g ada cara lain sob

    ReplyDelete
  7. @ Mas Moer : haha.. ada tuch.. yg daftar isi otomatis..tpi masih ada yg perlu qt oprek2 dikit mas.. :D

    @ Rizky : ya udah Riz ..pake aja daftar isi yang biasa kamu pakai.. :-)

    ReplyDelete
  8. MaAndi pingin praktek yg ini tapi kok susah ya he..he..maklum belum bisa thnxs ya mas

    ReplyDelete
  9. @ Dhana : nanti dicoba lagi dhana.. simple ko' :-)

    ReplyDelete
  10. bos yang daftar isi manual ni klo ditaro di widget kan bisa nya cuma di sebelah kiri doank. nah klo nazro nya di atas sebelum postingan kaya di blog u ni gmn cara na? mksh

    ReplyDelete
  11. @ Rival Aditya : silahkan dicoba sob.. :-)

    @ Ammar : utk taruh Widget Daftar isi di tengah2 blog TInggal Kamu Drag aj widgetnya ke tengah2 sblm elemen posting mar.. :-)

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. SALAM BLOGGER SOBB ...

    Weew kereenn nii infonya ..
    Saling tukeran link yaa .
    Trims from htt://www.bamz-thekaje.co.cc

    ReplyDelete
  14. Berkunjung untuk baca2 postingan keren ini sob

    ReplyDelete
  15. terima kasih atas infonya, orang baru mesti banyak belajar nih

    ReplyDelete
  16. Bambang Nurjaman > thx sob.. oke

    wirkam dwy febrian > siiip

    Saung Web > silahkan baca2..

    BANG ADHIE > silahkan sob

    ReplyDelete
  17. brooo,, kalo pengin daftar isi kayak yang paling atas gimana caranya??? itu tuu... yang open all

    ReplyDelete
  18. Cerita Dewasa > Oww.. Menu D-Tree maksudmu... oke ntar gw jawab ya.. sabar gan.. mo gw posting ntar.. :)

    ReplyDelete
  19. daftar isinya manjurrr....bos!, trus cara memasang postingan dengan format swf gimana ya....?

    ReplyDelete
  20. thanks za mas... aq baru ajah nyoba blogrollnya... ukey banget... mas boleh gug kalo kita tukeran link... aku udah tempelin linknya mas lho... liat ajah di http://pmrwab.blogspot.com

    jangan lupa nempelin link saya za mas....

    N thanks tas tutorialnya....

    ReplyDelete
  21. adi_sby > cara menampilkan format swf mungkin kayak video youtube pernah saya bahas disini gan.. siapa tahu bisa menambah acuan > http://ecaknyo.blogspot.com/2009/10/cara-pasang-video-youtube-di-blog.html ...atau nanti saya jawab kalo ada waktu luang.. dan juga antri ya karena ada bberapa sobat blogger yang nanya2 ke saya jg.. :D

    WIRA ADHI BHAKTI > oke..ntar gw pasang jg linknya.. :)

    ReplyDelete
  22. repott jg ya kk.. klw mau nambah daftar isinya,, hehehe.. tp jadinya bagusss... iya kan!?

    ReplyDelete
  23. Cut Vivia Talitha > betul sekali.. jadinya bagus dech.. :) kan bisa diganti2 gambar bintangnya dg gambar GIF yg lain... ;)

    ReplyDelete
  24. apa gag ada cara yg lebih praktis supaya langsung bisa nampilin smua artikel??
    hehe

    ReplyDelete
  25. @yan_zhen:

    ada kok..itu sih pake yg ini aja gan.. >> http://ecaknyo.blogspot.com/2010/07/cara-membuat-related-post-dengan-atau.html ..tinggal kamu atur aj widget-nya :)

    ReplyDelete
  26. matur nuhun gan!!
    uda aku coba tutornya..

    ReplyDelete
  27. wah makash gan infonya..
    ntar dicoba deh..

    ReplyDelete
  28. @tulisan mojho:

    yups..sama2..silahkn kapan2 dicoba :)

    ReplyDelete
  29. Mas link Bann anda sudah terpasang di blog ane, dan ane udah follow,

    jangan lupa cek dan Linkback..

    http://www.manrengat.co.cc/

    ReplyDelete
  30. @Putr@:

    utk smentara sy linkback dulu ya gan... soalnya blm bisa BW ke domain co.cc..kena blok di t4ku..

    ReplyDelete
  31. Mantap??jgn lpa brkunjung diblog saya y??

    ReplyDelete
  32. thanks mas atas infonya..
    bisa repost gak.?

    ReplyDelete
  33. mas kok gak berbentuk scrolling alias ber tabel....cranya gmna please sya masih pemula:((

    ReplyDelete
  34. Kunjungan perdana
    saya tunggu kunjungan balik......
    http://pakboer.blogspot.com/

    ReplyDelete
  35. Wah,, ribet banget . tapi boleh juga tuh

    ReplyDelete
  36. Nice info mksih gan main ke web blog baru kami?

    http://www.software4kita.com/

    ReplyDelete
  37. ijin copas gan
    btw caranya suscribe blog gimana yah ??

    ReplyDelete
  38. Terima kasih banyak nih gan ats infonya,,

    Intip juga di ya,,,
    http://soontoys.blogspot.com/

    ReplyDelete
  39. Trimakasih gan infonya. lucu banget

    http://www.getek28.co.nr/

    ReplyDelete
  40. Itu kn sm Aj Buat Manual gan...

    ReplyDelete
  41. trima kasih sob atas artikelnya
    http://giribig.com/

    ReplyDelete
N.B.
1. Berkomentarlah dengan sopan.
2. Dilarang membuat spam, terutama yang mengandung SARA/ Pornografi/ Judi dan Iklan.

Emoticon : Untuk menyisipkan emoticon dalam komentar, silahkan klik pada emoticons icon yang tersedia dibawah ini untuk melihat kodenya lalu tinggal di copy dan di paste [ sisipkan ] kodenya ke dalam komentar.