Cara Mengganti Background Judul Sidebar

Tutorial Blogspot : Cara Mengganti Background Judul Sidebar

Judul sidebar tentu kurang bagus dilihat jika tidak memiliki background, maka sangat penting untuk mengetahui cara mengganti background judul sidebar. Judul sidebar merupakan judul widget yang dimiliki oleh sebuah blogspot, biasanya berada di samping kanan ataupun samping kiri dan bahkan kedua sisi. Tergantung model template blogspot yang kita miliki.

Untuk mengganti background judul sidebar kita memerlukan sebuah gambar yang bisa kita modifikasi sesuai dengan selera dengan menggunakan software tertentu. Software yang paling banyak digunakan untuk memodifikasi sebuah gambar adalah potoshop.

Gambar untuk bakcground judul sidebar hendaknya sesuai dengan lebar sidebar template blogspot kita. Untuk mengetahu atau mengecheck lebar sidebar blogspot, kita bisa lihat di postingan Cara Mengubah Ukuran Header,Halaman,Sidebar Blogspot. Di postingan tersebut kita akan melihat kode HTML yang mewakili lebar sidebar blog kita.

Jika sudah mengetahu lebar sidebar blogspot, kita tinggal mendesain atau memodifikasi sebuah gambar sesuai dengan lebar sidebar blogspot kita. Dan untuk tinggi gambar tergantung dari kita, tapi biasanya ukuran tinggi biasa berkisar 20-50 pixel. Setelah gambar selesai dimodifikasi, selanjutnya diupload ke dalam hosting blog. Jika tidak memiliki hosting sendiri bisa menggunakan picasaweb.google.com. Setelah itu copy URL gambar contoh URL gambar 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy5iF694uU4WrzPoqNpVd4yU7SHt2ZZGSp1T5y5WZxM_OKg5lqISuidRtxxiCf5e3H5KRqax0ouWS47jcB1U_rvxEhvEqekxyn0uNQmRZxMqzkgRwftNKyCQ052oqRXjb0xTjP6klS9wGe/s1600/widgettitle-bg.png 

simpan di notepad.

Selanjutnya masuk ke blogspot, pilih template, edit HTML kemudian klik lanjutkan. Kemudian cari kode berikut ini :

.sidebar h2 {        

Jika sudah ketemu perhatikan di belakang kode .sidebar h2 { . Biasanya banyak kode yang mengikuti kode ini tergantung dari template blogspot. Misalnya kode di template blogspot kita seperti ini :

.sidebar h2 { 

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTPxCmQ7PUuAlscRquFZhmmshGJ04mysaBdDWwp1lU5gOzPD3G7NAvKssnhkDIUfQtjUAjMkkR8O-gHa_xVReZnpIZfqa-bDjmKGOEftgCWSu5aDq6qnpxu_d5ZlDOKpzfZWFuSHPBxI/s1600/sidebar+title1.png )repeat-x; 

color: #FFFF66; 

font-size: 11px; 

font-family: Georgia; 

font-weight: strong; 

margin: 0px 0px 5px 0px; 

padding: 3px 0px 3px 10px; 

text-align:center; 

}

Maka kita tinggal mengganti alamat URL ini 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTPxCmQ7PUuAlscRquFZhmmshGJ04mysaBdDWwp1lU5gOzPD3G7NAvKssnhkDIUfQtjUAjMkkR8O-gHa_xVReZnpIZfqa-bDjmKGOEftgCWSu5aDq6qnpxu_d5ZlDOKpzfZWFuSHPBxI/s1600/sidebar+title1.png

 ganti dengan alamat URL gambar yang tadi kita upload. 

Setelah diganti tinggal klik save dan lihat hasilnya.

Penjelasan :

Jika gambar yang kita tadi upload sudah sesuai lebar dan tinggi yang diinginkan, maka ganti kode repeat-x menjadi no-repeat.

Jika gambar yang kita upload memiliki tinggi 30 pixel dan lebar 1 pixel, maka kode repeat-x harus ditambahkan.

Jika gambar yang kita upload memiliki tinggi 1 pixel dan lebar 300 pixel (sesuai lebar sidebar) maka kode repeat-x diganti menjadi repeat-y.

Kode repeat artinya gambar tersebut akan diulang sesuai dengan sampai tempat meletakkan gambar tersebut penuh. 

Repeat-x = diulang secara horizontal

Repeat-y = diulang secara vertikal

Demikian tutorial blogspot cara mengganti background judul sidebar