» » » Membuat Satu Sidebar Wordpress Menjadi 2 Kolom Scroll
, Edit

Membuat Satu Sidebar Wordpress Menjadi 2 Kolom Scroll



Biasanya sidebar blog wordpress.com terdiri dari 1 kolom dalam arti 1 kolom untuk 1 sidebar.Nah kali ini saya akan berikan sebuah 1 sidebar dengan 2 scrool jadi teman bisa menghemat ruang tempat untuk meletakkan pernak-pernik blog teman-teman sekalian.

Jadi dengan 2 kolom scrool ini teman-teman bisa lebih bebas meletakkan image,banner,link dll yang teman-teman butuhkan.

Berikut Kode HTML yang dapat saya berikan :

<table width="400" border="0" cellspacing="5">
<tbody>
<tr>
<td valign="top" width="150">
<div style="overflow:auto;width:140px;height:100px;background-attachment:scroll;background-image:url('http://alamat gambar anda');border:0 solid #0000ff;padding:5px;">

Kode anda disini...


</td>
</div>



<td valign="top" width="250">
<div style="overflow:auto;width:130px;height:100px;background-attachment:scroll;background-image:url('http://alamat gambar anda');border:0 solid #0000ff;padding:5px;">


Kode anda disini...

</div>
</td>
</tr>
</tbody>
</table>

Penjelasan 

  1. Tabel width = lebar table untuk kedua scroll tersebut.
  2. Width= “150” dan width = “250” adalah width yang dibagi dari table width yang 400.
  3. width:140px;height:100px  dan  width:130px;height:100px itu sesuaikan dengan lebar sidebar blog anda itu bisa anda gontak-gantik sesuai keinginan anda.Sehingga letakkanya sama besar dan seimbang.
  4. background-image:url('http://alamat gambar anda') itu bisa anda masukkan backgroundnya berupa gambar atau berupa warna,kalau berupa warna ini kodenya background-color: kode warna
  5.  border=”0” | bila tidak menggunakan kode  ini, pada gambar akan muncul garis pinggir (border)
  6.  Padding = Ketebalan garis pada kotak scroll
  7. Semoga berhasil

Bila ada sedikit penjelasan diatas yang kurang jelas,mohon masukkannya dengan memberikan komentar supaya kode diatas menjadi lebih sempurna dengan adanya bantuan teman-teman blogger lainnya.Good Luck J.

Untuk contoh Membuat Satu Sidebar Wordpress Menjadi 2 Kolom Scroll, bisa anda lihat disini yang saya buat yang jadinya klik http://anesar.wordpress.com
Terima kasih.

46 Responses to "Membuat Satu Sidebar Wordpress Menjadi 2 Kolom Scroll"

  1. Jackysan DofollowJanuary 28, 2012 at 1:15 AM

    Wahh mantab... tutorialnya sederhana tapi mudah dimengerti, terutama untuk para blogger yang baru belajar...
    Nice share...
    Btw link saya belon ada tuch di blogroll Sahabat setia nya..
    hehehe :)

    ReplyDelete
  2. Abed SaragihJanuary 28, 2012 at 1:39 AM

    @Jackysan Dofollow:

    Udah saya pasang.

    ReplyDelete
  3. astitirahayuiJanuary 28, 2012 at 4:31 AM

    kereeeeeeN bgt kaQ,,
    asTy baRuu taU Nii,, haha,, :)

    ReplyDelete
  4. dhenok habibieJanuary 28, 2012 at 4:53 AM

    simple banget code nya yaa sob.. itu dibagian kode pertama, /div dibawah /td gk masalah tuh??

    ReplyDelete
  5. RandeeztJanuary 28, 2012 at 6:36 AM

    Walaupun sudah cerai ma wp tapi tetap memberi kontribusi untuk para newbie wp... Thanks gan :)

    ReplyDelete
  6. udikhangeblogJanuary 28, 2012 at 7:50 AM

    info menarik,,kapan kapan mo coba...
    makasi gan..
    o ya lapor juga link-nya sudah saya pasang..

    ReplyDelete
  7. onesetia82January 28, 2012 at 11:15 AM

    keren bro tutorialnya ...
    saya suka postingan ini .... :)

    ReplyDelete
  8. yishaJanuary 28, 2012 at 7:27 PM

    aku ngga paham sama sekali.... hiks!!
    tapi, bukan karena kamu kok sob, tapi emang otakku.... hiks!!

    ReplyDelete
  9. Area 4556January 28, 2012 at 8:17 PM

    keren dah

    ReplyDelete
  10. mastokkenari computer & SEOJanuary 28, 2012 at 10:03 PM

    bagus sekali infonya, nih sob ...mksh sdh share.. en follow di #16 ...mksh

    ReplyDelete
  11. IkhsanJanuary 28, 2012 at 11:11 PM

    Wah, share untuk wordpress... Thanks!

    ReplyDelete
  12. Panduan 1001 CaraJanuary 29, 2012 at 12:16 AM

    blogwalking mas. kunjungi blogku juga ya

    ReplyDelete
  13. esduaJanuary 29, 2012 at 1:21 AM

    wahhh keren mas, bisa menghemat tempat.

    ReplyDelete
  14. Falzart PlainJanuary 29, 2012 at 2:24 AM

    Keren nih Mas Abed....
    Kira-kira kalau saya mau menduakolomkan kolom komentar terbaru dan postingan terbaru itu ada scriptnya gak Mas?
    (aduh-aduh... maaf nih bang... saya banyak maunya...)
    Kayaknya gak bisa ya?

    ReplyDelete
  15. Abed SaragihJanuary 29, 2012 at 2:50 AM

    @Falzart Plain:

    Kayaknya gak bisa mas :)

    ReplyDelete
  16. rimbo newsJanuary 29, 2012 at 4:13 PM

    makasih infonya kang... bisa dicoba dan dipraktekkan nanti :D
    kalau sekarang sepertinya belum ada yang mau dirombak sidebarnya

    ReplyDelete
  17. Affiliasi Gratis 100%January 30, 2012 at 12:42 AM

    makasih infonya gan...

    ReplyDelete
  18. Rizkyzone.comJanuary 30, 2012 at 2:28 AM

    pakai sistem tabel ini yah, widih keren sangat dah

    ReplyDelete
  19. irfan handiJanuary 30, 2012 at 2:31 AM

    Saya baru tahu bisa diterapkan disidebar juga bro.
    Mantap deh.

    ReplyDelete
  20. TutusJanuary 30, 2012 at 9:50 AM

    wew, bisa ya? terimakasih infonya.. :)

    ReplyDelete
  21. tutorial blogJanuary 30, 2012 at 10:03 AM

    thank imponya sob.....bisa dijadikan percobaan nich...

    ReplyDelete
  22. Asis SugiantoJanuary 30, 2012 at 3:55 PM

    wah keren nih sob, ini untuk WP yach?? klau untuk blogspot gimana caranya membuat dua kolom sobat???

    ReplyDelete
  23. alkatro comJanuary 30, 2012 at 6:48 PM

    jadi lebih rapi neh kalo dibikin dua kolom, makasih tipsnya :)

    ReplyDelete
  24. noerdblogJanuary 30, 2012 at 7:01 PM

    Tengkyu infonya gan...

    ReplyDelete
  25. Abed SaragihJanuary 30, 2012 at 7:15 PM

    @noerdblog:

    Sama-sama mas :)

    ReplyDelete
  26. wahid sahiduJanuary 30, 2012 at 7:28 PM

    mantep bang tutornya kalau ginikan widgetnya jadi lebih rapi iya tho salam kenal bang happy blogging

    ReplyDelete
  27. nandobaseJanuary 30, 2012 at 8:32 PM

    very very cool

    ReplyDelete
  28. irfan handiJanuary 30, 2012 at 8:34 PM

    Bener Bang Nando.
    Cooooooooooooooool. . . .

    ReplyDelete
  29. BlogS of HariyantoJanuary 30, 2012 at 11:05 PM

    nice tutorial :-)

    ReplyDelete
  30. wiwin9January 30, 2012 at 11:06 PM

    kereenn nih....

    ReplyDelete
  31. 7 Tempat Wisata Favorit di Tahun 2012January 30, 2012 at 11:07 PM

    ilmu yg bermanfaat

    ReplyDelete
  32. rajacolekJanuary 30, 2012 at 11:17 PM

    tutorial dari mas abed selalu jitu dan bermamfaat.hehehe kunjungan sore mas abed......sukses selalu yaaah

    ReplyDelete
  33. Deni ArisandiJanuary 30, 2012 at 11:47 PM

    sangat membantu, terisma kasih...

    ReplyDelete
  34. JuwartoJanuary 31, 2012 at 2:59 AM

    Sangat menarik. Tetapi saya pribadi lebih suka sidebar tanpa scroll. Kalau mau menambah sidebar satu lagi bagaimana caranya mas?
    Terima kasih.

    ReplyDelete
  35. Alex©January 31, 2012 at 9:51 AM

    Kalau di satu sidebar ada dua widget berdampingan macam di bagian bawah blog ini, macam mana pula itu caranya, Bed? Apakah pakai theme tertentu atau memang diakali?

    ReplyDelete
  36. susantJanuary 31, 2012 at 8:02 PM

    ok gan ! blog dah terpasang di sidebar blgfriendq . salam kenal

    ReplyDelete
  37. gadgetboiJanuary 31, 2012 at 11:15 PM

    mantaff bisa dicoba di blog saya :D ...

    ReplyDelete
  38. Abed SaragihFebruary 1, 2012 at 12:10 AM

    @Alex©:
    Itu pakai themes zbench yang themenya bisa diset dari theme option dstu ada pilihan letak sidebarnya. :)

    Jadi sidebarnya udah bawaan themes nya.

    ReplyDelete
  39. Abed SaragihFebruary 1, 2012 at 12:12 AM

    @Juwarto:

    Maksudnya sidebar gman Pak?

    ReplyDelete
  40. arhiewordFebruary 1, 2012 at 1:02 AM

    gan kunjungan yah artikelnya keren mudah dimengerti,,,ane nyoba itu dulu tapi GATOT tar w coba lagi dah thx infonya

    ReplyDelete
  41. belajarmelihatFebruary 1, 2012 at 7:32 AM

    mantap Gan.. aku arus coba yang ini

    ReplyDelete
  42. FaisalFebruary 2, 2012 at 3:17 AM

    Kapan kapan bisa dicoba. Thx bang abed

    ReplyDelete
  43. faceloseFebruary 2, 2012 at 5:24 AM

    wah thnks banget yah gan... info menarik

    ReplyDelete
  44. Mukti EffendiFebruary 2, 2012 at 9:58 PM

    benar benar info yang bermanfaat bro. thanks sudah berbagi. saya tunggu artikel artikelmu yang lain

    ReplyDelete
  45. Iwan LemabangFebruary 8, 2012 at 10:42 PM

    makasih infonya Mas Abed... pasti akan ane terapkan pada blog ane :D

    ReplyDelete
  46. Iwan LemabangFebruary 14, 2012 at 1:50 AM

    oke, makasih infonya Mas Bro... ane lagi ngurusi blog ane yang di blogspot :), sekalian mendirikan blog baru, menggantikan blog di WP.com yang suspanded :-(

    ReplyDelete

Subscribe to: Post Comments (Atom)