Page Rank Check
[close]

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. :)

Skip to comment form | 35 Comments:

Ahmad Tajuddin Abdullah said on Monday, May 31, 2010

bro,cam url gambar tuh,picasa pun boleh kan???
aku dah try wat tapi x dapat..x tau nape...gambar tuh x kuar,,

░♥si lampu neon♥░ said on Monday, May 31, 2010

woww camtu rupenye..nice la sifu!

Nina Nurziana said on Monday, May 31, 2010

nanged! ;)

Emora Valeria said on Monday, May 31, 2010

eh maseh!dah lame mencari !tq2~

edora deon said on Monday, May 31, 2010

nice! thnks biskoot .will be work for it :)

Miro Armyrule said on Monday, May 31, 2010

xsia2 aku follow blog Biskoot ni...ahahaha..komen sambil makan biskut kering di tgh ari yg hening ini..

Biskoot said on Monday, May 31, 2010

@tajudin - picasa boleh guna. biskoot slalu upload kat post, pastu amik link original imej yang kat tu bukan kat .

-------------------------

@neon - tocey.. tocey.. :D

-------------------------

@nina - tq cik nina. :)

-------------------------

@emora - welkam2. blh bt rekues klu nak.

-------------------------

@edora - hehe.. ;))

-------------------------

@miro - sedap nampak makan biskut, hulur2 kt sini sikit. haha.

Puan nadxoxo said on Monday, May 31, 2010

wow!! inilah yang kucari2 selama ini! terima kasih :)

Whitey Mommy said on Monday, May 31, 2010

terima kasih bro... hehe step by step... u r ery good tutor... put u in my link... thank you so much!

♥ana centap♥ said on Monday, May 31, 2010

biskut, bagus la..
ni lah ana carik.

tekiu;;)

Emora Valeria said on Monday, May 31, 2010

bro,untuk follower punye xleh letak la..dengan post masuk.

Biskoot said on Monday, May 31, 2010

@pn.nadxoxo - sama2. :D

-------------------------

@whitey.mommy - sama2. biskoot akan cuba yg tbaik. :)

-------------------------

@ana - sama2. :D

-------------------------

@emora - follower punya takleh letak? konfem ke ni.. hurm, patutnya boleh klu replacekn title tu. cuba double cek tajuk 'pembaca setia'. er.. post masuk yg mana satu?

.yANa. said on Monday, May 31, 2010

url image tu ape??

mindbreaking said on Tuesday, June 01, 2010

nice blog u have...

Biskoot said on Wednesday, June 02, 2010

@yana - url image tu adalah direct link ke imej. direct link ke imej adalah url imej. er.. faham tak? hehe.

--------------------------

@mindbreaking - thx. :)

++tHe LoLLynIE++ said on Wednesday, June 02, 2010

niceeee~~~
suke2...

Anonymous said on Wednesday, June 02, 2010

zaim ajr ak gak..hehe..aku x reti sgt mende2 nie tp nk sgt tau!!..hehe...

afiq mawi said on Wednesday, June 02, 2010

zaim ajr ak gak..hehe..aku x reti sgt mende2 nie tp nk sgt tau!!..hehe...

.yANa. said on Wednesday, June 02, 2010

adeyh hai..xpaham!!

Hasrol Nizam said on Sunday, June 06, 2010

oho..macam ni ke..nice tips.. :)

Whitey Mommy said on Tuesday, June 08, 2010

bro, untuk follower dah letak banyak kali tapi tak berjaya juga.. setiap kali save bila check tempalte balik apa yang kita save tu terus jadi kod yang asal sebelum save... nape ek?

Biskoot said on Thursday, June 10, 2010

@lollynie - tq. godek2 lg blog ni. hehe :)

----------------------------

@anon&afiq - meh la biskoot ajar. msg2 la slalu ya. ;;)

----------------------------

@yana - er.. mana yg cik yana xfaham? huhu.

----------------------------

@hasrol - tq. ada lagi tutorial lain yg best, sila tekan arrow dibawah. :)

----------------------------

@whitey.mommy - biskoot da letak kat post cara nak atasi masalah tu. semoga berjaya ya. :)

Whitey Mommy said on Thursday, June 10, 2010

en biskoot... dah ulang banyak kali dah... tapi masih juga tak berjaya... kenapa...:(

Emora Valeria said on Thursday, June 10, 2010

biskoot..takleh gak ni..huhu

Biskoot said on Thursday, June 10, 2010

@whitey.mommy - erm, da baca update terbaru tutorial ni? biskoot tgk dlm page kod blog cik whitey.mommy takde pun kod css tu. cuba letakkan dahulu, biskoot akan pantau.

--------------------------

@emora - biskoot da tengok source kod blog emora. gadget followers emora ada kat bahagian entri dan bukan di sidebar. jadi dkt ayat 'sidebar' dalam kod css tu, cik emora tukar kpd 'main'. harap2 boleh la ye.

Whitey Mommy said on Thursday, June 10, 2010

maaf ya en biskoot... susahkan je.. btw macam mana nak tengok kod ccs orang lain? ;)) kalau en. biskoot tahu... tolong la checkkan template saya tu ada masalah tak? sebab gambar emoticon kat comments macam en bis ni tak kuar... anyway saya dah masukkan balik n buat apa yang en bis cakap tu... tapi still tak jadi... kalau tak bleh juga tak pe... saya nak letakkan followers tu same kategory dengan my friends... hehe En.biskoot ada link saya kan? hehe saya punya Url dah tukar... huhu tak tahu akan effect semua benda... dah huru hara... nak tukar balik pulak sebab dah ramai pulak yang tahu... Whiteymommy.blogspot.com hehe maaf macam entri pulak saya punya koment ni... thanks again for helping me :)

Whitey Mommy said on Thursday, June 10, 2010

eh2... tetiba dah jadi pulak lepas bag komen ni...:))

Whitey Mommy said on Friday, June 11, 2010

tadi ok... tapi gambar title tu repeat... bila saya tukar ke no-repeat dia tak kuar pulak...:(

Whitey Mommy said on Friday, June 11, 2010

ala bro... dia jadi repeat la... bila buat no-repeat jadi tak nampak... nape...

Whitey Mommy said on Friday, June 11, 2010

dah dapat idea..sebab width yang bro bagi 250px nampak repeat kan? hehe saya ubah jadi 190px...terus tak nampak... tapi tak tahula cara ni betul tak?

suFiah Y said on Friday, June 11, 2010

nanti nk try wat la..hikhikhik ;))

Biskoot said on Friday, June 11, 2010

@whitey.mommy - klu nak tgk kod css org lain, boleh klik kat browser(firefox) punya View > Page Source. biskoot da tgk kod css blog, tapi tak jumpa pun apa2 kod yang serupa macam emoticon yang biskoot guna. mungkin cik whitey.mommy boleh refer kat blog ni,

http://www.arieyblog.com/2009/05/cara-meletakkan-emoticon-di-kotak-komen.html

masa biskoot jenguk blog, imej 'my followers' ada keluar. maknanya jadi la tu. tapi untuk tiada masalah lain, letak dimensi original imej tsebut. klu tak silap, dimensi gambar tu adalah w:196 h:43. overall, cik whitey.mommy sudah berjaya buat sidebar tu. hooray! :)

--------------------------

@sufiah - ok, jgn lupa ya. buat jgn tak buat.

SyedGraphiX said on Monday, December 06, 2010

aaa.. i luv tgus tuto! thxxx

adira khidir said on Tuesday, December 07, 2010

bro , tak jadi la . T__T

nurul ain said on Wednesday, March 09, 2011

awwww >,<
heppy gile nieyh..
kite buat dah jadi ^^
tengs biskut !!!!! tenkies so muchies :*
berkurun mencari tuto nieyh baru jumpa and tuto nieyh sangat sng difahami ^^ tengs again :))

Post a Comment

Jangan segan-segan untuk tanya soalan @ luahkan pendapat. Tuan blog ni tak makan orang. Dia makan nasi pattaya & minum air horlick je. Tinggalkan link terbaru supaya tuan blog boleh melawat semasa sesi terjahan beliau berlangsung. Gunakanlah smiley yang ada dengan serakusnya. :)

:)) ;)) ;;) :D ;) :p :(( :) :( :X
=(( :-o :-/ :-* :| 8-} :)] ~x(
:-t b-( :-L x( =))


Newer Post Older Post Home