Ads

Tutorial Twitter Status Kat Header PART 2

bersambung dari entry yang sebelum ni [LINK]..

untuk buat twitter korang muncul di header, korang wajib ada gambar yang ada speech balloon.. macam kat bawah ni:


ok, korang pergi ke design > add gadget > html/javascript


masukkan code ni:

<div class='widget-content'>
<a class="followMe" href="http://twitter.com/TWITTER-ID"></a><div class="block-twitter"><div style="background: url('URL-GAMBAR') no-repeat; padding-left: px; margin-auto: 0px; width:930px; height:573px; "><br /><div id="twitter_div" style="width:255px; height:163px; font-size:17px; color:black; padding-left: 450px; "><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/TWITTER-ID.json?callback=twitterCallback2&amp;count=1" type="text/javascript"></script>
</div>

ok, kat sini la trick nak buat twitter status muncul kat header kita..
gantikan:
  • TWITTER-ID
    • gantikan ini dengan ID twitter korang.. contoh aku punye meuzangeloxxiii
  • URL-GAMBAR
    • ini korang tukar dengan url gambar yang korang nak jadikan header..
  • kuning
    • tukar value ni kepada width dan height gambar yang korang guna.. aku punya header, 930x573
  • hijau
    • ini korang kene pandai-pandai sendiri nak adjust.. tukarkan value kepada size speech balloon yang ada kat header..
  • kelabu
    • ini value untuk size font yang korang nak guna.. suke hati
  • pink
    • ini trick yang paling mencabar.. value bergantung kepada posisi speech balloon dalam gambar.. korang cuma perlu try n error untuk mendapatkan result yang cantik..
  • pink2
    • kat sini korang perlu beri perhatian gak.. untuk tag <br/>, korang boleh tukar bilangannya bergantung pada posisi speech balloon.. jom tengok ni jap:
apa jadi kalau aku buat tag <br/> tu lebih dari satu?

kemudian aku kurangkan.. apa yang jadi?

ok, sekarang blog korang ada dua header.. betul tak? korang hanya perlu buang header lama.. untuk dapatkan hasil yang lebih kemas, tengok tutorial seterusnya, PART 3

22 comments:

  1. fuhhhhhhhh... banyak nye part tweeter ni.. hehehe berpinar bijik mata tengok coding html tu...
    saya baca je sebab saya takde tweeter... huhuhu status FB bole wat mende yg sama ke???

    ReplyDelete
  2. macam complicated bebenor je .
    dah laa owang buta IT . huhu :D

    ReplyDelete
  3. alaa... tak ada kotak twitter tu la, :(

    ReplyDelete
  4. xrty laa nak bt,,tlong bt kan blh hehehehe

    ReplyDelete
  5. maksudnya gambar yang ada speech baloon tu beserta degan header lah ek? atau cuma balloon itu saja?

    ReplyDelete
  6. @Misa Sakura!
    gmbr header yg ade speech balloon la.. kalo tak nk sumbat mane kan.. paham?

    ReplyDelete
  7. @Wan Zulqhairi
    kalo header ciput, buat ciput je la..
    gune kreativiti masing2.. :)

    ReplyDelete
  8. tak paham macam mana nak dpt kan url templete? *templete sy buat sendiri*

    ReplyDelete
  9. Thanks for tuto , good tuto okay dah siapp :)

    ReplyDelete
  10. baiklah.. in process nak tukar header. ;))

    ReplyDelete
  11. kenape yang saye punye status twitter, die kluar separuh je erk?

    ReplyDelete
  12. @irahehe

    eh,eh..dah boleh dah..hehe..btw,tq buat tutor nie. XD

    ReplyDelete
  13. apesal susah sgt yg padding tu ? mcm nak pecah otak alia godek bnda tu T____________T

    ReplyDelete
  14. thnks 4 da tuto ! siap :) . takde la susah sgt pon . hehe .
    yg padding tu, nk lagi senang, crop header tu dari sebelah kiri, sampai kat kotak twitter uh . then dpt la die punye width :) . crop tu just utk taw padding utk kotak tweet tu je . oke .

    ReplyDelete
  15. nak tanya ni, speech ballon tu mcm mana nak buat? guna adobe? or leh wat any kind of box bagi nmpk mcm speech ballon?

    ReplyDelete
  16. nak buat!! tp cam complicated nye ^_^'

    ReplyDelete
  17. da buat..tp npe twitter status tu xde background..kosong je..camne erk??

    ReplyDelete
  18. kenapa twitter saya ikut scroll sekali ek?

    ReplyDelete
  19. Sampai part 3 terus blank kepala otak . grrr .. poning .

    ReplyDelete
  20. Sampai part 3 terus blank kepala otak . grrr .. poning .

    ReplyDelete

Ads

Followers

Google+ Followers