Tutorial Status Twitter Di Header Blogspot

Hari ini aku tengok dah menjadi satu trend untuk buat status twitter dekat dalam blog. Mungkin ini salah satu strategi supaya dapat lebih exposure daripada readers supaya dapat lebih ramai follower. Yeah! Followers equal traffic. More traffic more money from Nuffnang! Agree? Mana tahu Nuffnang nak bagi empat belas Buffering Earning sekaligus. Baru boleh kalahkan RedMummy ye tak? Kadang-kadang kalau perasan diri kita ni famous macam artis terasa cool gak kan? HARHARHAR! Lame ass sungguh punya wish!

Apa yang aku cuba bebelkan ni sial? Macam mana bentuk rupanya yang aku cuba maksudkan dengan status twitter at header blogspot ni? Nak tengok contoh macam mana rupanya boleh la jenguk blog berikut dekat bahagian header ok. Jangan nak melilau dekat bahagian lain. Bodoh la jadinya.

cik epal
stabbed miles
belog cap ayam
muezangelo

Ok, dah dapat apa yang aku cuba sampaikan? Terasa cool gila dan kamu pun nak ada gak sebab takut orang kata out dated sebab tak ikut trend? Dekat sini aku sediakan tutorial macam mana nak pasang atau buat supaya twitter post kamu appear dekat header blog. Actually tutorial ni pun aku sekadar nak share dengan kamu semua. Aku dapat dari blog lain. INGAT! Tutorial ni hanya untuk pengguna Blogspot sahaja jadi kepada WordPress users jangan nak berperangai lahanat dekat sini dengan menyalak kata tak boleh. Memang aku nak facepalm. Pakai plugin la doh! Itu pun mau kena ajar ka? Mudah dan ringkas.

Let start our HTML Class 101

First Step

Firstly, apa yang perlu kamu kena buat adalah buat untuk backup coding template yang kamu tengah pakai sekarang ni in case tetiba alteration process menemui kegagalan. Ini aku pesan awal-awal. Tak nak dengar, gi mampus kalau template kamu huduh macam khinzir lepas tu. Lepas tu pastikan dekat bahagian Design ada tertera macam dekat gambar bawah ni;

Bila dah ada benda ni, next thing yang kamu kena buat adalah untuk pergi ke Design > Edit HTML dan cari code ini;

b:section class=’header’ id=’header’ maxwidgets=‘1‘ showaddelement=‘no‘

Bila dah jumpa, apa yang perlu kamu lakukan adalah untuk ubah value 1 dan no kepada value seperti code di bawah ni kemudian klik save;

b:section class=’header’ id=’header’ maxwidgets=‘3‘ showaddelement=’yes‘

Second Steps

Second step yang perlu kamu lakukan adalah untuk pastikan yang kamu dah ada gambar speech balloon yang kamu design sendiri atau hire designer yang sesuai dengan blog template kamu. Contoh macam dekat bawah ni;

Bila dah ada design tu, pergi dekat Design > Add Gadget > Edit HTML lepas tu masukkan code yang berikut;

<div class=’widget-content’>
<a href=”http://twitter.com/TWITTER-ID“></a><div><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>

HITAM

• TWITTER ID; Masukkan ID Twitter kamu
• URL-GAMBAR; Masukkan URL gambar header kamu
• count=1; boleh diubah untuk berapa post tweet yang mahu di tunjukkan

HIJAU

• Masukkan nilai width dan height bagi gambar header yang kamu guna

BIRU

• Ubah nilai nilai width dan height serta font untuk kesesuaian untuk berada dalam gambar header

PINK

• Adjust nilai ni sampai puas hati sampai posisi font yang ada dalam gambar header tu nampak elok

MERAH

• Tag <br/> boleh ditambah atau kurang mengikut kesesuaian yang kamu mahu berdasarkan posisi speech balloon.
• Tengok contoh dibawah untuk lebih kefahaman. Klik gambar untuk saiz besar.

Third Steps

Kalau kamu sedar, sekarang ni kamu dah ada 2 header. Jadi sekarang ni kamu kena buang header asal. Apa yang perlu kamu lakukan adalah untuk buang header asal. Pergi Dashboard > Design lepas tu klik dekat element  header yang asal contoh macam gambar dekat bawah ni;

Lepas tu set parameter by tick at instead of title and description macam yang aku tunjukkan dalam gambar dekat bawah ni;

Bila semuanya dah settle, sila la save dan refresh blog kamu dan tengok hasilnya. Thanks to muezangelo for this nice tutorial and tips. Rasa berguna apa kata kamu klik button like dekat atas tu and share it with other people or tweet this article ok? Thanks!