Saturday Jul 31
Feb
14/10
Membuat Dynamic Sidebar
Last Updated on Sunday, 14 February 2010 08:42
Written by alief
Sunday, 14 February 2010 08:42

Pada saat memilih thema dengan model majalah cetak ini, pembuatnya tidak menyertakan widget ready pada thema buatanya. Nah karena aku merasa kurang semarak rasanya sebuah blog tanpa adanya widget, makanya aku menambahkan dua buah widget area, yang berada di sidebar dan dibagian bawah.
Karena sangat tidak nyaman tentunya bila ingin menambah atau mengganti widget saja harus berkali-kali membongkar susunan theme.

Untuk membuat dynamic sidebar atau sebuah theme menjadi widget ready sebenarnya tidak lah susah. Yanng perlu dimiliki adalah kemauan membaca dan mencoba. Hanya itu saja modalnya, dan tentunya juga adalah sebuah komputer yang terhubung ke internet, walaupun sebenarnya menggunakan ponsel juga bisa, tapi dengan tampilan yang sedikit kacau…. :)

Sebenarnya begitu banyak panduan membuat dynamic sidebar diluar sana kalau kita mau bertanya pada eyang google, tapi kalau mau yang berbahasa indonesia, mungkin yang aku tulis ini bisa sedikit membantu, atau malah membuat semakin bingung, tapi yang jelas artikel ini aku buat sebagai catatan pribadi, kalau saja ntar aku mau mengoprek theme lagi. Dan insya allah, memang sedang mau membuat theme dari awal sendiri, karena ebook dan panduanya sudah ada, tinggal nunggu waktu luang untuk prakteknya saja.

BAlik lagi ke masalah membuat dynamic sidebar, yang harus dilakukan adalah menambahkan kode berikut pada bagian functions.php. Bila file tersebut belum ada, jangan ragu-ragu untuk membuat dan menguploadnya kedalam direktori theme yang mau ditambahkan sidebarnya.

<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(‘name’=>’sidebar1′,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
));
register_sidebar(array(‘name’=>’sidebar2′,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
));
?>

Dari kode diatas, kita akan membuat dua buah sidebar, dan teman-teman bisa menambahkanya bisa merasa kurang atau merasa masih memiliki ruang yang cukup dalam blognya dengan menambahkan kode

register_sidebar(array(‘name’=>’sidebarxx’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
));

sebelum tanda ?>. Dengan penambahan kode tersebut pada functions.php, akan memunculkan widget area pada tab widgets saat kita akses dari dashboard, tapi widget yang sebenarnya belum bisa muncul pada halaman blog kita.

Langkah berikutnya adalah menambahkan kode yang bisa memunculkan widget yang kita pasang pada front end blog kita, agar para pengunjung juga bisa menikmatinya. Penempatanya terserah teman-teman, tidak harus benar-benar berada di sidebar. Untuk kasusku, aku menempatkanya pada sidebar dan di atas footer. Berikut ini kodenya

<?php if ( !function_exists(‘dynamic_sidebar’)
|| !dynamic_sidebar(‘sidebar1′) ) : ?>
<?php endif; ?>

Karena dalam functions.php kita membuat dua slot sidebar, maka kita bisa membuat sebuah kode lagi yang sama persis dengan kode di atas, hanya saja bagian (‘sidebar1′) nya diubah menjadi (‘sidebar2′) atau sesuaikan dengan nama yang telah dimasukan dalam functions.php tadi.
Ingat selalu untuk mengeklik tombol update file setelah selesai mengedit file.

Coba lihat kembali pada kode yang ada pada functions.php yang baru saja dibuat. Pada bagian before_widget dan after_widget tidak memiliki nilai atau pengaturan. Hal ini bisa dilihat dengan tidak adanya nilai diantara tanda ‘ dan ‘ yang terletak setelah tanda =>. Kita bisa memasukan nilai seperti pengaturan huruf dan paragraf.

Sedangkan untuk title, memakai heading h3, untuk itu pastikan setting untuk heading h3 sudah tersedia di css. Buka style.css dan bila ternyata belum ada tambahkan pengaturan untuk heading h3 tersebut agar hasilnya begus. Untuk blog ini sendiri memakai pengaturan sebagai berikut

h3 {
font:1.1em Arial;
font-weight:bold;
background:#cc0000;
color:#fff;
margin:10px -6px 5px -20px;
padding:3px 10px;
}

Untuk setting tersebut temen-temen bisa berkreasi sendiri agar lebih sesuai dengan tampilan thema yang sedang dipakai.

Yups…., itu adalah caraku untuk membuat dynamic sidebar, kalau ada kesalahan dan kekurangan mohon masukanya.

Ingin langganan?Masukan alamat emailmu, dijamin tanpa spam


Join FriendFinder - Find Your Special Someone!

  • Share/Bookmark

79 Comments
  1. CommentsriFFrizz   |  Sunday, 14 February 2010 at 21:29

    tips yang sip

    [Reply]

    alief Reply:

    @riFFrizz, hanya sebuah catatan kecil,agar saat pengen ngedit blog gak perlu tanya tanya mbah google lagi,tapi langsung buka blog sendiri

    [Reply]

  2. Commentsfanz   |  Monday, 15 February 2010 at 15:25

    sip dah :)

    [Reply]

    alief Reply:

    @fanz, oke lah kalo beg beg beg begitu

    [Reply]

  3. Commentsbayuputra   |  Monday, 15 February 2010 at 16:56

    waw keren mas…….

    [Reply]

    alief Reply:

    @bayuputra, sip

    [Reply]

  4. Commentsannosmile   |  Monday, 15 February 2010 at 17:46

    untung themes blog saya udah widget ready
    nggak susah2 ngedit themesnya..
    hehehe..mungkin nanti memerlukannya..makasih infonya

    [Reply]

    alief Reply:

    @annosmile, tama tama kang

    [Reply]

    annosmile Reply:

    @alief, akhirnya saya mencoba ini juga
    klo punya saya kok ada register sidebar (3) di thmes option ya bro
    klo mau nambah satu dynamic sidebar lagi berarti tinggal diganti angkanya jadi (4) ya bro

    [Reply]

    alief Reply:

    @annosmile, setauku sih, seharusnya kita nambah skrip lagi yang sama dengan skrip sebelumnya, hanya saja namanya yang dibuat berbeda, untuk membedakan saat mengedit di dashboard, bukan mengganti yang semula (3) menjadi angka (4)

    [Reply]

  5. CommentsReza Fauzi   |  Monday, 15 February 2010 at 20:44

    wah hebat tentang masalah php toh, hehe mantep deh

    [Reply]

    alief Reply:

    @Reza Fauzi, bukan hebat mas,tapi kebetulan aku lagi butuh,trus membaca dan mencoba menulisnya disini biar gak kelupaan lagi

    [Reply]

  6. Commentsmuhammad zakariah   |  Tuesday, 16 February 2010 at 06:50

    weww.. mantap gan.. thanks infonya.. moga bermanfaat.. :mrgreen:

    [Reply]

  7. Commentsalief   |  Tuesday, 16 February 2010 at 09:02

    @muhammad zakariah, amin

    [Reply]

  8. CommentsdafiDRiau   |  Tuesday, 16 February 2010 at 13:16

    Siiiip scriptnya tinggal copas aja,
    Izin copas script mas

    [Reply]

    alief Reply:

    @dafiDRiau, silakan

    [Reply]

  9. Commentsrumah blogger   |  Tuesday, 16 February 2010 at 13:17

    waahh ilmu yg bermanfaat nic, langsung simpan ya..

    [Reply]

    alief Reply:

    @rumah blogger, monggo

    [Reply]

  10. Commentssabirinnet   |  Tuesday, 16 February 2010 at 13:18

    nambah ilmu nambah rejeki, sukses ya mas

    [Reply]

    alief Reply:

    @sabirinnet, terima kasih,sukses buat kita semua

    [Reply]

  11. CommentsZo   |  Tuesday, 16 February 2010 at 15:52

    Dudu pengguna wordpress, bingung rep koment opo – kukur kukur -

    [Reply]

    alief Reply:

    @Zo, sing penting wes komen

    [Reply]

  12. Commentsalief   |  Tuesday, 16 February 2010 at 19:24

    @sabirinnet, terima kasih,sukses buat kita semua.

    [Reply]

  13. Commentsndop   |  Tuesday, 16 February 2010 at 20:33

    sulu pernah iseng iseng nambahin sidebar kayak begini… jadinya error dan cari template baru lagi… hehehe…

    makasih mas infonya.. sangat membantu..

    [Reply]

    alief Reply:

    @ndop, sebelum melakukan perubahan apapun memang ada baiknya memiliki file back upnya mas

    [Reply]

  14. Commentssauskecap   |  Tuesday, 16 February 2010 at 22:39

    wah boleh juga nih tipsnya… kalau saya memasukkannya kadang manual, langsung ke file templatenya.. ga bikin sidebar baru….

    [Reply]

    alief Reply:

    @sauskecap, wah,pastinya repot ya

    [Reply]

  15. CommentsMamah Aline   |  Tuesday, 16 February 2010 at 23:23

    infonya mantap bisa nambah ilmu widget saya, makasih… ;-)

    [Reply]

    alief Reply:

    @Mamah Aline, semoga berguna bagi kita semua

    [Reply]

  16. CommentsZian X-Fly   |  Wednesday, 17 February 2010 at 15:40

    Dynamic sidebar itu apaan sih?

    [Reply]

    alief Reply:

    @Zian X-Fly, wah,kurang tau juga sie.tapi katanya sie dengan dynamic sidebar bisa bisa kostumisasi sidebar dengan mudah lewat dashboard,tanpa perlu lagi edit theme

    [Reply]

  17. Commentsbayuputra   |  Wednesday, 17 February 2010 at 21:06

    mesti banyak belajar lagi nih mas untuk memahaminya … maklum saya masih pemula sekali jadi belum banyak mengerti………

    [Reply]

    alief Reply:

    @bayuputra, sebenernya saya juga masih amat sangat pemula kok….

    [Reply]

  18. Commentsalief   |  Wednesday, 17 February 2010 at 21:12

    kalau mas bayu ajah pemula, trus saya ini gimana ya???

    blogger abal abal… :)

    [Reply]

  19. CommentsJidat   |  Thursday, 18 February 2010 at 11:55

    Hem. . . Kalo saya sih masalah buat sidebar oke-oke saja. . . bisa juga buka blog ini. . . kalo saya suka untuk tampilan awal (home) dan postingan (single post) itu berbeda…. Jadi kalo buka home http://jidatbaok.com sidebarnya berbeda dengan http://jidatbaok.com/yuda-taufiqurrahman.html untuk mempercepat load. . . Thn mas alief. . . sukses ngeblognya. . . :mrgreen:

    [Reply]

    alief Reply:

    @Jidat, sukses untuk kita semua

    [Reply]

  20. CommentsKurotsuchi   |  Saturday, 20 February 2010 at 22:38

    wah… ini maksudnya bikin dynamic widget kah? saya penasaran pengen utak-atik widget, tapi buta untuk urusan coding yang sedemikian ini :|

    [Reply]

    alief Reply:

    @Kurotsuchi, kalau yang dimaksud dinamic widget adalah widget yang berubah-ubah sewndiri, bukan mas…..

    [Reply]

  21. Commentswahyu   |  Sunday, 21 February 2010 at 21:15

    wa kapan2 boleh dicoba ini pak :)

    [Reply]

    alief Reply:

    @wahyu, yo monggo….

    [Reply]

  22. Commentsphiy   |  Sunday, 21 February 2010 at 22:24

    jadi inget masa-masa aku pake wordpress.org Karena males maintenance-nya, aku balik ke wordpress.com deh, hehe :mrgreen:

    salm kenal, trimakasih udah mampir ke blogku ;)

    [Reply]

    alief Reply:

    @phiy, wah,bisa dibilang downgrade dong

    [Reply]

  23. Commentselizer.web.id   |  Monday, 22 February 2010 at 10:20

    waaa mantaafff mas tips nya…

    [Reply]

    alief Reply:

    @elizer.web.id, sekedar catatan agar gak kelupaan lagi

    [Reply]

  24. Commentssawali tuhusetya   |  Monday, 22 February 2010 at 10:54

    tips yang pendek dan memikat. perlu saya coba juga nih. saya juga seneng banget sih theme berpenampilan magazine. matur nuwun, mas.

    [Reply]

    alief Reply:

    @sawali tuhusetya, simple dan mudah dijelajahi

    [Reply]

  25. Commentsmuhammad zakariah   |  Tuesday, 23 February 2010 at 20:35

    weew.. keren gan.. mantap.. semangat dan terus berkarya.. :razz:

    salam hangat.. ;-)

    [Reply]

    alief Reply:

    @muhammad zakariah, semangat untuk kita

    [Reply]

  26. Commentsdhedhecuit   |  Friday, 26 February 2010 at 16:39

    gak telaten garai au :mrgreen:

    [Reply]

  27. Commentsario saja   |  Saturday, 27 February 2010 at 11:05

    :shock: contohnya gimana bos ?

    [Reply]

  28. Commentshanif IM   |  Sunday, 28 February 2010 at 12:23

    hasilnya2? wah… bingung saya membayangkannya sedinamyc apa nih? hehe :grin:

    [Reply]

    alief Reply:

    @hanif IM, hasilna ya kayak gini mas

    [Reply]

  29. Commentsalief   |  Sunday, 28 February 2010 at 16:54

    @ario saja, contohnya ya blog ini.bandingkan dengan aslinya

    [Reply]

  30. CommentsKhatulistiwa   |  Sunday, 28 February 2010 at 20:09

    hehe…mantap neh, berani otak -atik..saya belum berani neh..kudu banyak belajar.

    [Reply]

    alief Reply:

    @Khatulistiwa, kuncinya hanya dua kok,keberanian dan kemauan

    [Reply]

  31. CommentsIrawan   |  Monday, 01 March 2010 at 23:56

    untung templatenya dah support dynamic sidebar…. btw kok jarang update nih…

    [Reply]

    alief Reply:

    @Irawan, iya nie,lagi banyak kesibukan di dunia ofline

    [Reply]

  32. CommentsMuhammad Ridha Tantowi   |  Tuesday, 02 March 2010 at 01:11

    Great Tutorrr! Kebetulan aku lagi nyoba wp.. :)
    Salam kenal ya mas……. ^_^

    [Reply]

    alief Reply:

    @Muhammad Ridha Tantowi, salam kenal pula mas

    [Reply]

  33. Commentskakve-santi   |  Tuesday, 02 March 2010 at 11:52

    bat wp ya..?

    [Reply]

  34. Commentsalief   |  Tuesday, 02 March 2010 at 14:52

    @kakve-santi, betul banget

    [Reply]

  35. Commentsbudi mulyono   |  Tuesday, 02 March 2010 at 15:45

    Lumayan nieh buat blog saya yg wp. Salam hangat dari Balikpapan.. ;-) ;-) ;-) ;-)

    [Reply]

  36. CommentsZaiful Anwar   |  Wednesday, 03 March 2010 at 12:39

    Kalau masalah php saya kurang begitu mengerti mas.

    [Reply]

    alief Reply:

    @Zaiful Anwar, seolah alah aja nie,sebenernya juga gak ngerti sama sekali

    [Reply]

  37. Commentsandi   |  Thursday, 04 March 2010 at 06:40

    thanks sudah share infonya sob.
    salam,

    [Reply]

    alief Reply:

    @andi, sama sama mas

    [Reply]

  38. Commentsvany   |  Thursday, 04 March 2010 at 08:43

    wah, msk blog ini serasa baca majalah deh…. :D

    [Reply]

    alief Reply:

    @vany, :)

    [Reply]

  39. Commentsmasiqbal   |  Thursday, 04 March 2010 at 22:41

    nice tips, terima kasih sudah mau berbagi

    [Reply]

    alief Reply:

    @masiqbal, cuma caattan pribadia aja mas

    [Reply]

  40. CommentsMuji   |  Friday, 05 March 2010 at 08:39

    soal gituan nggak ngeh ;-)

    [Reply]

  41. Commentsalief   |  Friday, 05 March 2010 at 11:39

    @budi mulyono, monggo,salam kenal juga dari tabalong

    [Reply]

  42. CommentsDidien®   |  Saturday, 06 March 2010 at 14:33

    ilmu yg bermanfaat…trimakasih sudah berbagi dengan kita…
    nanti saya coba praktekin deh..

    salam, ^_^

    [Reply]

  43. CommentsCaride™   |  Saturday, 06 March 2010 at 14:35

    memang perlu mencoba dan jangan takut gagal jika ingin berimprovisasi..
    thx tutornya bermanfaat kawan :smile:

    [Reply]

    alief Reply:

    @Caride™, sebenernya ini bukan tutorial kok, cuma catatan pribadi biar gak kelupaan saat mau ngoprek theme

    [Reply]

  44. Commentsd-Gadget™   |  Saturday, 06 March 2010 at 14:36

    saya masih cukup gaptek dg ini semua, tp terimakasih artikelnya sedkit memberi wawasan tambahan buat saya :grin:

    [Reply]

    alief Reply:

    @d-Gadget™, ah…, tapi soal open source aku masih kalah sam a sampean… : :)

    [Reply]

  45. CommentsajurNA   |  Monday, 07 June 2010 at 18:14

    ;-) mantap mas, kapan-kapan tak coba ach.

    [Reply]

  46. Commentsohdediku   |  Sunday, 13 June 2010 at 17:43

    Mangstaab gan… :D

    Nitip Lapak yaak :P
    http://ohdediku.wordpress.com/2010/06/13/semarakan-piala-dunia-2010-ala-linux

    [Reply]


Leave a Reply