08 March 2008

Cara Membuat Kotak Blogroll dan Marquee

Kali ini aku mau ngejelasin trik kali dengan gaya puisi, biar nggak bosen, tapi jangan diketawain ya, soalnya lom pernah buat puisi nih.

Tatkala link-link jumlahnya sudah berjuta-juta
Maka semakin sesaklah dada blog ini
Jikalau hal ini tidak diatasi dengan bijaksana
Maka blognya dikau akan penuh sesak dengan link-link itu

Udah bagus nggak puisinya? ancur ya? :r Ok lanjuuut.

Oleh karena itulah
hamba memberanikan diri untuk menawarkan obat sesak tersebut
Melalui secuil ilmu berikut
Daku berharap dapat membantu kisanak supaya blognya tidak sesak


Kira-kira pada mudeng nggak ya penjelasan tadi, ah biarin deh :z
:r udah ah, udah mual2 nih pake gaya puici, sekarang ganti gaya biasa aja.

Untuk trik kali ini, ada dua macam kotak blogroll yang akan kita buat, terserah kamu mo pilih yang mana. Kotak blogroll-nya yaitu:

1. Kotak Blogroll Model Textarea

Contohnya seperti kotak blog roll seperti punyaku itu, itu lho yg atasnya ada tulisanya "Friend links"
Nha begini cara membuatnya :
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)


<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

#link1 <br />
#link2 <br />
#link3 <br />
#link...

</div>


keterangan:
- Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu bisa merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link kamu, oh ya itu juga bisa diisi dengan banner link.
- Jika kamu pingin daftar link-linknya berjajar kayak punyaku, maka hilangkan kode <br />

2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar (yg biasanya disebelah kanan trus ditarik keatas kebawah itu lho). Link-link ato isi didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal. Nah gini nih cara buatnya:
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)


<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link...<br />

</marquee>


Keterangan :
- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right (udah mudeng to artinya, gak usah dijelasin ya).
- Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode <br />.
- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

OK SELAMAT MENCOBA......

124 comments:

  1. Anonymous01 July, 2008

    trus kalo cara buat garis pembatas antara nama2 linknya itu gmn bosz..

    ReplyDelete
  2. Anonymous01 July, 2008

    garis pembatasnya bukannya cuma make tanda diatasnya slash di keyboard..^.^hehehe ngaco ya...

    ReplyDelete
  3. @radenmas, yup benar seperti yg dikatakan oleh mas wiswakarma. contohnya seperti ini :
    <a href="http://....">link 1 </a> | <a href="http://...">Link 2 </a>

    ReplyDelete
  4. Anonymous03 July, 2008

    thanks tipsnya.

    ReplyDelete
  5. oke... jalan tu pake yg nomor atu^^
    thx

    ReplyDelete
  6. Anonymous06 July, 2008

    wala.....ribut apaan...

    ReplyDelete
  7. bagaimana cara membuat / menyimpan data di blogspot...dan yang ditampilkan dalam blog cuma judulnya saja..begitu di klik data keluar..trims

    ReplyDelete
  8. aku copy dulu tulisannya yach...
    nanti baru dicoba..
    makasih atas tutorialnya

    ReplyDelete
  9. berhasil lagi makasih ya....

    ReplyDelete
  10. Gila.... gilaaaaaaaa Bener-bener dewa blog spot...... Hamba sujut di hadapanmu wahai baginda raja......... Cup Cup Muach......

    ReplyDelete
  11. from : Mr. Yogi
    www.alumni-unpad.blogspot.com

    ha..ha... dewa blogspot ?? hmm,,,, kudu di patenkan tuh kata.. biar masuk kamus besar bahasa indonesia. :)

    saya juga dapat ilmu dari dewa blogspot nih. ini hasilnya

    pundiuang.co.cc

    ReplyDelete
  12. numpang ya mas udin
    www.pundiuang.co.cc

    ReplyDelete
  13. Waduh, yang gila nih siapa ya, masak dikatain dewa blogspot, trus ada yg sujud lagi.
    duh, bener-bener gila deh..

    ReplyDelete
  14. Salut ama bro kendhin... udah mau bagi2 ilmu untuk kita2...

    Artinya sampeyan punya ilmu itu beguna bukan cuma untuk situ sendiri tapi juga untuk kita semua. Semoga Ilmu sampeyan membawa berkah ... cieeee ... hehe. ^_^

    ReplyDelete
  15. Anonymous16 July, 2008

    tengkyu ya bro...TOP BGT

    ReplyDelete
  16. thank's bgt, pokoke mantap + handal

    ReplyDelete
  17. bagus2 artikelnya tx....
    tapi kalo me kurang saham..eeeeh paham betul soal ngeblog , maklum lg belajar

    ReplyDelete
  18. Pagi Dewa Blogger ^_^ makasih atas tipsnya, udeh bisa neeh pake no 2. Tapi gimana cara byat nambahin temen ya?? koq d copylinknya nga bisa whe..he..he..maklum. Masih oneng :)

    ReplyDelete
  19. wow, terima kasih banget. Info-info yang ada di blog ini sedang saya cari. Akhirnya ketemu juga...................

    ReplyDelete
  20. trims mas dah tak pake mantaph

    ReplyDelete
  21. Anonymous23 July, 2008

    makasih mas yah.. dah bwanyak membantu

    ReplyDelete
  22. Anonymous24 July, 2008

    cara bikin posting seperti di bawah itu gimana kang?

    ReplyDelete
  23. bos kendhin, selamat dan sukses semua telah salut dengan anda maju terus, semangat, smart, serta amanah

    ReplyDelete
  24. klo yg pake pny km, trus garis item pembatas link tu bikinny gmn??

    aku uda nyoba, tp lum sukses..

    hasilny berantakan tanpa garis itu...

    ReplyDelete
  25. Anonymous27 July, 2008

    aku juga mau nyoba nih

    ReplyDelete
  26. Anonymous28 July, 2008

    waah.....tx a lot y a/ info na

    ReplyDelete
  27. aku selalu tersenyum jika ngikutin tutorialnya. humoris banget sih...btw,aku kok tk pernah dikunjungin lagi ya,he..he..

    ReplyDelete
  28. salam bloger indonesia......
    buat mas kendhin, saya sudah lama mempraktekkan ilmu anda. dan hasilnya memuaskan. terima kasih.

    Namun sekarang saya ingin bertanya : bagaimana membuat kolom yg buat tuker link (yang seperti kode skrip/semacamnya)

    ReplyDelete
  29. blognya bermanfaat buat nubi kayak saya, mas, om, bapak Kendhin kalau buat model postingan kode2 HTML dengan background ungu ada pembatasnya gimana? ajarin ya pls....salam blogger

    ReplyDelete
  30. untuk yg masih belum bisa membuat link baca DISINI dulu.

    @d0roro, bikin posting seperti dibawah? duh yg mana ya????

    @azzharuddin, makasih. tetap semangat dan maju terus :D

    @eRmA, pembatas itu pake tombol yg disebelah "backspace" atau yg bareng dengan tombol "\"

    @Kristina DS, he..he.. ya deh tak kunjungi deh.

    @orang biasa, maksudnya apa yg DISINI pa ya?

    @si Tukul, kapan2 mungkin akan aku posting artikelnya bos, tunggu aja :D

    ReplyDelete
  31. Artikelnya bagus-bagus yah, beberapa artikel dalam blog ini kami masukkan untuk artikel di http://www.ubb.ac.id terimakasih yach pak buat artikelnya yang sangat berguna ini.

    ReplyDelete
  32. ntar dicoba mas kendhin ya!

    ReplyDelete
  33. good, ini baru ilmu. kunjungi blog saya juga ya...! saktianjrs.blogspot.com

    ReplyDelete
  34. Makasih buaaaanyak yaa tutorialnya sangat membantu saya yang baru belajar ini ,semoga tambah sukses dan dapat memberi pencerahan kepada para pemula.

    Tutorialnya sangat bagus dan banyak saya terapkan dalam blog saya. trim's.

    Kris.
    smpn5.tarakan@gmail.com

    ReplyDelete
  35. ass. met knal mas. aq org baru d dunia blog n masih nol bsar ttg blog. makasih bgt tas trik2nya ya mas. mga dpt phala yg bnyak. oh ya mas. kl cara buat seperti punya mas yg di ats gimna zz. tu da di mana? (yg kom terbaru, post terbaru, de el el). makasih bgt z mas.

    ReplyDelete
  36. mas ..kok bunda enggak ada rollbar-nya? knapa yach..

    ReplyDelete
  37. ralat..ralat..bunda salah masukin kode..sekarang udah siippp..tquuuuu

    ReplyDelete
  38. cara biar gambarnya bisa pakai blogroll ada ga??

    ReplyDelete
  39. assalamualaikum
    Thank's......trik & tripnya bermanfaat pisanan terutama saya yang baru bagaimana cara membuat blog. sekali lagi terima kasih ya
    Wassalam

    ReplyDelete
  40. B-) Tukeran link Boss...,

    www.tetrabisnis.co.cc

    makasih. :)

    ReplyDelete
  41. MAKASIH TEMAN TIPSNYA

    ReplyDelete
  42. mas, kalo bikin rollbar di shoutbox gimana?
    Ajarin dong .. habis loe canggih bener

    ReplyDelete
  43. mass... kok aku gagallll? Piye iki???

    ReplyDelete
  44. Trims atas tipsnya friends, kapan - kapan kunjungin juga blogku, trus aku tunggun komentarnya...yah

    ReplyDelete
  45. Tips ini udah lama saya cari, ternyata ada disini. Thanks atas tutornya :)

    ReplyDelete
  46. wow mantap om, mantap... ini yang ane cari, mesti gagal dalam percobaan sebelonnya ane tetep berusaha untuk mencobanya :D

    Thanks alot boss
    Salam

    ReplyDelete
  47. bos , kok waktu blogrollnya dipasang gak ada geseran up & down disampingnya, salah dmn ya, bantuin bos

    ReplyDelete
  48. salut ntar boedax klo dah gede pengen pinter kaya kmu ..\:D/ goyang dlu ach,,

    ReplyDelete
  49. thanks, Kang.

    Saya telah berhasil membuat kotak blogroll dan linknya saya ambil punya di blog ini. Tapi, gmn ya cara merubah warna backgroundnya dan warna tulisannya?

    Tolong bantuannya ya Kang ...

    ReplyDelete
  50. bagussss
    makasih tipsnya

    ReplyDelete
  51. Tengkyu bangad,,, artikel di blog ini bener2 manjur dan mujarab,,, ramuannya ampuh bangad,,,

    gw minta izin neh boss,,, ramuannya gw simpen di blog gw,, kalo di flashdisk dah ga muat,, neh blog nya...

    http://alayrose.blogspot.com/

    sesekali mampir dong,,, tar kalo gw dah bisa ngeracik,, gw kasih ramuan gw deh,,,

    hehehehhe...

    tengkyu....

    ReplyDelete
  52. bagus banget trick nya. makasih

    ReplyDelete
  53. Bagus sekali,,,
    Tpi saya mau nanya buat pembatas kayak punya anda gimana? coba anda lihat di blog saya di www.artiirhamna.blogspot.com

    Trus punya anda tidak ada garis bawah sedangkan saya ada....

    ReplyDelete
  54. Mas, kalo kecepatannya dikurangin caranya gimana? thx much

    ReplyDelete
  55. Kk BlogRoll marquee ku kok jalannya g sampai abis y?
    gmn tuh kk solusinya? :f

    ReplyDelete
  56. Tipsnya keren :D
    saya coba praktekin ya

    Eh, boleh dong kapan-kapan sameyan main neng bogku iki

    ReplyDelete
  57. mas tolong dong bagaimana caranya membuat scrolling di label cloud/tag cloud, soalnya tag cloud saya udah panjang banget n makan tempat???

    (tag cloudnya bisa dilihat diblog saya)

    http://music-board.blogspot.com :$

    ReplyDelete
  58. buka blog gue ya bossss and buat koment.....

    klik nama gue ajeee ok......

    ReplyDelete
  59. Thank,s banget...... semua tips dan triknya keren-keren... sebagian besar sudah aq cobain......... dan hasilnyaaaaaaa.................. Amazing......!!!!!

    ReplyDelete
  60. Anda tergolong sastrawan beraliran realisme. Asyik puisinya...

    ReplyDelete
  61. om, caranya bikin ikon ( :f :D :) ;;) :x :$ x( :? :@ :~ :| :)) :( :s :(( :o ) diatas kotak komentar kayak diblognya om, gimana ya............

    :s

    ReplyDelete
  62. marqueenya kok kadang berjalan normal tp juga kadang berjalan ga normal ya ?? itu karena apa bos ?? liat deh di bannerstoreku...

    ReplyDelete
  63. buat shoutbox gimana mas...?
    soory...msh baru...

    ReplyDelete
  64. Berhasil gan,,, Thanks
    http://yadi000.blogspot.com/

    ReplyDelete
  65. Mas Thank's ya Trik dan tipsnya.
    aku buat juga link trik dan tips ke blog mas, gpp ya?
    tapi blog ku masi baru dibuat,masi lugu & masih banyak pembenahan.

    ReplyDelete
  66. makasih mas atas tutorialnya :)...sangat sangat bermanfaat :),,

    ReplyDelete
  67. Trimakasih untuk infonya..

    ReplyDelete
  68. Susah juga ya gan kalo di praktekin

    ReplyDelete
  69. blog nya asyik buaaanget. terim atas tip nya

    ReplyDelete
  70. blog nya asyik buaaanget. terim atas tip nya

    ReplyDelete
  71. terima kasih....
    insyaAllah artikelnya bermanfaat

    ReplyDelete
  72. Terima kasih triknya, gan! Semoga bermanfaat selalu!

    ReplyDelete
  73. blog nya asyik buaaanget. terim atas tip nya

    ReplyDelete
  74. terima kasih....
    insyaAllah artikelnya bermanfaat

    ReplyDelete
  75. makasih banget gan.. sangat membantu..

    ReplyDelete
  76. terimakasih atas informasi menariknya gan.. Jangan lupa berkunjung ke blog obat herbal kami dibawah ini yah..!!


    nama obat sipilis
    ciri penyakit sipilis
    ciri sipilis
    obat alami sipilis

    ReplyDelete
  77. sangat membantu saya

    ReplyDelete
  78. lucu" komennya..ada yang dagang obat dll..hahahahahaha

    ReplyDelete
  79. selamat malam gan yang agan=2 yang ganteng  obat sipilis pada pria dan wanita di apotik lapak ane gan obat sipilis pada pria dan wanita mohon izininya gan obat sipilis di apotik alami

    ReplyDelete
  80. Gan Artikelnya bagus mantaf gan ane demen... salam kenal ya gan... dan jangan lupa juga kunjungi situs kami yang membahas tentang penyakit kelamin semoga berkenan gan... ~ obat sipilis pada pria ~ cara obat sipilis pada pria ~ obat sipilis pada pria rumah

    ReplyDelete
  81. Gan Artikelnya bagus mantaf gan ane demen... salam kenal ya gan... dan jangan lupa juga kunjungi situs kami yang membahas tentang penyakit kelamin semoga berkenan gan... ~ cara obat sipilis pada pria ~ obat untuk penyakit sipilis pada pria ~ tips obat penyakit sipilis pada pria

    ReplyDelete
  82. Gam Artikelnya bagus dan keren abis... Salam kenal gan dan jangan lupa kunjungin juga situs kami yang membahas tentang penyakit kelamin... semoga berkenan gan tararengkiew... ~ obat sipilis manjur ~ obat sipilis paling manjur ~ Obat Sipilis yg ampuh ~ obat sipilis yang paling mujarab ~ obat sipilis yamh ,anjur

    ReplyDelete
  83. do not forget to visit muhayathandsome.blogspot.com there are many knowledge about linguistic there.

    ReplyDelete
  84. kerennn....pengin coba ah soalnya saya msh newbie bngt d dunia blogging....

    ReplyDelete
  85. Artikel yang ada di dalam web ini akan kami masukan di Stisipol pahlawan 12 Kampus bangka Belitung

    ReplyDelete