Tutorial : Ubah Title Sidebar Kepada Bentuk Imej

Gadis Kidal Berceloteh....

.Assalamualaikum.
Haii.. Haii . Korang !! Eh , Lyssa nak buat satu tutorial yang agakk menarikk.
Mungkin , ramai yang sudahh tahu macam mana nak buat .
Tapi  , Lyssa tetap nak ajarkan , sebab ada yang request suruh buat tutorial macam ni :) hehe :)

Oke , Korang tahu tak , macam mana nak buat title sidebar macam Lyssa ?
Macam dekat bawah ni haa.. :
 
**Saja je Lyssa PrintScreen Banner tuh sekali..
Nak suruh korang letak dekat sidebar korang . hehehe :))

Oke lah . nak buatkan ? Ikot Step di bawah ..
Lyssa hanya tunjukkan , macam mana nak masukkan dalam Blog korang tuh:)
Kalau nak create tuh, create lah sendiri guna photoshop or photoscape ok ??

1. Mula-Mula korang kena cari kelebaran (width) sidebar tu dulu ..
 >> Dashboard > Design > Edit Html > Ctrl + F .. cari kod ini :

#sidebar-wrapper {
width: 260px;
** Maknanya , sidebar korang tu , 260px taw ? Kalau tak jumpa kod yang diboldkan tuh.. Korang buat cara ini :

 >> Dashboard > Design > Template Designer > Adjust Width > Lihat size sidebar..


2. Ok , bila dah tahu saiz tu , korang create lah guna photoshop atau photoscape ok ? Lyssa guna photoshop.. hehe :) Lepas tuh , boleh download image korang create tadi di >> http://imgur.com/  


Oke ~
Sekarang ni , Lyssa ajarkan , macam mana nak masukkan dalan blog !
1. Dashboard > Design > Edit Html > Download Full Template . (Penting!!)
2. Sekarang , Tick Expand Widget Template dulu ye !! 

3. Now , cari kod Title Sidebar kita ye. Contohnye , kalau dekat Sidebar korang tulis About Me .. Korang kena Taip About Me (kecil besar tulisan itu tulis sebijik2)!!!
Tekan Ctrl F serentak .. Tapi About Me

4. Bila dah Taip kan , Korang akan jumpa kod macam ni taw :
<b:widget id='HTML1' locked='false' title='About Me' 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>

 5. Tukarkan Kod Yang Ini :


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

kepada kod imej korang.. Macam ini :

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWcLsY7tnvkuG91ZoOAlc2ZifVLcAGVR5RiGA8tSnbP6IDxISZ2Udi4x2NBwXrRto2kYKkqvK_2aAMtpE8E0E0mIK7e8ACCoBaBed6MBtteVc4a_DQjhjLc4mt4JhQgMfbKVfsdsBrQf0/s1600/1.png'/> 
**Masukkan URL/Link Imej Korang dalan tulisan Warna Merah**


6. Hasilnya akan jadi macam ini :

<b:widget id='HTML1' locked='false' title='About Me' 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWcLsY7tnvkuG91ZoOAlc2ZifVLcAGVR5RiGA8tSnbP6IDxISZ2Udi4x2NBwXrRto2kYKkqvK_2aAMtpE8E0E0mIK7e8ACCoBaBed6MBtteVc4a_DQjhjLc4mt4JhQgMfbKVfsdsBrQf0/s1600/1.png'/>
  </b:if>
 7. Ok , sekarang korang ulang step yang sama dengan title yang lain pulak!


8. Bila dah siap , PREVEIW dulu ! Menjadi takk ? Kalau menjadi , SAVE trus!


 
hehehe...
=SELAMAT MENCUBA YE KORANG=
Baca ni !! :
p/s :Kalau korang tak tahu macam mana nak create title tu..
Boleh Order dekat Lyssa.. RM2 satu title ! Murahh kan ?
Boleh inbox Lyssa dekat Fesbukk Lyssa , sekarang ! ^_^ 
KONGSIKAN ARTIKEL INI..
Previous
Next Post »

80 000 orang Comment Di Sini

Write 000 orang Comment Di Sini
Sarah Mnasir
AUTHOR
June 16, 2011 at 8:52 PM delete

thnx lyssa.. da lme crik cre na uat ni.. ^^

avatar
Anonymous
AUTHOR
June 16, 2011 at 9:24 PM delete

mcm mane nk ambik url/link tu?
copy jer ker?or cmner??

avatar
June 16, 2011 at 9:40 PM delete

huhuh.,.,cukup ku x mengerti.,apakah ini semua.,.,x pham la kak..,soe

avatar
June 17, 2011 at 3:16 AM delete

Kak lisa! Dah jadi, singgah blog saya http://missbintangfullstory.blogspot.com/ , imej saya create sendiri tahu ! Hihi , :)

avatar
Anonymous
AUTHOR
June 17, 2011 at 3:42 AM delete

klo bt kt photoscape bt kt mne ? editor ke ? xara tk reti pkai photoscape...hehe

avatar
AmiraRosli
AUTHOR
June 17, 2011 at 10:23 AM delete

sedhnye tak ade photoshop/photoscap.. da try donlod ikot cara lisa aritu.. tak dpt dapt..=(

avatar
Sya
AUTHOR
June 17, 2011 at 1:55 PM delete

thankssss, nk trylaa.. :)

avatar
PCL
AUTHOR
June 17, 2011 at 2:34 PM delete

wah nampak ceria blog PCL kalau ikut tutorial cmni...

[PCL]

avatar
June 17, 2011 at 5:16 PM delete

salam akak..
aja da try wat tp jd satu je yg laen x jadi..
ley x akak wat kan???

avatar
FIZGRAPHIC
AUTHOR
June 17, 2011 at 5:57 PM delete

bagus adikku! hahaha..

avatar
Ain Suriana
AUTHOR
June 17, 2011 at 7:46 PM delete

kak lysaa cmne nk gne html uhh,,
sy tat thu lha,,..
ta tw nk paste cmne..HELP PLEASS

avatar
Korean Fever
AUTHOR
June 18, 2011 at 9:16 AM delete

Akak , macam mana nak buat kalau dekat home , ada satu post ajaa ? Saya harap akak boleh ajar kan :')

avatar
June 18, 2011 at 4:14 PM delete

lisa dearie.. hani blogger baru.. nak tanya.. cane nak letak kat every post yang kite buat, org len akan like through fb, twitter, blog & whatsoeva??heee.. thnx.. kalo cik lisa rajin.. singgah la kat blog hani.. http://nurulhanira.blogspot.com/
(^_*)

avatar
Gary Asip
AUTHOR
June 18, 2011 at 6:28 PM delete

lyssa...errrr... gary tengah create satu blog baru... & becoz i adore ur blog so much, gary nak bagi nama blog tuh 'aq nak blog macam lyssasecret'.. err... agak2 lyssa benarkan x?... kalau x benarkan pun x per... huhu... juz nak cari nama blog yang boleh buat orang senyum kalau baca... hehe... x tiru blog lyssa... just nak letak nama lyssasecret tu kat header, sebab kan lyssa da jadi simbolik blog tutor skarang... ble x?...

avatar
June 18, 2011 at 8:03 PM delete

Lyssa, cmane nk otomatik delete post y dh lame..means bile dah ade post bru, post lame juz ade kt link..kat home juz ade 1 post..

avatar
halidaRahman
AUTHOR
June 18, 2011 at 10:02 PM delete

lyssa, cm nak nak centerkan title sidebar yg dah di ubah kepada image tu ? help pls ;)

avatar
qursy ♥
AUTHOR
June 19, 2011 at 1:04 AM delete

haaa! yang ney laaa dok cari .. hehe

avatar
mawarni_mas
AUTHOR
June 19, 2011 at 3:10 AM delete

tak paham lah kak . hee

avatar
sarahanicaha
AUTHOR
June 29, 2011 at 9:27 PM delete

k.leyyssa sye x reti la,,huhu

avatar
Khairul Azim
AUTHOR
July 11, 2011 at 8:39 PM delete

Assalamualaikum Kak lyssa saya cari kod yang kak lyssa bagi tu saya cari ta jumpa huhuhu....

avatar
nadiasykes95
AUTHOR
July 24, 2011 at 2:33 PM delete

Kak Lyssa , Yaya Tak Faham La :( Err , Nanti Yaya Nak Order Kat Kak Lisa Boleh? :)

avatar
Unknown
AUTHOR
July 27, 2011 at 11:41 AM delete

lyssa tauhh ta kenape bile kite bukak kat templete designer , kenape kite ta boleyy na nengok profile kite ekhh ?

avatar
Ariieya
AUTHOR
July 29, 2011 at 11:28 AM delete

sume jadik, tapi yg follower tuh x, tapi Thanx sgt2 sbb buat tuto niey, syg kak lyssa ^^

avatar
atien
AUTHOR
July 30, 2011 at 8:44 PM delete

jadik tu jadik . tpi , icon tu die tak menentu kedudukan die ? nape eh lyssa ?

avatar
wan nur
AUTHOR
July 31, 2011 at 6:57 PM delete

salam
huhu cuba buat.. dah edit tapi xtau nak ambik URL tu camner ek?

avatar
Anonymous
AUTHOR
August 13, 2011 at 6:09 PM delete

Dah jadi . Cuma utk follower je tak jadi . Anyway thankss skali lagi .

avatar
AqilahKassim
AUTHOR
August 17, 2011 at 9:29 PM delete

dah upload imgur tu :)
tapi nak ambik link yg mana ?

avatar
Yqnq omei
AUTHOR
August 26, 2011 at 10:05 AM delete

da jdi..thnx kak lyssa..-sukasukiblog-

avatar
Anonymous
AUTHOR
August 27, 2011 at 3:33 AM delete

thanks a lot :)tp , knp icon dye jauh dri box tu ???

avatar
mieraw
AUTHOR
September 9, 2011 at 1:46 PM delete

salam. lyssa, tumpang tanye, macam mane nak centerkan image yg kite da buat kat sidebar tu? da try cari tapi x jumpe2. thanks

avatar
September 10, 2011 at 8:36 PM delete

Kak , kenapa FOLLOWERS and BLOG ARCHIVE tak boleh tukar ? Saya dah try banyak kali . huhuh :/

avatar
aneesa
AUTHOR
September 11, 2011 at 8:09 PM delete

erm , Kak Lyssa . Jadik ikut tuto nih . tp , bila preview . . dy bkn duduk dkt tmpat asal dy , tp . . duduk dkt bwah post pulak . =.=

avatar
Amiera Faten
AUTHOR
September 17, 2011 at 10:22 PM delete

code tu nak paste kat mane ?

avatar
double’S
AUTHOR
September 18, 2011 at 8:43 PM delete

yeay! da berjaya..tqsm lyssa..
tp cmne nak edit background post kite tu ek?bagi jd background putih ke gitu..then cmne nak movekan kotak2 kt sidebar tu ye?? bile da buat title sidebar yang cantek, nmpk mcm xbest plak bile ada kotak2 tu..

avatar
September 20, 2011 at 4:47 PM delete This comment has been removed by the author.
avatar
September 30, 2011 at 2:04 PM delete

Kak Lyssa, kenapa saya cari Title Sidebar tak de pun. About Me pun tak de. kenapa yehh? :|

avatar
Misz Azney
AUTHOR
October 1, 2011 at 7:49 AM delete

knpe stu je yg jdi?yg laen jdi 2 jdi cme dye jdi tajuk yg sama. . about me semuanyer. . cmne na buad nieyh? tlong ajarkn

avatar
Nurul Wani
AUTHOR
October 2, 2011 at 3:21 PM delete

fuhh..dlm banyak2 tutorial nak wat bnde ni.tutorial dari blog kamu jugak yg menjadi..thanks anyway.. :-)

avatar
Nurul Wani
AUTHOR
October 2, 2011 at 3:21 PM delete

fuhh..dlm banyak2 tutorial nak wat bnde ni.tutorial dari blog kamu jugak yg menjadi..thanks anyway.. :-)

avatar
October 4, 2011 at 8:50 PM delete

akak lyssa puon kidal gak erk sama la kita...

avatar
Unknown
AUTHOR
October 6, 2011 at 6:44 PM delete

@Syaher Comel , tukarkan lah about me tu, jadi tajuuk yg awk nak..

avatar
Nur Nabila
AUTHOR
October 12, 2011 at 10:10 AM delete

akk lyssa , tuto nie menjadi , yg tk menjadi follower ngn blog archive je ? npe eh ?

avatar
Lovelylya
AUTHOR
October 16, 2011 at 4:09 PM delete

kaka Lyssa,untuk blog archive
plak kat mne???

avatar
Anonymous
AUTHOR
October 20, 2011 at 6:34 PM delete

@aRa ❤ aFiq™dah inbox tok order . tp lyssa wat tak tau jer~sedih

avatar
fangirl
AUTHOR
October 22, 2011 at 3:39 PM delete

k.lyssa x reti lah nak buat , yg kna cri tu suma x da .. *sedih*

avatar
Hilma Auni
AUTHOR
October 23, 2011 at 7:33 PM delete

k. lyssa yg cari kod title sidebar tu nk cari kt ne

avatar
eiraRAHMAT
AUTHOR
October 24, 2011 at 8:47 PM delete

kak lysa nape dekat followers ta boleh nak tuka pon :(

avatar
Puteri Ayeiin
AUTHOR
October 31, 2011 at 3:56 PM delete

^ salam sis , mcm mne nk buat dr photoscpe ? x reti lh nk wat :( sis tlg ajar yea ;)

avatar
November 8, 2011 at 3:16 PM delete

thanks kak lyssa saya dah lama cari cara nak buat ni

avatar
Puteri Ayeiin
AUTHOR
November 15, 2011 at 7:30 PM delete

Syz , sye ambil gmbr thu yha . tak reti la nk bwat dkat photoscpe . bley tak syz ?

avatar
Shafizza Hana
AUTHOR
November 16, 2011 at 12:41 PM delete

erm, akak, camne akak letak fb akak kt tepi tu ? kalau sye tekan, keluar facebook akak, boleh add... mcm mne erk ? sye nk letak kt sidebar.

avatar
sweetiezayue
AUTHOR
November 17, 2011 at 1:14 AM delete

xphm lorr ..!!
conpiuzz .!!

avatar
Bella Latip
AUTHOR
November 18, 2011 at 11:38 PM delete

lyssa, cam mana nak centerkan gambar sidebar tu? saya punya lebih ke kiri la.. please help yea.. thank u..:)

avatar
A__NIE
AUTHOR
November 20, 2011 at 9:25 PM delete

xde pon #sidebar-wrapper {
width: 260px; ... humm

avatar
mierastory
AUTHOR
November 20, 2011 at 10:20 PM delete

Kak lyssa . memang lama dah cari tutorial ni . tapi tak berapa faham lahh kak . ):

avatar
Zana Safwan
AUTHOR
November 29, 2011 at 12:08 AM delete

thanks kak for the tutorial :)

avatar
Anonymous
AUTHOR
November 29, 2011 at 9:30 AM delete

Kak Lyssa, kenapa kita nak ubah tittle untu Follower tak boleh ?

avatar
Anonymous
AUTHOR
December 21, 2011 at 4:30 PM delete This comment has been removed by the author.
avatar
December 31, 2011 at 1:39 PM delete

assalamualaikum...
awak,saya tak tahula cene nk buat sibebar mcm ni gune photoscape...
tolong ajarkan...
gune photoscape taw...sye tade photoshop :))
please....nk sngt wat sidebar ceni..
i'm newbie

avatar
January 2, 2012 at 9:36 PM delete

kak Lyssa.,
mcm mana na buat tanda 'love' berkelip-kelip kat sebelah nama org yg mcm kak Lyssa buat tuh ?
ajarkan :D

avatar
Anonymous
AUTHOR
January 7, 2012 at 3:34 PM delete

Kak Lyssa!Sy buat x jd lgsg...Ad aje yg errornya mse nk save template..Ssh btul...:(

avatar
January 19, 2012 at 11:13 AM delete

Ketinggian dia macam mana ye?

avatar
Dream Light
AUTHOR
February 3, 2012 at 4:27 PM delete

Kak Lyssa klau nk kasi image tuh center camne ?

avatar
Leyza
AUTHOR
February 11, 2012 at 2:06 AM delete

adoiii sshnyee cik lysa oii..tlng sy btkn leh..?dh fening nie haaa..sob2x~

avatar
Cik Zaiey
AUTHOR
February 12, 2012 at 7:39 PM delete

dh buat..tapi yang follower ngn blog archieve xjd r..cmne eh lyssa..bole tlg x??

avatar
Puan Pelangi
AUTHOR
February 20, 2012 at 1:48 AM delete

siez akak terpinga pinga macam pingu sesat . giler akak hilang arah ! akak tak mampu nak paham @@''

avatar
kinAzizan
AUTHOR
March 13, 2012 at 9:38 PM delete

untuk nak letak kat follower pulak..dah try tapi x jadi

avatar
March 24, 2012 at 9:16 AM delete

x pahamlah kak:(...pening kot>>>

avatar
Arifah Liyana
AUTHOR
April 12, 2012 at 2:50 PM delete

Dah buat.. tp yg title untok follower x jadik...

avatar
Myr Myr
AUTHOR
April 14, 2012 at 10:11 AM delete

kak lyssa , ,npew fOllOwers tk bOleyh brubah aeyh ? ? adush! dh bnyk kali buat . . tiada perubhan lha kk ! tlOng !

avatar
June 2, 2012 at 11:30 PM delete

buat kat editor..xara pergi kat bawah sekali ada tulis menu..xara click new photo.and dia suruh adjust width and height and colour..lepastu xara edit lah..

avatar
Anis Stella
AUTHOR
June 9, 2012 at 6:48 PM delete

Jadilah kak Lyssa. thank you :)

avatar
ninotss
AUTHOR
June 13, 2012 at 8:28 PM delete

tq so much kak ats tutorial ^__^

avatar
June 22, 2012 at 5:46 PM delete

kak lyssa macam mana nak tukar untuk blog archive? tak boleh nak tukar la

avatar
NorShafiqah
AUTHOR
July 29, 2012 at 2:08 AM delete

akak lysa kenape jumpa pun perkataan "#sidebar-wrapper { width: 260px;" tak boleh :(

avatar
yusma
AUTHOR
December 8, 2012 at 2:37 PM delete

mcm mne nk letk sidebar kat about me??

avatar
Unknown
AUTHOR
February 7, 2014 at 4:04 PM delete

@Farah Adriana Mohd Samsul

Kak Lyssa ,, senang cerita. Akak pergi rumah saya. Edit blog saya. Mudah sangatkan. Ni susah.

avatar
cik puan rrai
AUTHOR
August 5, 2015 at 7:23 PM delete

Akakkkkk help me cemana nak tukar untuk title follower pulak? sy buat tak menjadi. tak tukar kepada image pun. help me kakkk :( ni blog sy
http://bajuwarnacoklat.blogspot.com/

avatar

.Assalamualaikum.
.Sila Tinggalkan Comment Anda Di Sini.
SATU pun jadi lah ! hehe. EmoticonEmoticon