Tutorial Twitter Status at Blog (versi Hahazirah)

Salam & Hello.

Petang ni saya nak buat tutoial pulak pasal twitter status kat blog. Memang sebelum ni pernah terpikir nak buat tuto pasal ni cuma belum tiba masa. Tapi tiba² hari tu kak ynn suruh wat tutorial pasal twitter ni jadi saya pun cari hari buat tuto ni.

Kat bawah ni adalah contoh status twitter kat blog saya buat masa sekarang.


Twitter Status at your blog!

1. Korang kena ada twitter, kalau takde nak buat ape. Eh, mesti la ada tak kan takde kot. Sengal sangat! :P

2. Bukak photoshop/paint/photoscape/picnik atau apa² je photo editor yang ada kat comp korang. Buat satu 'background' untuk twitter status korang ni. Atau kalau korang nak guna image yang ada kat carian Google Images pun bole jugak, tapi kenalah sesuai dan pandai memilih ok. Macam aku, background yang aku buat di search di Google Images dan diedit² (tambah bubble awan biru tu, konon² burung tu tengah bercakap.). Bawah ni contoh background image yang aku guna.


Kalau nak suruh aku ajar camne nak wat background tu pulak kena wat tuto baru lah sebab tu dah masuk kategori main photohshop. Hehe~

3. Dah ada background korang sendiri kan. Upload background tu dan ambik direct url dia. Tengok code di bawah sebab kena edit dulu sebelum boleh di copy and paste di tempat yang kamu mahu.

<a class="followMe" href="http://twitter.com/username-twitter"></a><div class="block-twitter"><div style="background: url('http://yoururlbackground.com/background-status-twiiter.png') no-repeat; padding-left: px; margin-bottom: 0px; width:500px; height:230px; "><br /><br /><div id="twitter_div" style="width:220px; height:100px; font-size:12px; padding-left: 150px; "><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/username-twitter.json?callback=twitterCallback2&amp;count=1" type="text/javascript"></script>

Tulisan bold biru - ubah username twitter kepada twitter kamu.
Tulisan bold merah - tukarkan url background kepada url background kamu.
Tulisan bold hotpink - ubah width kepada width gambar background kamu tadi. contoh width background kamu 400px jadi tulis 400 px dekat situ.
Tulisan bold purple - ubah height background kamu macam tulisan bold pink ini.
Tulisan bold orange - ini adalah width untuk besar mana twitter status kamu kamu dipamerkan. ia bergantung kepada background yang kamu buat tadi. contoh background kamu gambar ini (sila click) dan bubblenya saiz besar dalam 200px (anggaran) jadi kamu tulislah 200px.
Tulisan bold yellow - ubah height ikut tinggi mana twitter status kamu dipamerkan.
Tulisan bold gray - ubah saiz font twitter status kamu mengikut kesesuaian background kamu tadi.
Tulisan bold hijau - ubah padding-left/padding-right sehingga twitter status kamu betul² kena dengan tempat background kamu tu.
Tulisan underline - kemungkinan kamu tidak perlukan ini. kamu boleh padam atau boleh tambah lagi jika perlu.

4. Dah siap edit code di atas, boleh copy and paste di Dashboard > Design > Page Elements > Add a Gadget > HTML/JavaScript > save dan drag gadget tu kat mana² korang suka.

5. Part ni mungkin korang kena buat berkali² untuk menyamakan kedudukan twitter status dan background korang tu. Cubalah sampai kamu puas hati dengannya.

6. Kalau tengok dekat contoh twitter status aku tu ada button fb, twitter and flickr. Yang tu aku guna code float, itupun belajar dari blog ni. Tambah saja code ni kalau nak la. Edit² la mana yang patut yea. (sila ubah padding-left kepada padding-right dan no nya sekali jika perlu.)

<div style="padding-left:250px;"><a href="http://www.facebook.com/" target="_blank" rel="nofollow""><img src="http://yoururlimage.com/cutebutton_facebook.png" /></a></div>

Btw, code utk tuto ni telah diubahsuai oleh aku, sebab tu la dia macam pening sikit. Code sebenar bole didapati di blog tutorial ini: http://www.bloggerbuster.com/2008/04/add-customized-twitter-widget-to-your.html

Oh ya, ini aku jumpa satu site untuk twitter status yang cun². Korang boleh jadikan twitter status tu sume sebagai inspirasi untuk twitter status korang. Dijamin lawa 100%. Pergi ke link ni: http://www.1stwebdesigner.com/inspiration/creative-twitter-status-designs-inspiration/. Hasilnya lagi korang puas hati. :D

Ok, cukup sampai sini dulu tuto saya yang serambut ni. Kalau tak paham boleh tanya, kalau tak jadi cakaplah boleh saya membantunya. Diharapkan tutorial kali ni berguna untuk semua pengguna twitter. Sekian.

Psstt: Aku tak mampu buat tuto kaw² yang boleh difahami sepenuhnya. =(
Psssttt: Kalau korang masih still tak jadi buat, biarlah aku tolong membuatnya. Korang just bagi aku url link image background yang korang dah buat then aku akan buatkan untuk korang codenya. Tak kisah la berapa saiz width dan height background korang lepastu korang cakap nak sekali tak cute button social network tu. Yang paling penting background buat sendiri, kalau nak suruh aku buat background jugak, kenalah ada 'pengerasnya', tapi sebenarnya aku malas nak buatkan background. Ngeh²~

81 comments:

  1. cik... saya pening nie..hahaha... aduhai..memang pening sikit..tp xpa..buat 2 3 kali baru boleh.. oh ya,nak tanya la sikit. kalau ikut cara ni nak letak shoutbox boleh kan????? nak try test la. hehe

    p/s: baru tahu umo kamu sebaya dgn amir...hih..hihs..

    ReplyDelete
  2. @Amirull Izzat - hee, sy tau mmg pening skit bnda ni sbb time sy buat tu mmg pening, mkn mse jgk nak buat. x sure la. mungkin boleh mungkin tidak tp sy rse codenya mungkin berlainan skit. and code utk script tu x perlu jd bole buang.

    haha, sy dah lme tau umur amir sme dgn sy.. ^^

    ReplyDelete
  3. ley cube ni tp kena reg tweet lu..kekeke :P

    ReplyDelete
  4. best best best sangat menarik. hehehe.

    ReplyDelete
  5. Kak , lepas tu macam mane ? Takde status twitter saye pongg :(

    ReplyDelete
  6. lepas yg mne stu? dah siap ikut smua step kt ats? kdg2 status twitter tu mmg x muncul. tp selalunya muncul la.

    ReplyDelete
  7. Hoho kadang kadang je die tak muncol eh ? Ei teruk lah ! Penat buat . Haha

    ReplyDelete
  8. @Pijer - erk, pijer, sy tgk blog awk yg status twitter tu kan, rsenye mcm ada yg silap skit sbb tu x kuar. awk nk x sy tlg fixed kan sikit. awk just bg url image background tu je. bleh kn?

    ReplyDelete
  9. Boleh boleh , nah

    ttp://i876.photobucket.com/albums/ab323/fatenpijer/thfollow_me_on_twitter_badge.png

    Thanks la tau

    ReplyDelete
  10. @Pijer- hmm, sy dah tgk image bg awk tp background awk x sesuai lah nak buat twitter status ni. skurang-kurang2nya awk kena buat background macam contoh yg sy buat kat ats. Kalo boleh awk bagi url image bckground lain yang sesuai. Sorry tau.

    ReplyDelete
  11. @HahazirahAlaaa kak ! :( Mengade tau bende ni . Haha habis macam mane ? Kene pilih yang lain ? Takde nak suggest link ke ? XD

    ReplyDelete
  12. @Pijer - haah, benda ni mmg mngade kdg2. hahaks~ x) pijer buat la background utk status twitter ni guna photoscape atau photoshop. dia x semestinya pilih, kalo ada yg sesuai bru bleh pilih tp kalo xde kena buat sendiri. sori la xde suggest link. :)

    ReplyDelete
  13. @Hahazirahhaha ok , terime kaseh tau ? Nanti pape pijer inform ! Hihi

    ReplyDelete
  14. @Hahazirahkak cik oi ! Tak jadik ! Dah malas dah nak buat ! :(

    ReplyDelete
  15. @Pijer - alaa, pijer, jgn mcm tu. hemm, mcm ni, nti kalo sy free sy akn tunjukkan skit2 contoh2 bg yg sesuai utk twitter status tu dn mgkin akn tunjuk cre yg plg simple nk wat bg tu. tp bkn skrg la, skang ni x smpt lg nk buat, tgh sbuk dgn skolah. dlm mse trdekat ni, kalo dah siap sy inform ok. :)

    ReplyDelete
  16. AKAAAKKK!!!!
    DAHH BUATT!!!!! SIYESS MENJADII!!!
    WAHHH SUKEEE SUKEEE.. HIHIHIHI THANKS AKAK..
    MEH LA DATANG TGK. BGI KOMEN LAWA TAK Y___Y

    http://marshemalloww.blogspot.com/

    ReplyDelete
  17. @jeera - wahh, sy pun turut gembira ia menjadi. :) trima kasih krna mncuba tuto sy. :D

    ReplyDelete
  18. ; dah try . tp status tak keluar :(

    ReplyDelete
  19. @S Y A M I R A - sy dah tgk blog awk. ade je status keluar.

    ReplyDelete
  20. akak , sye pnya status tak jadi pun ! pls help me . !!! :((

    ReplyDelete
  21. <a class="followMe" href="http://twitter.com/#!/AmieyWhite"></a><div class="block-twitter"><div style="background: url('http://3.bp.blogspot.com/_Z-f8wNe5zy4/TVHeDHDJNyI/AAAAAAAAA6Q/DQrRDROjARo/s1600/Amiey1.png') no-repeat; padding-left: px; margin-bottom: 0px; width:280px; height:230px; "><br /><br /><div id="twitter_div" style="width:100px; height:100px; font-size:12px; padding-left: 150px; "><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/AmieyWhite.json?callback=twitterCallback2&amp;count=1" type="text/javascript"></script>

    betul x macam ni ? :( x jadi

    ReplyDelete
  22. @aida- x jd mcm mne?? sila cerita sikit.

    ReplyDelete
  23. @Amiey White - btul la tu, xtau plak apekah masalahnye mgkin padding x btul kot..

    ReplyDelete
  24. tak jadi :( zira nak tolong? x susah kan ? zira exam takut susah kan je...

    ReplyDelete
  25. takpe, amiey try dulu k sampai dapat , da dapat amiey bgth :(

    ReplyDelete
  26. @Amiey White - zirah xde hal nak tlg. amiey bg je la url background twitter amiey then bila zirah dah siap code dia tu zirah ckp kat shoutmix blog amiey. huhuu~

    ReplyDelete
  27. akak tk jadi..tolong buat untuk saya boleh??
    hhee..siyez tk mnjadi.

    ReplyDelete
  28. SYGGGGG, akhirnya kak ynn berjaya buat YEY tq so much, dh lama gila zirah buat tp seyes masatu takut nk buat :( tq so much dear <3

    ReplyDelete
  29. salam zira, bole tlong setting kn x?? akk dah try bwat tp pning dgn koding2 tu..

    ReplyDelete
  30. @Nurul Husnina Izzati - boleh2, awk bg URL background twitter tu je. :)

    ReplyDelete
  31. @Liyana Lunia. - samesame~ haah, zirah trus buat lps kak ynn tanye ari tu. hehee~ :D

    ReplyDelete
  32. @Luna Chempaka - boleh2, akk bg URL bckground twitter tu, nti zirah adjust2 ape yg ptut. :)

    ReplyDelete
  33. code untuk blog http://insanelilgurl.blogspot.com :

    <a class="followMe" href="http://twitter.com/aidadomofreak96"></a><div class="block-twitter"><div style="background: url('http://i1134.photobucket.com/albums/m609/Nur_Syuhaida/twitter.png?t=1297517301') no-repeat; padding-left: px; margin-bottom: 0px; width:450px; height:300px; "><br /><br /><div id="twitter_div" style="width:200px; height:90px; font-size:12px; padding-left: 190px; "><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/aidadomofreak96.json?callback=twitterCallback2&amp;count=1" type="text/javascript"></script>


    *aida, sila try code ni, kalo x jd tell me a.s.a.p ok.

    ReplyDelete
  34. tnx yee . really appreiciate it . :DD
    suda jadikk :)

    ReplyDelete
  35. saya dah buat,tp xjd pon?xkua status pape pon..help me..plsss..:'(

    ReplyDelete
  36. @Aida- welkam2 alhamdulillah jd pong. :D

    ReplyDelete
  37. @Farah Eyda @ Rara Emiliockii - boleh je nak tlg, xde hal. bg URL background twitter tu then eh jgn lupe bg skali twitter awk ape, kang susah pule sy mencarinye. huhuhuks~ :)

    ReplyDelete
  38. @Hahazirah

    pening dah.. try buat pun tak dpt gak.. ni background dye..

    http://1.bp.blogspot.com/-gPzPAQiSTBQ/TVv2srscpFI/AAAAAAAAA0k/HQ-0qHhKXNI/s1600/monsterbunneytweet.png

    thnks ye zirah :)

    ReplyDelete
  39. @Luna Chempaka - hmm, bwh ni code twitter utk blog http://monsterbunney.blogspot.com

    <a class="followMe" href="http://twitter.com/username-twitter"></a><div class="block-twitter"><div style="background: url('http://1.bp.blogspot.com/-gPzPAQiSTBQ/TVv2srscpFI/AAAAAAAAA0k/HQ-0qHhKXNI/s1600/monsterbunneytweet.png') no-repeat; padding-left: px; margin-bottom: 0px; width:640px; height:122px; "><br /><br /><br /><br /><div id="twitter_div" style="width:600px; height:22px; font-size:12px; padding-left: 30px; "><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/username-twitter.json?callback=twitterCallback2&amp;count=1" type="text/javascript"></script>


    *jgn lupa tukar username twitter

    *tp kan, sy rse awk punye rss feed twitter tu masalah sbb tu status awk x kluar. cube awk aktifkan or pape la kat rss feed twitter tu barulah status awk kluar. kalo twitter org len keluar je.

    ReplyDelete
  40. salam . akak nak tnye ckit , sy punye gambar background ad tpi x klua status twitter sy . npe ek ? tlg sy bleh x ?

    ReplyDelete
  41. curik tuto nie :D
    hee tkdela , meera dh link kn tuto nie dkt blog meera ;)

    good job oh <3

    ReplyDelete
  42. @Nurul Ajmal - oh, kalo mcm tu biase berlaku. kdg2 twitter status sy pong x kluar. mgkin mslh teknikal twitter tu kot.

    ReplyDelete
  43. @nabilameera - terima ksih bnyk2. smoga tuto x brape ni boleh bg manfaat kt smua. hehee~ :P

    ReplyDelete
  44. tak jadi coz dia jadi double header...nape ek

    ReplyDelete
  45. @Zaza- double header like what? sori la zirah x dpt tngkap dia jd cmne. ngeh2~

    ReplyDelete
  46. @Zaza- ohh, kalo ada 2 header, delete lah slh satu.. cube refer kat blog meuz cmne nk ltk header yg ade twitter status. click link di bawah ok.

    http://meuzangelo.blogspot.com/2011/02/tutorial-twitter-status-kat-header-full.html

    ReplyDelete
  47. kak,alis buat tak jadi :( tolong.

    ReplyDelete
  48. @alis :) erkk x jd mcm mne plak ni.. nk zirah tlg bleh je tp sy agk bz la skang. hmmm~

    ReplyDelete
  49. ooohhh macm complicated jerk..*sigh..nak jugak!!ngeh3..

    ReplyDelete
  50. @cikcleopatra xde la complicated mne.. awk try step by step, insya-Allah jd. :) awk pun bleh dpt jgk. ^^

    ReplyDelete
  51. olo...dah buat byk kali dah tpi still x boleh jgk.. twitter status x kuar la..padding dgn entry jauh sgt la... mcm ne ni. plz wk.. tolg sy.. :'(

    ReplyDelete
  52. @Hashira Yusoff ooh, oo kalo padding jauh sgt boleh ubah no padding tu, ubah smpai la position dia betul2 ok. tp kalo awk nk sy tolong, bg la URL image background dgn link twitter awk, tu je.

    ReplyDelete
  53. xley la adik akak punyer..adus mcm sadis :{

    ReplyDelete
  54. @iejjah xleh mcm mne tu? cer citer, cer citer. org lain wat jd je~

    ReplyDelete
  55. betul ke ni..hahaha. mkceh.. :)

    header =http://i950.photobucket.com/albums/ad349/Hashira_Yusoff/footer-2.png

    twitter id= "http://twitter.com/Hashira_Yusoff"

    ReplyDelete
  56. @Hashira Yusoff nah ini code utk awk, sy x pasti jd ke x tp papepun awk try dlu. kalo de pape tell me. btw ni utk header kn, kalo header sy kurang arif maap.

    <a class="followMe" href="http://twitter.com/Hashira_Yusoff"></a><div class="block-twitter"><div style="background: url('http://i950.photobucket.com/albums/ad349/Hashira_Yusoff/footer-2.png') no-repeat; padding-left: px; margin-bottom: 0px; width:960px; height:400px; "><br /><br /><div id="twitter_div" style="width:210px; height:110px; font-size:14px; padding-left: 460px; "><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/Hashira_Yusoff.json?callback=twitterCallback2&amp;count=1" type="text/javascript"></script>

    ReplyDelete
  57. mekaceh wk.. tulah, dh ok pun sume.. cume jarak dia tuh... tak tahu nk adjust padding yg mne satu. T.T

    ReplyDelete
  58. hai zirahs, nak tanye sikit, id twitter tu kita ambik dekat link profile acc twitter kite sdiri kan?

    ReplyDelete
  59. akak, code utk social network tu letak kat bhgn mane 1? uuuu :'( tu je yg masalah, yg lain OKEY JE! ^__^

    ReplyDelete
  60. @jeera yg tu ltk je kat bwh code twitter status tu. cubalah k, gud luck~ =)

    ReplyDelete
  61. Salam Zira ^^ hihi saya guna classic template , so macam mana eh nak paste code twitter status ni ? Harap sgt Zira boleh tunjukkan . Betul betul memerlukan bantuan zira . Tolong ye ! hihi

    ReplyDelete
  62. @HjrHsna - wslm. template classic? sy x gune template classic jd sy xtau la coding utk template classic mcm mne. tp sy rse mungkin awk boleh paste mcm bese kat code header. maaf, sy xtau la nk tunjuk mcm mne. hrp boleh bantu awk. [>_<!]

    ReplyDelete
  63. Hihi tak mengapa lah , saya cuba . Apa apa pun terima kasih banyak banyak ye hihihi ^^

    ReplyDelete
  64. Salam..tak jadi laa..waa~dah letak kod tapi bila tengok,tak kuar pun..leh tolong buatkan?huhu..nanti inform kat shoutbox ye :) thanks..

    ReplyDelete
    Replies
    1. ini code lama, code baru sy tak wat experiment lg. hehee~
      inshaaAllah, nti ada masa terluang sy tlg. samesame~ =]

      Delete