Tutorial : Ubah Tajuk Sidebar kepada Bentuk Imej

Tutorial di rekues oleh Nur Solehah. Dah ramai yang minta ajar sebenarnya, tapi asyik tak sempat nak buat. So, hari ni belajar bebaik ye ;)

Ouh ade yang tak faham lagi apa fokus kita hari ni? Ini dia. Macam mana nak jadikan Gambar 1 kepada Gambar 2. Tengok anak panah tu ye.


Gambar 1


Gambar 2

Mula-mula kenala tau saiz kelebaran sidebar blog kita berapa. Tak tau nak tengok saiz? Ini caranya.

Dashboard / Layout / Edit HTML

Cari kod ini (Ctrl + F)

#sidebar-wrapper {
width: 260px;

Baik, ini bermakna saiz sidebar blog Mommy Pinky ialah 260px
Maka buat la imej bersaiz 260px. Buat lebih kecik tak pe asalkan jangan lebih. Haa, time ni guna la kepakaran korang design ye. Tak kesah la buat guna photoshop ke photoscape ke. Mommy Pinky guna dua-dua sekali Photoshop CS5 & PhotoScape. Ngeh Ngeh.Ini hasil terbaru, baru je buat tadi. Simple jek, sebab suka simple. Padahal tak reti design ngaku je la (-.-)

Macam biasa la, bila dah siap design pegi la upload pic korang tu di photobucket ke, imageshack ke untuk ambil Url Image. Tak reti? Boleh rujuk SINI ye.

Baik, cara masukkan imej

Dashboard / Layout / Edit HTML / Download Full Template
(penting sebagai backup!)


Sila tick Expand Widget Templates

Sekarang kena cari kod Tajuk Sidebar kita. Sebagai contoh yang Mommy Pinky buat, untuk tajuk Frenzz. Tekan Ctrl + F dan taip Frenzz.

*sila taip dengan sama sebijik macam tajuk yang korang buat tu. Kalau huruf besar, kena buat huruf besar la ek. Kalau tak, memang tak jumpa. Kod yang korang akan jumpa adalah seperti berikut.

<b:widget id='HTML4' locked='false' title='Frenzz' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class="title"><data:title></data:title></h2>
</b:if>

Tukar kod ini,

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

dengan kod imej ini,

<img border='0' src='http://img257.imageshack.us/img257/1/frenzz.png'/>

Hasil kod seperti dibawah

<b:widget id='HTML4' locked='false' title='Frenzz' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<img border='0' src='http://img257.imageshack.us/img257/1/frenzz.png'/>
</b:if>

ini Mommy Pinky punya. Jangan ambik, nanti mommy gigit. Nak mommy buatkan? Singgit seketul >__< !!

Ok siap. Klik Peview, dah ok, bolehla Save Template

Untuk follower widget mungkin akan ada problem. Next tutorial je ok ;)
UPDATE : untuk tajuk follower di SINI