Tutorial Sidebar Title (Style 1)

بِسْــــــــــــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم

         Assalamualaikum. Tutorial ni telah direquest oleh Adik Ainira. Sidebar title yang dia nak adalah macam ini , P/S : Saya rasalah .

         Mula-mula, saya akan ajar untuk pengguna Template Designer . Disebabkan Ainira guna template designer saya buat tu je. Sila rujuk betul-betul supaya mudah faham dengan apa yang saya ajar. Tak faham, jangan malu-malu untuk bertanya.

          TEMPLATE DESIGNER ; ICON DI SEBELAH SIDEBAR TITLE

• Bukak Dashboard > Edit Html > Tick Expand Widget .

• Ctrl+f dan Cari tajuk sidebar korang contoh sila rujuk gambar di bawah ;

• Dah jumpa dah? Ok lepas tu tengok dekat bawah bawah kod sidebar title korang tu, ada tak nampak kod yang macam ni. Sila rujuk gambar

<h2 class='title'><data:title/></h2>

• Jumpa tak? Sila angguk kalau jumpa . Tak jumpa? Angguk geleng jugak. Haha gurau je lah. Okey, meh kita pergi ke step yang seterusnya !

• Copy kod bawah ni dan gantikan kod <h2 class='title'><data:title/></h2> tadi ! 

<h2 class='title'><img src='URL ICON COMEL'/><data:title/></h2>

• Merah tu sila tukar dengan icon korang sendiri. Cari di sini untuk lebih comel. Rujukan gambar ;

• Cuba preview, menjadi kan? Kan kan kan? Kalau nak yang sidebar title lain macam tu juga, ulangi step-step di atas :D Cuba senndiri lah yee.

          CUSTOMIZE SIDEBAR TITLE

• Now, kita nak jadikan sidebar title kita ada background. Untuk tutorial ini, saya guna background sprinkle. So, jom teruskan ;)

• Di dalam Edit Html, Ctrl+f dan cari kode :

h2 {

• Jumpa dah? Copy kode di bawah nii dan pastekan di bawah h2 {

border-top:0px dotted #eee; border-bottom:2px dotted #eee;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH2vhIvjUHRjzg2VYOUs0vcleDAnJq2n9B7xkEI81FRog1OJmo9AXSSH8vidCvCsH-PnEHOnyackJ-BLkAPNc2wXklGJD7cou2QJI4Y4mfhX28eiJCWnXD2YpqNXDQqOFP-DGNBvaJrCE/s1600/sparkles.png);
font: 10px 'trebuchet ms';
text-transform:uppercase;
padding: 2px;
text-align:center;
letter-spacing:5px;
font-style:bold;
color: #a9a9a9;
margin-top: 10px;
margin-bottom: 10px;
}

• Harap tutorial ni membantu. Dan tengok ni saya punya sidebar title :D

• Apa-apahal, silalah tanya :3 Salam blogger . bai

---

THANKS FOR READING. DROP YOUR COMMENT PLEASE?

---