Cara Untuk Hias Title Di Sidebar

Assalamua'laikum..

Hi awak..!

Hari ni Reen nak kongsi cara bagaimana menghias sidebar kat blogspot macam gambar di bawah.

Langkah Pertama

Cari gambar yang korang nak hias kat Google atau boleh buat sendiri. Reen bagi contoh untuk cari kat Pak Cik Google.

Dah jumpa? Kalau dah.. Copy gambar then paste kat Paint untuk edit. Jadikan beso macam gambar kat bawah untuk sidebar. Agak-agak je. Lepas tu save.

Langkah Kedua

Create new post then upload gambar yang dah di edit tadi. Then biarkan jap.

Langkah Ketiga

Click template > Customise > Advanced > Add CSS. Copy dan paste code bawah ni.

.sidebar h2 {
background-image:url(http://i11.photobucket.com/albums/a165/yourusername/sidebar.jpg~original); /*your photobucket URL*/
background-position: top center;  /*centering the bg behind the text*/
background-repeat: no-repeat; /*this is a non-repeating image, we only want it displayed once*/
height: 53px; /* the height in pixels of your background image */
color:#000000; /* This is your font hex color */
font-size: 18px;  /* This is your font size */
text-align: center;  /* Centers the title*/
text-transform: uppercase; /* This makes all of the letters capitals. lowercase is the opposite. optional. */
padding-top: 20px /* this height works well for me and pushes the title down */
}

Langkah Keempat

Right click kat gambar > click copy image address

Replace/paste kat code yang Reen highlight seperti gambar di bawah.


















Keputusannya akan jadi macam ni (Refer box warna kuning). Dalam gambar kat bawah ni perkataan yang ada kat sidebar nampak tinggi sangat. Ikuti langkah kelima.

Langkah Kelima

Yang Reen highlight warna biru seperti gambar kat bawah, awak tukar yang "1px" ke no lain.

Gambar bawah ni Reen dah tukar ke 16px. Hasilnya...

Adakah awak dah faham cara untuk hias title sidebar awak?

Kalau kurang faham, komen kat bawah ya. Nanti Reen terangkan sampai faham.