Tutorial Tajuk Sidebar Berlatarbelakang / Background Yang Awesome

بِسْــــــــــــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم  Assalamualaikum and hello =D

(Saya akan menggunakan gambar di atas sebagai background sidebar saya)

(Selepas saya memasang fungsi background title sidebar saya)

Tutorial nie Anis nak publish dekat blog Anis sebab tak nak terlupa. Saya creditkan kepada Wan Hazel untuk codes nie. Tapi mula-mula saya nak bagitahu, dekat blog Wan Hazel untuk layout minima template je tau. Yang Anis punya nie khas untuk template Denim. Khas konon. 

Kalau nak codes untuk layout minima / minima template. Klik ----> LINK INI

Jadi mari kita mulakan tutorial ini. Mula-mula, korang kena design dulu background untuk tajuk sidebar korang. Kenalah design kawaii kawaii punya untuk jadikan blog korang comel macam CJ-7. hehe . Jangan lupa, save dalam format .PNG . taw. Penting tu.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUWpgG2dZW1aMw6yViBBF791BctMj5a-mmoN-SMqf8gS_pA7-n3Hk-ZCgelLev0OdtiRAmc_t5pZW7nGwWp7TD18MOTm9BhGLWggo3gsSWvzud71n0A9J7pQfBIUy0Qwj_QIXfsAvfttY/s1600/background.png

So, saya nak gunakan background itu. Boleh laa ambil kalau nak. 

Login Dashboard > Template > Edit HTML > Tick Expand Widget > Tekan f3/Ctrl+f 

Cari kod ini dulu :

/* Profile

Ok mesti dah jumpa kan? Copy kod bawah ni pulak .

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: #000000;
line-height:10px;
padding:8px;
margin-bottom:10px;
}
.sidebar h2 {
background:transparent;
background-image:url("LETAKKAN URL IMAGE");background-repeat:no-repeat; background-position:center center;
color:#ffffff;
padding:18px 0px 0px 46px;
font-weight:bold;
font-size:20px;
line-height:50px;
text-transform:none;
letter-spacing:1px;
text-align:left;
border:0px solid #070200;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
background:url("LETAK URL IMAGE") no-repeat 2px .08em;
margin:0;
padding:0 0 5px 10px;
margin-bottom:2px;
text-indent:3px;
line-height:10px;
}
.sidebar .widget, .main .widget {
border-bottom:0px dotted #faac04;
margin:0 0 0.5em;
padding:0 0 0.5em;
}
.main .Blog {
border-bottom-width: 0;
}
//Http://wanhazel.blogspot.com/
_________

LETAK URL IMAGE  - Letak lah korang punya URL GAMBAR background tadi.
18px 0px 0px 46px  - Yang nie korang boleh tukar warna biru tu je k. Korang kena try and error je tau. Tukar, preview, tukar, preview sampai lah menjadi =D

Preview dan kalau takde error, boleh lah SAVE .

kan dah jadi tue .. haa apa lagi. Jom try

 

---

THANKS FOR READING. DROP YOUR COMMENT PLEASE?

---