بِسْــــــــــــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم
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;• Harap tutorial ni membantu. Dan tengok ni saya punya sidebar title :D
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;
}
• Apa-apahal, silalah tanya :3 Salam blogger . bai
No comments:
Post a Comment