Tutorial Blog : Menampilkan blogroll model scroll

08Sep08

Saya kembali menuliskan tentang tutorial blog, ada beberapa email dan komentar yang menanyakan bagaimana membuat blogroll seperti yang saya punya. Sebenarnya kalo teman-teman search di google pasti mendapatkan juga tutorialnya. Namun ada beberapa minta dikirim lewat email, nah daripada mengirimkan email setiap ada yang bertanya, saya langsung buat postingannya aja. OK.

Box link atau blogroll model scroll untuk lebih menghemat penggunaan sidebar apalagi jika memiliki tautan yang banyak, sehingga perlu disederhanakan misalnya dengan bentuk scroll seperti yang saya gunakan. Membuat box link di sidebar di samping seperti berikut :

caranya gampang, bagi pengguna wordpress baik yang wordpress.com atau yang berengine wordpress (domain sendiri), bisa langsung menuju design (desain) >> widget .

Kemudian add (tambah) text (teks) menjadi salah satu bagian dari sidebar anda. Silahkan edit text tersebut dan masukkan kode-kode berikut :

<div style=”background-color:white;border:2px solid #cccccc;overflow:auto;height:200px;width:200px;”>
:: <a href=”http://die4pleasure.com/”>’K</a&gt;
<br> :: <a href=”http://abeeayang.wordpress.com/”>abeeayang&trade; </a>
</br><br> :: <a href=”http://meetabied.wordpress.com/”>abied</a&gt;
</br><br> :: <a href=”http://praditya.net/”>adit</a&gt;
</br><br> :: <a href=”http://buayaganteng.wordpress.com/”>adit TC’05</a>
</br></div>

intinya ada di :

<div style=”background-color:white;border:2px solid #cccccc;overflow:auto;height:200px;width:200px;”></div>

di divnya ini silahkan dimodifikasi sesuai kebutuhan anda, dari warna (background-color) ukuran garis tepi (border), scrollnya, maupun dari ukuran kotaknya (height dan width).

Kategori

Untuk menambahkan judul dari blogroll/box link kita bisa menambahkan di atas link-link kita yang satu kategori dengan code berikut :

<div style=”background-color:#D0D0D0;text-align:left;”>
<b>INSTITUSI</b></div>

Bagi pengguna blogspot, lebih mudahkan, tinggal memasukkan code tersebut di edit htmlnya 🙂 Saya ndak perlu jelaskan banyak-banyak, saya rasa dengan melihat code-codenya anda-anda udah bisa memahaminya 🙂

Demikian penjelasan saya, semoga bermanfaat 🙂

UPDATE :

kalau teman-teman kesulitan mencopy langsung code, silahkan diganti tanda petik duanya dulu dari ” menjadi ” .

NB :

  • tutorial ini bagi yang belum tau, sekedar berbagi ilmu 🙂
  • terima kasih buat blog teman2 yang saya jadikan contoh 😀 hehehe

Tutorial Blog :

Iklan


80 Responses to “Tutorial Blog : Menampilkan blogroll model scroll”

  1. 1 mahma mahendra

    trima kasih bwat ilmuny rul

  2. Sip daeng hebat mentong deng arul 😀
    Sangat berguna bagi Newbi daeng

    Sukses ki daeng

  3. 3 theunordinaryworld

    Makasih mas…. Kemarin saya coba liat dengan view page sources, bisa ternyata 🙂 tapi dengan penjelasan ini, jadi semakin jelas. Hatur nuhun…. 🙂

  4. matur nuwun, bang…..sampe jugax pingbacknyah……… 😛

  5. wah…
    isop ge tiru iki
    suwun mas arul!

  6. mantep tutoriale

  7. Hmm, tapi harus hati-hati juga dengan pemakaian kode HTML-nya..

    But it’s a nice trick.. 😉

  8. Trick yang menarik neeh.. kapan2 akan saya coba kalau blogroll sudah penuh.. 😉

  9. ok punya nih tutorialnya boss

  10. bisa buat blogspot ga ya??

  11. Tips yang menarik, trims..

  12. # mahma mahendra : ok 🙂
    # 2 Gelandangan : ok. sama2 🙂
    # 3 theunordinaryworld : ok, semoga bisa yah 🙂
    # 4 Abeeayang™ : heheh sama2 terimakasihnya 🙂
    # 5 kucluk : ok bro 🙂
    # 6 Anang : mantap apane?
    # 7 Nazieb : emang berbahaya yah pake kode HTML yakz? mm baru tau…
    # 8 Dhimas : ok, terima kasih 😉
    # 9 ario saja : terima kasih 🙂
    # 10 Tony : bisa koq… bisa banget, tapi detilnya sy ndak tau 😀
    # 11 gajah_pesing :ok, sama2 🙂

  13. wah….makasih ya……

  14. Maksih berbagi ilmunya, kog baru nemu ya blog bagus begini. Salam.

  15. Wah … ok juga tuh tips-nya. Sejak WP yg baru ini saya tidak bisa ngedit blogroll yg lama (widget) ada saran ? Thanks sebelumnya.

  16. Maksih ya … banyak ilmu disini ya

  17. wah, info yang menarik dan bermanfaat nih, mas arul. makasih sharing ilmunya. saya pernah juga nyoba, tapi bikinan saya ndak lulus standar web. akhirnya kulepas lagi.

  18. 18 agunk agriiza

    wah keren mas .. ak coba aAaHh .. hhe

  19. mantep nih tutorialnya, mayan nghemat space buat blogroll

  20. boleh dicoba neh…tp kayaknya penyakit malas sayah rada kambuh klo ngisiin satu satu, hehe…

  21. wah sip…! thanks mas

  22. terima kasih mas

  23. wah wah ini nih.. trik sederhana tapi berguna.. matur tengkiyu yo mas..

  24. Wahhh … thaks daenk ,… coba dulu ahh , misii

  25. waaaaaa.. makasi mas.. tar saya rombak degh blogrollnyah 😀

  26. nyoba ah ntar,,,,,,

  27. wahh..ini yang kita cari2 dari dulu..hiihi..thx ya!!!

  28. hihihihii akhirnya tau juga 😀

  29. great tips 😉

  30. mas di blog saya kok ga bisa ya??
    udah nyoba berkali-kali tapi keluarnya bukan yang bentuk scroll

    kodenya ini kan?? blogrollnya

    tapi setiap saya save kode sisanya cuma blogrollnya aja

    kira-kira salah dimana ya??
    mohon bantuannya mas 😀

  31. maaf mas maksud saya setiap di save sisa kodenya tinggal yang div-nya aja. kalo yang background-color, border, height, width jadi ilang

  32. 32 agunk agriiza

    ga bisaaa 😦

    masak harus pake rumus marquee?

    gmn ni mas? hhu

  33. # 13 ma2nn-smile : ok, sama2
    # 14 Ersis Warmansyah Abbas : terima kasih pak
    # 15 Oemar Bakrie : saya sudah nulis diblog pak grandis
    # 16 Ersis Warmansyah Abbas : terima kasih pak, koq double? :mrgreen:
    # 17 sawali tuhusetya : ok pak, iyah pak sawalikan pernah pake, udah buat halaman sendiri yakz 😀
    # 18 agunk agriiza : ok silahkan
    # 19 Bayu Aditya : ok mas
    # 20 pnsgila : silahkan mas… yah itu sih tergantung kita mas
    # 21 samsul : ok sama2
    # 22 Anggara : sama2 pak
    # 23 Fachia : ok2,
    # 24 Muda Bentara : silahkan
    # 25 FaNZ : ok, silahkan
    # 26 Farid Yuniar : ok silahkan
    # 27 kita : ok2
    # 28 zoel : ok deh 😀
    # 29 Epat : thx yah
    # 30 dantyka : itu saya sudah jelaskan di update, tulis ulang tanda petiknya
    # 31 dantyka : ok2 ngerti koq 😉
    # 32 agunk agriiza : saya sudah update gung, silahkan dicoba 😉

  34. mesti diakali spt begini biar blog ngga jadi panjaaaaaaaaaang hehehehehe

  35. Eh, bukan berbahaya… cuma hati-hati itu nanti takutnya ada yang salah, tampilannya malah kacau..

    :mrgreen:

  36. hehe…mas arul ini 😀
    terus mas terus update ilmunya 😀

  37. wah ini yang saya perlukan; mama kasi ya

  38. saya juga makek ini.. tapi baca tutornya dari blognya orang lain.. sori yo rul.. wekeekke…

  39. # 34 xero : iyap benar banget 🙂
    # 35 Nazieb : oalah kirain mudah dihack.. hahahaha 😀
    # 36 pinkyangga : ok2 pinky sukses juga di sana 🙂
    # 37 Artha : ok2 sama2 🙂
    # 38 ndop : namanya berbagi ndop 😛

  40. Nasiiiieb….

  41. langsung dipraktekken Daeng…..
    arigato

  42. k, kalau mau yang “Read more” gimana? beberapa waktu lalu dapet infonya dari site orang, tapi koq ak dah coba2 tapi belum berhasil juga… bisa bantu, kak?

    trims b4… salam..

  43. Akhirnya rasa penasaran saya berakhir. Siap dipraktekkan. Makasih infonya, daeng. :mrgreen:

  44. Link terakhir harap diperbaiki, mas ==> yang ditebalkan baiknya dihapus
    https://asruldinazis.wordpress.com/2008/09/08/tutorial-blog-menampilkan-box-link/

    salamhangat.
    mohon dilink RIJAL28.com

  45. Arulll, makasih yahhh,

    saya baru nemu tutorial ini… ada link dari blog saya. Ijin ngopi ya rul.

    Salam,

    Silly

  46. hehehe … ternyata tips sampeyan laris
    dulu saya sampe “view source” html sampeyan supaya bisa tahu code html-nya hehehe
    nice tips

  47. Wah .. ada ‘mainan’ baru nih .. ma kasih ya Rul atas info-nya. Abang malah baru tahu kalo bisa dibuat box kaya’ gitu .. bisa jadi irit tempat ya.

  48. 48 gimboelneptune

    makasih ya mas udah comment di blogq. bagus dari mananya mas! blog saya

  49. Coba juga aaah…

  50. Tak coba dulu Mas….

  51. aku nyoba eror mulu 😦

    @ pak rovicky :
    bisa pak, coba ditulis ulang tanda petik duanya
    -aRuL-

  52. 52 mahabbahtedja

    saya coba dulu mas…
    makasih.

  53. 53 mahabbahtedja

    lapor mas!!
    sudah saya coba berkali-kali, tapi ga sukses mas

    ternyata kode ini

    tidak mau nge_ savechange, setelah di savechage kode tersebut hilang.
    kenapa mas ya?
    apakah kode tersebut tidak sesuai dengan theme wordpress saya ya?

    hasil sementaranya bisa sampeyan lihat di blog saya. sisi kanan paling bawah sendiri…

    maaf ngrepotin mas.
    terimakasih.

  54. siang mas?…saya mau numpang belajar ya mas?oya mas saya nyoba ngikutin Tutorial Blog : Menampilkan blogroll model scroll koq gk bs ya?alamat yang muncul malah alamat saya dan alamat yang dituju seperti ini mas ” http://www.cyberministry-online.co.cc/http://asruldinazis.worldpress.com ” sehingga gk bs ke buka alamat yg sy tuju wkt pk blogroll model scroll?mohon petunjuknya ya mas?thanks…salam kenal n minta ijin ya blog nya saya link ke tmpt sy?GBU

  55. makasih bos…
    ijin minta kodenya 😀

  56. Sip Mas Arul,
    Aku sudah coba dan berhasil.
    sorry walaupun terlambat mengucap (sorry lewat tulisan),
    aku minta ikhlasnya sudah copy codenya…………Thanks.

    Wassalam,
    http://mbahjogo.wordpress.com/

  57. blm sempet nyoba neh, nti kesini lagi deh.
    thanks bro.

  58. 58 devi wulandari

    sangat bermanfaat. Insya Alloh kalo sempet tak coba

  59. makasih tutorial;nya ya mas

  60. hehehe makasih mas arul (mas mi hehe :D) saya mau tampilkan blogroll kayak gitu di wpku 🙂

  61. ga asyik aahh…
    link blog guwe ga ada disini…

  62. 62 Rei。

    waaaaaaaah… makasi ya om

  63. aku cobain di blogger kok ga jalan ya.
    gak ada tuh scrolnya
    udah aku tulis, copy paste eeh ganti sendiri spt ini:

    kira2 knapa ya??

  64. mas,boleh tukar link?tolong segera di konfirmasi..
    terima kasih

  65. 65 adilahat

    em a ka a es i ha…
    lam knal maz
    lgsung tuker link ajja yah…
    hehe

  66. sip mas, sungguh dahsyat dan menakjubkan…..

  67. 67 taselamedia

    Thanks ini yang lagi gue cari

  68. kalau blogspot gimana, k?

  69. gak bisa, kk.. coba liat hasilnya di lamanku di bagian bawah… ga membentuk kotak nya,,,

  70. sudah bisa, kk!!! horeyyy…

  71. rul…kok punyaku ga bisa di scroll ya? jadi cuma sebagian aja yg keliatan…

  72. eh, udah deng…kegedean px nya…

  73. 73 Imron

    Makasih bozzz….atas ilmunya….slam kenal yach dari aku…..plup.wordpress.com

  74. keren nih infonya. proyek saya berikutnya kayaknya pake wordpress aja,

  75. Makasih atas infonya…

  76. gan, kalo do blogspot gimana?

  77. lapor! artikelnya sy simpan di ‘rumah saya’ mas. 😀
    http://ntpshipz.wordpress.com

    bagi yang mau tukeran link bisa join disini
    http://ntpshipz.wordpress.com/linkshare

    tks

  78. tutorial bagun gas,
    bisa tukeran link gan?? link agan sudah saya pasang di edineisa.com

  79. thanks ya gan infonya, bermanfaat sekali 🙂


  1. 1 Praktek Buat Box Lines « Fika Rijal

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s


%d blogger menyukai ini: