Blogger: Custom Sidebar Title

Hi semua, tutorial ni disediakan khas kepada mereka yang nak buat custom sidebar title. Dekat google dah banyak website yang tunjuk cara-cara camni. So kalau korang tak faham tutorial yang ni, search tutorial lain kat pakcik google ye. Oh yeah! Tutorial ini akan tunjukkan cara untuk menghasilkan custom sidebar title.

1. Login akaun Blogger korang, klik Layout > Page Elements.

2. Klik pada Add a Gadget.

3. Biskoot pilih HTML/Javascript, korang boleh pilih yang lain.

4. Pada Title, biskoot masukkan 'Custom Sidebar'. Seterusnya klik Save.

5. Lepas dah create gadget baru, klik Save.

6. Seterusnya pergi ke Layout > Edit HTML.

7. Tick pada Expand Widget Templates.

8. Dekat browser korang, klik Edit > Find (Ctrl + F).

9. So nanti muncul satu bar kat browser korang. Taip title gadget tadi, biskoot punya 'Custom Sidebar'.

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

10. Lepas dah jumpa gadget tu, skroll kod tu kebawah sedikit. Cari kod kat atas ni.

<img border="0" src="http://img44.imageshack.us/img44/1539/customsidebar.png" />

11. Tukarkan kepada kod atas ni. Jangan lupa letak korang punya url imej kat bahagian yang diboldkan tu. Dah siap, klik Save Template.

Sebelum

Selepas

Walla ammah! Dah bolehlah tengok hasilnya kat blog korang. Pastikan lebar imej korang tak besar daripada lebar sidebar supaya sidebar korang tak berselerak. Sidebar biskoot lebar maksimumnya 440px, jadi biskoot buat lebar imej tu ngam-ngam choi je. Design sidebar korang pula kena la smart macam biskoot punya ni (sila abaikan ayat sebelum ni). Jika korang ada pertanyaan atau pendapat mengenai tutorial ini, sila tinggalkan di bahagian komen. :)

Update 6/10 - Ramai yang tak dapat letak imej kat gadget follower, akhirnya biskoot dah jumpa penyelesaiannya. Korang perlu copy paste kod ini,

.sidebar .Followers h2{
text-indent: -9999px;
background-image: url(IMAGE URL HERE);
title: block;
width: 250px;
height: 40px;
}

ke dalam bahagian css selepas kod ini,

<b:skin><![CDATA[

Jangan lupa untuk tukar IMAGE URL HERE kepada url imej korang dan ubah setting width dan height kepada saiz imej yang digunakan. :)

Kongsi artikel ini dengan kawan di Facebook, tekan butang 'Like'. TQ. :)