Skip to content Skip to sidebar Skip to footer
Home / Tutorial Blog

Membuat border dan background pada widget sidebar

8 comments
Membuat border dan background pada widget sidebar

Cara membuat border dan background pada widget sidebar maksudnya seperti gambar di atas yaitu border warna merah dan background ribon+love. Sebelum dipasang border dan background gambarnya seperti di bawah ini:

Membuat border dan background pada widget sidebar

Langkah untuk membuat border dan backgroundnya adalah sebagai berikut:
1.Dashboard > Template > edit HTML
2.Expand Template Widget dan tick F3 atau CTRL + F serentak dan cari kode:
/* Widgets 
----------------------------------------------- */
3.Letakkan kode berikut ini di bawahnya 
.sidebar .widget {
text-align:center;-moz-border-radius: 5px;-webkit-border-radius: 5px;border:3px solid #EA0000;background: url(http://i1243.photobucket.com/albums/gg546/alice4ja/wall03_n_ribbon02_0003.gif);padding:10px;margin:0 0 1.0em;}

Yang aku tandai dengan warna merah itu bisa diubah sendiri menurut keinginan yaitu ukuran px, border atau kode warna nya. Dan untuk yang aku tandai warna biru itu url gambar/image juga bisa ditukar sendiri sesuai keinginan. Url image/gambar bisa diambil DISINI. Kalau ingin membuat background dengan warna biasa hanya tinggal mengganti url background dengan kode warna contohnya:
.sidebar .widget {-moz-border-radius: 5px;-webkit-border-radius: 5px;border:3px solid #EA0000;background: #FFFCEC;padding:10px;margin:0 0 1.0em;}
Kode di atas kalau diterapkan menjadi seperti gambar di bawah ini:

Membuat border dan background pada widget sidebar

4.Setelah itu tekan pratinjau dulu, baru simpan template.

8 comments for "Membuat border dan background pada widget sidebar"

  1. PSDinkApril 30, 2013 at 5:48 AM

    kalo cuma wau ganti warna pada salah sati widget aja gmn??

    ReplyDelete
  2. ALICEApril 30, 2013 at 7:10 AM

    kalau mau mengganti warna ya tinggal pergi ke kode warna dan memasukkan kode yang depan ada tanda # tapi harus meliputi keseluruhan widget sidebar gak boleh salah satu widget saja

    ReplyDelete
  3. UnknownOctober 14, 2013 at 10:36 AM

    makasi ilmunya kak, saya coba, mantap ......(maaf pemula)

    ReplyDelete
  4. UnknownOctober 14, 2013 at 10:40 AM

    bagaimana memberi warna judul widget harus beda satu dengan lainnya kak ?

    ReplyDelete
    Replies
    1. ALICEOctober 14, 2013 at 11:17 AM

      kalau ingin memberi warna ada judul widget kodenya ada di bawah /* Headings
      ini contoh kodenya
      h2 {
      background:#fff url();
      text-align: center;
      color:#000;
      .....
      kode di atas yang color itu tinggal mengganti kode warnanya sesuai dengan keinginan, itu adalah warna judul widget

      Delete
  5. Hanis AfifahMarch 24, 2014 at 4:26 AM

    thanks.. tutor awak menjadi kat blog saya!

    ReplyDelete
  6. nanangJune 7, 2015 at 2:03 AM

    setelah deberi border mengapa widget alexa nya hanya keluar tulisan alexa saja, mengapa ya?

    ReplyDelete
    Replies
    1. ALICEJune 7, 2015 at 8:33 AM

      widget alexa nya ditaruh bawah postingan nanti juga kelihatan

      Delete