Border Menarik untuk Widget Sidebar

Membuat tampilan blog jadi menarik merupakan salah satu cara untuk meningkatkan minat para pengunjung. Salah satunya adalah dengan mendesain tampilan widget blog. Berikut ini cara membuat border dengan background cantik pada sidebar blog seperti pada gambar dibawah ini.........

Ada 2 cara yang dapat kita gunakan, yaitu :

1. Dengan menambahakan kode HTML/Javascript. 

• Pertama login ke blog, kemudian pilih Template pada Dashbor

• Pilih edit HTML

• Cari kode (gunakan Ctrl+F untuk memudahkan pencarian)

/* Widgets ----------------------------------------------- */

• Setelah ketemu, copy kode dibawah ini dan pastekan tepat dibawah/setelah kode diatas.

.sidebar .widget {-moz-border-radius: 5px;-webkit-border-radius: 5px;border:3px solid #EA0000;background: #FFFCEC;padding:10px;margin:0 0 1.0em;}

Catatan :

• Yang ditandai dengan warna Merah #EA0000 = warna border; Biru #FFFCEC = warna background; dan Hijau merupakan ukuran border. Kita dapat menggantinya sesuai dengan selera masing-masing.

• Setelah itu, simpan template dan lihat hasilnya.

2. Cara Kedua, dengan mengedit kode default pada template blog yang kita gunakan.

Cara ini dapat dilakukan jika kita tidak menemukan kode yang ada pada cara 1 diatas pada template yang kita gunakan (cara ini yang saya gunakan). Berikut langkah-langkahnya :

• Seperti biasa, login ke blog kita dan pilih Template

• Pilih edit HTML/Javascript

• Cari kode .sidebar .widget { (lihat gambar dibawah)

• Kemudian hapus kode default tersebut dan ganti dengan kode berikut:

.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;}

setelah diganti :

• Untuk merubah warna font/huruf, cari kode .sidebar a { dan ganti kode warna sesuai selera kita. Dan untuk warna font/huruf ketika di lalui cursor mouse cari kode .sidebar a:hover { lalu ganti kode warna sesuai selera. (lihat gambar dibawah)

• Terakhir simpan template dan lihat hasilnya.

Catatan :

• Untuk kode yang berwarna biru merupakan URL gambar untuk background. Dapat diganti dengan url gambar lain yang kita inginkan.

• Kode yang kedua ini dapat kita terapkan juga pada cara pertama diatas.

• Sebelum menerapkan langkah-langkah diatas, ada baiknya backup dulu template kita. Untuk mencegah kesalahan-kesalahan yang mungkin terjadi.

Demikian cara membuat border dengan background menarik pada widget blog. Semoga artikel ini bisa dimengerti dan bermanfaat bagi para pembaca sekalian. Untuk lebih jelas, dapat dilihat juga pada link dibawah ini.

Sumber :

http://loveheaven07.blogspot.com/2013/02/membuat-border-dan-background-pada_19.html

Written by Unknown

General Contractor, Leveransir dan Instalatir. Alamat: Jl. C. Heatubun, Lorong Teratai, RT.003/-, Timika - Papua (99910)