Wadah Madrasah Pengalaman: Tutorial letak Status Twitter dalam Header Blog_Layout/Design Template


Tuesday, February 22, 2011

Tutorial letak Status Twitter dalam Header Blog_Layout/Design Template

.



Salam Korang...

Hari nie Wan nak wat Tutorial Status Twitter dalam Header Blog_Layout/Design Template plak..Yang hari tu Wan wat untuk Classic Template..So skang Layout/Design Template lak.
Owh ye...kredit gak wat Anne..Yang nie Wan godek godek sikit and ada sedikit kod yang berbeza dari Tutorial Anne..Hope leh senangkan kerja korang.


Sebelum pape jadi kat Blog korang..Korang backup dulu Template korang k..Law dah sedia..

Jum Tutorial.

Mula mula korang Wat lah dulu Header korang k..Edit Header korang..Wan anggap korang dah taw lah guna Adobe or pape medium edit yang lain ..Macam yang Wan wat tu..Ada belon putih tempat tu..Yang tu untuk Status Twitter Wan nanti..Law dah selesai..Korang Save



Lepas Selesai tu korang Copy kod bawah nie..Korang paste kat Notepad dulu k..So senang korang nak edit..Nak paste kat word pun tak pe..asal korang senang nak edit je.

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

<a class="followMe" href="http://twitter.com/ID TWITTER"></a><div class="block-twitter"><div style="background: url('KOD LINK HEADER KORANG') no-repeat; padding-left: px; margin-bottom: 0px; width:1000px; height:520px; "><br /><br /><br /><div id="twitter_div" style="width:300px; height:120px; font-size:14px; color:black; padding-left: 45px; "><ul id="twitter_update_list"></ul></div></div></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/ID TWITTER.json?callback=twitterCallback2&count=1" type="text/javascript"></script>

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

ID TWITTER yang nie korang ambik nama profile Twitter korang..tengok macam kat gambar bawah nie.


KOD LINK HEADER KORANG yang nie korang ambek kod untuk header korang..Law korang tak taw cara..korang tengok kat sini..klik tutorial nie.Tutorial dapatkan kod image.Korang ambek link je k..takyah tambah pape..contoh link tu macam nie..

http://1.bp.blogspot.com/-9lJgCKKaDmY/TWMGSJS4CHJI/AAAAAAAAFPU/0CEQj_zzMlI/s1600/header%2Bhazel%2Bior.jpg

width:1000px; height:520px; yang nie lak..Size header korang..lebar dan tinggi..Ekot size Header korang tu k..Kasi size yang betul lah.

width:300px; height:120px; yang nie lak..untuk kotak Twitter korang..size untuk status Twitter korang..Korang try and error lah nanti k..law tak nak ubah pun tak pe..


Dah selesai edit semua tu..Kita mulakan operasi sebenar lak..Jum jum.Sekali lagi Wan nak ingatkan..Backup dulu template korang k.

Sign in Blog korang..

Dashboard>Design>add gadget>HTML

korang masukkan kod tu dalam HTML Gadget k..Dan pastikan kotak Add Gadget korang tu berada di bahagian header..maksudnya dibawah kotak header..nanti kita akan remove header korang yang lama tu.Contoh macam kat bawah nie..Korang pindahkan kotak gadget tu ke bawah header k.


Dah selesai simpan masuk kod tu..Korang save.

Langkah seterusnya lak..Korang masuk ke

Dashboard>Design>add gadget>Template Designer

korang pastekan kod di bawah nie ke dalam Advance>Add Css

------------------
#twitter_div{display:block; position:relative; top:300px; left:260px; z-index:1;}
-------------

Contoh macam kat bawah nie..


top:300px; left:260px yang nie adalah kedudukan Status Twitter korang..korang ubah nilai dalam tu k..sampailah korang dapat letak status tu dalam kotak belon yang korang wat..try and error k.

tu je..


Senang tak?So selamat mencuba,,

papai.
.



91 comments:

Kucing Oren said...

Wan...
Kenapa bila sy nak taip kat Photoshop, tulisan jadi kecik? Saiz dah 72 pt..

Syafique Azawadi said...

kalau nak buat status facebook macam mane pulak ? ape kate terus send msg ke FB aku ?

http://facebook.com/copiemax

Wan_hazel said...

Kucing Oren

mungkin size yang awak guna tu besar sangat..guna dalam pixel k...

Wan_hazel said...

Syafique Azawadi

law dah de status Fb mesti aku tuka ke FB gak,,tak de bro

Yastro said...

Menarik Wan...err gua punye ip kene ban ke kat ishout kamu?

Wan_hazel said...

tengs yas..eh ip yas kene ban??wan tak ban pun yas...jap2..wan cek k

Yastro said...

Okeh...hr ni dr opis..okey lakk...mlm td dr umah...

cik Ladies said...

wan,, utk FB boleyh tak? kalau tukar kan ID je.. n macam2 tu la ?

Wan_hazel said...

Yastro

owh..ok yas

Wan_hazel said...

cik Ladies

wan tak taw lak..ehehhe..tak cuba..asenya tak leh ..koding dia lain tak sama

cik Ladies said...

#! <-- kne masukkan niey ke tak??

Wan_hazel said...

cik aldies..yag tu tak perlu ambek k..ehehhe

sarah mohamad said...

susah jugak nak buat macam ni kan. nanti nak tempah dengan wan jelah. hihi

Wan_hazel said...

sarah mohamad

boleh je..wtak de masalah ..ehhehe

Luna Chempaka said...

tak jadi mcm banner wan pun.. tlong tgk kn bole x??

http://monsterbunney.blogspot.com/

Luna Chempaka said...

fuhh~ dh bejaye letak.. thnks utk tutor ye wan.. try laa tgk, ok ke tak yg luna bwat.. ngee :p

Wan_hazel said...

Luna Chempaka

ok luna..nanti wan tgk k..ehehhe..

Habibah said...

wan..

cemaner nak buang header yg lama tu? takder pun 'remove'..

Wan_hazel said...

Habibah

eh...law ade header lame buang je...k

Habibah said...

lagi satu, kenapa yang twitter tu ader background biru? wan boleh tengok lam blog ni. http://hariz-izzuddin.blogspot.com

cemaner nak buat jadi transparent?

Wan_hazel said...

Habibah


erk nape jdi camtu???law tak ok..try tgk kat blog anne k...

Habibah said...

ok..thanks..

Wan_hazel said...

welkam..

eka said...

jarak . nk ubah gner..jadi jauh

Wan_hazel said...

top:300px; left:260px yang nie adalah kedudukan Status Twitter korang..korang ubah nilai dalam tu k..sampailah korang dapat letak status tu dalam kotak belon yang korang wat..try and error k.



ekot tuto tu k

eka said...

jadi dah..thankzz

Wan_hazel said...

welkam..ehehhe..peace

Anonymous said...

aduih , tk leh pun ? =='
tk kuar la status twitter tu, cmne jd cmtu ?

Wan_hazel said...

update stattus twitter dan jagan privatekan twitter k...id twitter tu dah tuka blom??

firz said...

wan, macam mana nak buang header lama? -o-

Wan_hazel said...

remove je kat bhgian header tu

firz said...

tak bole pun remove? nnty ada title blog, nak remove title blog tu sekali. dah cuba tgok tutorial, tapi tak jumpa pun code yg dia bg.

✿ YaYa ✿ said...

wan.. klau guna belon kaler lain x bole ke selain dri kaler putih?

Wan_hazel said...

firz

ok...lepas remove tu kan..guna header nie k..header kosong...pasang header kat bhgian header tu...http://4.bp.blogspot.com/-85BK778qZMo/TXtzsvSsSSI/AAAAAAAAFhg/wFbpcQt4gGQ/s1600/HEader%2Bkosong.png

Wan_hazel said...

✿ YaYa ✿

boleh je..try tgk kat tuto anne tu k

Habibah said...

wan..cuba wan tengok blog sy..http://kucingoren93.blogspot.com

sy dah ejas kedudukan status twitter tu lam template designer sampai left:1px. tapi tetap duk kat tengah2 tu. sy ada salah coding ke ?

Wan_hazel said...

Habibah

size header dah ubah lom???/ubah kedudukan tu dekat Advance>Add Css

Izbeta Shyah said...

adehh kenapa hampir semua tuto nak letak status twitter ni tak menjadi.? lepak oo.! naseb perkataan bosan atau give up tu tak bertandang dalam hati.! nak buat macam mana ni.? asyik tak jadi je.!

Wan_hazel said...

PM wan kat FB k..wan ajar camne nak wat...Wan hazel

Shafiq said...

mcm pula nk centerkn header kite? Headernye x jadi center. Die mcm ketepi sgt. Yg lain dh ok tp kedudukan headernye je xbetol. Mcm mne ye?

Wan_hazel said...

Shafiq

owh..try tambah nie k..< center> kad depan kod tu dan kat hujub kaot tu,..

Izbeta Shyah said...

wan, kenapa iz buat semua dah ok, tapi jadi double header lah.! macam mana nak hilangkan header yg ats tu.!

Wan_hazel said...

iz kene remove header ori tu k..yg dekat gadgte header tu

Izbeta Shyah said...

mcm mana nak remove.?

Izbeta Shyah said...

ok ok, iz dah berjaya buat, finally.! antara banyak banyak tuto utk buat header ade status twitter, yang ini sahaja yang berjaya.!

thx a lot.!

Wan_hazel said...

ok..ehehhe...peace

miss biebbiey said...

wahahahha wan saya berjaya.. ;D arigatogaozaimas sbb buat tuto ne..cpat dan sng faham he he he

♥mRs fuAin♥ said...

status tweet kua..
tp npe header xkua..T_T

Wan_hazel said...

miss biebbiey

gud2.,..

Wan_hazel said...

♥mRs fuAin♥

dah masukn link gambar header tu lom??

♥mRs fuAin♥ said...

sudaa...tp xkua...=(

Wan_hazel said...

♥mRs fuAin♥

erk pelik...hairan

♥mRs fuAin♥ said...

sy pom hairan jgkk..=P

Wan_hazel said...

♥mRs fuAin♥

pelik nie...add gadget kan..kod link header masukn...lepas tu mesti leh nye...PM wan kat FB k...wan hazel

Hannan Accurate said...

salam.
saya tak faham step yg nak msukkan kod html tu
yg ni

Dashboard>Design>add gadget>HTML

bole tlg ajrkn. tqvm.:)

Wan_hazel said...

Hannan Accurate

erk..tak faham???huhuhu..maksudnye...add gadget je...kat design tu

Hannan Accurate said...

owhh xpe2. yg tu da phm. tpi kan, kotak yg tulis status tu xkeluar la. huhu

Wan_hazel said...

Hannan Accurate

erk??kotak???kotak tu kene wat sendiri

Hannan Accurate said...

tape tape. meh sye cube lagi skali. tq krne melayan. :)

Wan_hazel said...

ok hanan..law tak faham gak kais taw je k

k e y r i said...

xjadi pon.. xde ayat2 papepon dlm kotak tweet tu.. =.=

nadiah yaya said...

awat status twiiter ad tp header plak yg xde???aiyooo

Wan_hazel said...

nadiah yaya

erk..header kene masukn kat dalam kod tu...baca lek lok koding tu k..ehehhe

Wan_hazel said...

k e y r i

yg lain boleh je pun...jgn private twit k

k e y r i said...

yes!! akhirnya jadipon!! maceh3! :D

Wan_hazel said...

walkam..hehehe

Hanafi said...

thnx .. utk tuto ni...
Cayalah!! ;) Dpt buat gak akhirnya..
Thnx!
You're warmly welcomed to
http://creamsoflife.blogspot.com

Wan_hazel said...

welkam..hehehe...peace

farahd101 said...

dah jadi! thanks! tapi2, kenapa header baru tu dia ke bawah sangat? dia macam tak dok kat atas..dia macam menurun sikit.
cuba tengok : www.bloomy-day.blogspot.com

Wan_hazel said...

header asalh remove kan k..

farahd101 said...

mcm mna nak remove? dah try letak header yang transparent tu, and dah jadi elok dah. cuma header baru tu dia ke bawah sikit.

Wan_hazel said...

a ah akan kebawah koz dah tambah headeer transparents..sebab tu lah.

Izbeta Shyah said...

bro wan, iz muncul kembali, ari tu tukar design, then bila nak remove header atas tak boleh sebab takde button remove, cemana erk.? ada solusi tak.?

Wan_hazel said...

tak de button remove??camne upload header law tak de??guna HTML ke

cik cahaya said...

naper x menjadi?? :((

cik cahaya said...

naper x menjadi?? bila buat header jadik size kecik.. help me.. :(

Wan_hazel said...

jadi size kecik??dah adjust size blom??/ekot step betul2 taw

cik cahaya said...

awak dah try uat tapi.. x menjadi gak.. die jadik agak kecik then de background wane purple.. huh~ cam ner nak uat ni??

Wan_hazel said...

cik cahaya

ade bg warna purple??dah masuk kod header kat dlam kod yg wan bagi tu blom??

cik cahaya said...

saya try buat nanti kamu tengok yah dekat blog saya http://iniblogcahaya.blogspot.com

Wan_hazel said...

ok..wan tgk k

cik cahaya said...

dah try.. tapi x ley gak tutop wane purple tuh.. sedihnya x menjadik.. :(

Wan_hazel said...

kene tuka template kot..

Nabeel Fikree said...

Kenapa aku buat gambar header tak keluar ek? Status twitter tu ade pulak..

Wan_hazel said...

pastikan koding gambar tu betul taw??

maira said...

assalamualaikum wan..
nak tanye....kalu header x leh center cne?..yg le sume da ok.

Wan_hazel said...

kalau tak center awak ada maslah ngn size header awak tu.. try ub size header k

maira said...

da adjust bg center header tu..tp x mleh jugak jd center..bkn kt blog sy ni..

Wan_hazel said...

pelik nie..wan pun tak pasti taw

Niesa said...

Suke !
Suke !
Suke !

Aainaa Jasri said...

Cantik nya.