Wadah Madrasah Pengalaman: Tutorial Floating Status Twitter_Layout/Design Template


Monday, April 11, 2011

Tutorial Floating Status Twitter_Layout/Design Template

.



Salam korang...

Kali nie Wan nak wat Tutorial untuk Floating Status twitter lak..Macam macam je trend untuk blog nie kan..Ramai yang tak nak Share bende nie..So Wan nak Share lah ngan korang...tak yah kedekut ilmu nye..Blog kita sama sama Comel and canggih kan seronok..tak kan lah nak guna Sorang diri..Law yang terer koding tu..Boleh lah godek sendiri law yang tak tu??kan ke kesian..nak tanya kadang kadang takut kan..Ada gak yang akan beri jawapan dengan cara menipu..Tak de tutorial lah..dari Blogskin lah..Entah apa lagi idea nak menipu tu..Tak baik taw..Apalah salah nya ajar sikit kat Blogger blogger nie..Ilmu kan untuk dikongsi..




K lah..Wan tak nak cakap banyak dah..Korang leh tengok macam gambar kat atas tu..Law tak taw gak and masih blur blur macam mana Floating Status Twitter nie..Korang leh ke Wanhazeljunior.blogspot.com/ untuk tengok Floating Status Twitter..tengok belah kiri tu k..Dah tengok??so macam mana??Law korang nak..Apa tunggu lagi..

Owh ye..Jangan cakap Wan copy Tutorial orang lak...Cowie erk tak de Copy Copy...Koding nie Wan wat sendiri..Dan sila jangan Ubah koding asal selain yang Wan kasi taw k..Sila Hormati susah payah Wan cari koding nie..ahaha..

Jum Tutorial..

Mula mula korang ke...

Dashsboard>design>Add gadget>HTML

Korang Copy kod bawah nie and paste kat Gadget HTML korang..letak kat Gadget paling bawah lah..Mana mana pun tak pe..Asalkan korang dah add gadget je.




<div style='display:scroll; position:fixed; top:150px; left:-8px;'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxmzqaN91mIigVR8t7upE53SLtHt2RnAzt4Y6KgPazOkblD4lNwUk9MxPftbfRD82qDMNPOeOibGIUH5os7XzjZljO2BBofTY1WG88k4MdS824l962y8RjcrpTPnfFi6Ir2Oo6DYDMkIQ/s1600/Untitled-1.png" border="0" width="" height="" />
</div><div style='display:scroll; position:fixed; top:180px; left:-6px;'><a class='linkopacity'href='http://wanhazel.blogspot.com/' target="_blank" style='margin-left: 1em; margin-right: 1em;' title='get this floating twitter status'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfLmj2CkOh39fOdNqG5A11ldaRbfP2JqVmyQO5MWN1972db29E3Aqp_Y9PC9Gt6wNUFDH0UlgZqdwmVLOpQQeRCQiYj4ECdHU6wlU1W3cr4OBLDDM8Or7oug1iAWp4oyOe8GYCbmrdzN4/s1600/Twitter-Small.png" border="0" width="20" height="20" />
</a>

<a class="followMe" href="http://twitter.com/ID TWITTER"></a><div class="block-twitter"><div id="twitter_div" style="width:220px; height:120px; font-size:14px; color:black; padding-left: 10px; "><ul id="twitter_update_list"></ul></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"></a></script></div>





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



Macam yang kat atas tu...So ambek Wan_hazel je lah..

dah selesai tu..Kita ke langkah yang seterusnya lak..

Dashboard>Design>add gadget>Template Designer

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

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

#twitter_div{display:scroll; position:fixed; top:195px; left:-1px;}

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

Contoh macam kat gambar bawah nie..



Ok tu je..

Law ok..Korang save je..law tak ok..korang ubah top:195px; left:-1px hingga masuk dalam awan Twitter tu k..

Untuk cantekkan lagi twitter Status nie..korang leh godek sendiri..

Selamat mencuba

.



65 comments:

Mas Ahmad Safwan said...

.mas tade twitter , heee ;p

Wan_hazel said...

mas tak de twitter takyah tgk tuto nie..ahahha///gurau je

Alya Balqis Studio said...

kalu untuk fb xlh ke guna tutor ne??hhiih..

zuhanismohamed said...

tq eh share..sy dah try tp knpe status twitter xkua kt situ eh?

mas saari said...

wan akak dah try buat...menjadi
tapi macammana kita nak buat dia stay kat header tu je!
sbb bila akak scroll dia ikut...hehehehe
faham tak soalan akak?

Wan_hazel said...

izzati...

law yg tu tak leh..ehehehe

Wan_hazel said...

zuhanis..

twitter jgn privatekan k...update status..mesti boleh nye..

Wan_hazel said...

kak mas..

law yg tu..kak tgk tuto nie k..

http://wanhazel.blogspot.com/2011/02/tutorial-letak-status-twitter-dalam_22.html

zuhanismohamed said...

oh gitu..patut lah xkua..thank you eh..cuba lagi ni..he he

Wan_hazel said...

ok..ehehhe...peace//law dah dapat kasi taw k

zuhanismohamed said...

ok dah jd..tq ya :D

ct mysera^^ said...

tengs...
lama dh cari tuto pasal nie..

Wan_hazel said...

zuhanismohamed

gud..wan tak leh tgk lak..koz tak de link blog..ehehhe

Wan_hazel said...

ct mysera^^

welkam..peacce

Anonymous said...

hai..singgah blog kamu ;)

*owh, thanx la, sblm ni cari jgk caner nk wat,,hihi..tak reti sgt bab2 ni...

ika said...

wah..mao3

ika said...

npe yg eka kuar icon strawberry plak..haha..

Wan_hazel said...

cantekk

hehehe..ok peace..tengs blog wan biasa2 je

Wan_hazel said...

eka

aik...nape lak kua icon stwabery??aiyo...

nano said...

wan,,,pndainye wan buat bnde ni sume,,bljr dri mne,,nano bljr psl web, coding2 html pon x wat ni sume,,tabik spring la kat wan,,,

Chuu Muqhlis said...

wan., nice info! chuu salu tgk kt blog org lain., terasa nk try :P

Wan_hazel said...

nano

wan balaja sendri je nano..tak de sapa nak jar wan..ehehe..godek je mane2...try n error mesti leh punya..wan masih blajar lagi ilmu HTML nie..javascript lagi..byk lah..hehehe

Wan_hazel said...

chuu

boleh je try..ehehhe

nano said...

nano xsmpat lg nk godek2 wan,,,sibuk memnjg,,,course ni,,byk assignment,,,xde paper,,jd 100% mark kat course work,,nti de mse,,nano nk godek2 jgk la,,pnting jugk javascript...tahniah la kat wan ley wat dgn jayanyer,,,,tabik spring,,,

Wan_hazel said...

nano

hehehe..wan biase je nano..nano lagi best koz ade kelayakan..wan pandai camtu je..so org tak pndg sgt..tul tak??hehehe..

Alia Rahmat said...

ehex..mne ade wan..yg pandai sndiri tu lah yg org tabik spring sbb ade inisiatif nak try..

Wan_hazel said...

AliaJustea

hehehe..tengs....godek2 je tu

Wansteddy Tales said...

Besh! design yg superb tutorial yg membina. hakak belum aktif twitter lagi. next dah ada insya'allah boleh guna pakai tips tutorial dr Wan ni. Thanx for sharing Wan :D

Wan_hazel said...

Wansteddy Tale

welkam kak...design simple camnie je yg wan reti kak..ehhehe...nanti akan try lah ye..syok gak law updte twittr nie kak..eheheh

ika said...

haha..sbb eka buat icon tepi bloglist..kih3..mcm mne nak buat box 2 ..leh ajar??gne photoshop ke??eka crik xjmpa pon..hee

Wan_hazel said...

eka

wat box yg mane eka??

ika said...

yg twitter 2 la..wrna biru 2..hehe
nak resize dy punyer size kat photoshop kat mner??

Wan_hazel said...

eka..

erk..eka wat je new file ekot size eka..nanti copy [aste je yg lama dalam tu n klik kanan free transform..

ika said...

mcm 2..ptot crik xjmper pon

Wan_hazel said...

a ah eka..eheheh

ika said...

haha..lau nak resize yg kotak twittter 2 gne..nk kecik ckit

Wan_hazel said...

law tu eka cri kod nie..

<div id="twitter_div" style="width:220px; height:120px;

eka ubah tggi dan lebar dia k

ika said...

dah bleh...hehe..yg 2 utk stts twitter ..eka ubah lbar gambo 2..ngn yg 2..hehe..ok..tq

Wan_hazel said...

eka

welkam eka

Erfan said...

knape x kluar2 status da update!!

Wan_hazel said...

er fan

dah tuka ID twitter tu tak???jgn private twitter k

Nur Syafiqah. said...

Thanks wan !

Wan_hazel said...

welkam

Unknown said...

suda jd..trimasss....=)

Wan_hazel said...

♥mRs fuAin♥

welkm...hehehehe

izzatiRosli said...

yes!!

Wan_hazel said...

Izz

yezz..ehehhe

ツTyra ツ said...

npe twitternye tak msk dlm awan
????

Wan_hazel said...

ツTyra ツ

sila baca semula tuto k...ade kod yg kene laraskan

Eyqa Zaque said...

Salam wan,

kalo cahya nak letak updte status twitter yg tak float cmna erk? mksudnya letak kat sidebar jer.

Wan_hazel said...

law yg tu guna kod nie je...try taw...add gadget > HTML

guna kod yg start dri nie

< a class="followMe"

sampai habis

Eyqa Zaque said...

tapi bckground dia takda kan? Cahya dah cuba.. kalo nk letak bckrgound? hee. maaf menyusahkan..

Wan_hazel said...

ok..nanti wan godek2 kod nie..wan skang BZ skit..koz masih dlm mood final..mggu depan wan wat tuto k

Eyqa Zaque said...

maaf wan. gud luck final key. :)

Wan_hazel said...

eh jgnlah minta maaf..tak de pape lah..tengs taw

Anonymous said...

da lme cr tuto ni..sy amk ye..tq!=)

Wan_hazel said...

ok..leh je..and welkam

Shah Evans said...

wahh..nih cm best jew...aku cuba k...

Wan_hazel said...

ok...

NORHIDAYAH said...

thanx for the tutorial...

http://920norhidayah423.blogspot.com/2011/07/credit-tutorial-to-them.html

Wan_hazel said...

welkam..n teng gak

~CahayaDinie~ said...

xmenjadi laa..knapa xmasuk status twitter pom dalam balon twitter tu???

Wan_hazel said...

tak masuk??status twitter tu ada kluar tak??

Shaquilla Abdullah said...

sakit hati status pun tak keluar pun abg wan --' tak apa lah , btw thanks for the tutorial :D

R. Farhana said...

wan or abang wan? thankyou so much ! untuk code ni. fanaa guna blogskin. so takde pulak tutorial status twitter untuk blogskin. godek punya godek boleh jugak buat. based on wan punya code. thanks ye :D thanks sgt2 !