11 January 2012

Burung Biru Twitter hinggap di Header Blog ?

Macam mana nak buat status twitter kita keluar kat header?.. sebagai contoh, anda semua boleh jenguk ke blog seperti blog cik epal, stabbed miles, dan belog cap ayam..

Saya akan cuba ringkaskan tutorial ni..
pertama sekali  perlu ada aplikasi seperti di bawah:

Gambar Google.com
Anda semua perlu ada "Add Gadget" yang seperti itu.. Pelik? Memang pelik~


CARA WUJUDKAN ADD GADJET DI ATAS HEADER
pergi ke design > edit HTML
cari kod ni:

b:section class='header' id='header' maxwidgets='1' showaddelement='no'ok, tukarkan 1 kepada 3 dan no kepada yes

b:section class='header' id='header' maxwidgets='3' showaddelement='yes'kemudian korang save..

*pastikan korang backup dulu template blog korang.. takot-takot kalo tak jadi, boleh revert

untuk buat twitter muncul di header, kita wajiblah memiliki gambar2 yang ada 'speech balloon'.. macam ni:

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

Gambar Google.com

masukkan code ni:

TWITTER-ID">
URL-GAMBAR') no-repeat; padding-left: px; margin-auto: 0px; width:930px; height:573px; ">
255px; height:163px; font-size:17px; color:black; padding-left: 450px; ">
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..

unggu
ini value untuk size font yang korang nak guna.. suke hati

merah
ini trick yang paling mencabar.. value bergantung kepada posisi speech balloon dalam gambar.. korang cuma perlutry n error untuk mendapatkan result yang cantik..

pink
kat sini korang perlu beri perhatian gak.. untuk tag
, korang boleh tukar bilangannya bergantung pada posisi speech balloon..

ok, sekarang blog kita dah ada 2 header.. betul tak? Satu yang ori satu lagi cetak rompak hehe.. Sekarang kita hanya perlu buang header lama..

tekan 'edit' pada element header asal

Gambar Google.com

Remove header asal
Gambar Google.com
tick pada Instead of title and description
tekan remove, upload header dengan gambar blank atau kosong.. kenapa? nanti korang akan paham.
aku dah sediakan gambar blank:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPigbmV4g2ztrzWs5xJAJT10_bHXJpzMFjfXLf-gUg2VDx9iZsf9pPrwMZlg5qxmUhp7GWqPA7nr2IF_M6ZvpgmreSt2UDvrveP_zhRbalwIcQTKSw81tyhnZbXT5mgU_KJgQQCqV87Ms/s1600/blank.png memang korang tak nampak apa-apa sebab itu la tujuannya, nak sembunyikan header asal..

TAMAT (mudah je.. kalau ada masalah tanya ^_^)