Skip to content Skip to sidebar Skip to footer

Cara membuat kotak dan border untuk widget sidebar


Cara membuat kotak dan border untuk widget sidebar
Gambar setelah di edit
Agar blog kelihatan cantik/rapi mungkin bisa ditaruh dengan border yang cute, cute atau gak yang penting rapi nding xD. Selera tiap blogger juga berbeda-beda. Kalau baru memulai bikin blog pasti template bawaan blogger harus kita rombak sedikit demi sedikit agar kelihatan rapi, edit one by one. sehingga nanti visitor pun kalau mengunjungi blog kita gak langsung go out/kabur teorinya kayak gitu hehehe...Tutorial yang akan aku tuliskan sekarang adalah seperti gambar di atas jadinya yaitu cara membuat kotak dan border untuk widget sidebar.
Cara membuat kotak dan border untuk widget sidebar
Gambar sebelum di edit
Membuat kotak dan border untuk widget sidebar:
1.Login Dashboard > Template >edit HTML
2.Tick Expand Template Widget > CTRL + F cari kode berikut
/* Headings
Cara membuat kotak dan border untuk widget sidebar
3.Hapus kode dibawah  /* Headings sampai kode seperti ini 
/* Main
----------------------------------------------- */
setelah dihapus, tukar/ganti dengan kode berikut ini:
h2 {text-align:center;
font: normal 14px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;background:none repeat scroll 0 0 #FEBFDC;border-bottom: 3px solid #009999;padding:5px 8px;-moz-border-radius: 10px 10px / 10px 10px; border-radius: 10px 10px / 10px 10px;}

.sidebar .widget-content {
-moz-border-radius:0 0 10px 10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;border: 1px solid #FE80B9;padding:5px 8px;}
4.Tekan pratinjau/preview dulu untuk melihat error atau nggak, jadi atau tidak setelah itu kalau jadi baru simpan template.

Jadinya seperti gambar di bawah ini:

Cara membuat kotak dan border untuk widget sidebar
#warna merah itu kode warnanya dan bisa diubah sesuai dengan warna kesukaan anda.
#warna biru adalah ukuran px boleh diubah juga.
#warna light pink adalah jenis border solid dan bisa diubah sesuai keinginan misalnya diubah jadi dotted, dashed, groove, dll jadinya akan seperti gambar pertama/paling atas.

7 comments for "Cara membuat kotak dan border untuk widget sidebar"

  1. untuk memperlebar ukuran gimana sob?? mohon bantuannya

    ReplyDelete
    Replies
    1. hanya perlu menambah ukuran padding nya

      Delete
    2. Masalahnya lebar sidebar kanan dan kiri beda...gmna sob? trma ksh sblumnya :D

      Delete
    3. mending memakai sidebar 1 saja sebelah kanan atau kiri dengan masuk ke desainer template, nanti blog nya juga akan lebih kelihatan simple, desainnya juga akan menjadi mudah, dan memang dibutuhkan kesabaran hehe...

      Delete
  2. thank u .. cari dimana2 gk bisa2.. mampir disini baru bisa.. blog sya jd tmbh ok nih.. thanks ya ...

    ReplyDelete
  3. thankz for the tutorial..i'm really like it

    ReplyDelete