Twitter di Blog

Terinspirasi dari blognya bang Muhammad Ikrom nih untuk buat burungnya Twitter melayang-layang di blog. Seperti ini kisahnya,

1. Login ke akun blogger sobat

2. Kemudian pilih"Opsi Lainya">>Tata Letak>>Tambah Gadget>>HTML/JavaScript

3. Masukkan kode dibawah ini kedalamnya

<!-- floating twitter Bird -->

<script type="text/javascript" src="http://misbahudin-dcaesga.googlecode.com/files/twitter-terbang.js"></script>


<script type="text/javascript">

var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMfqtf45kjBJikMvuQM56A1IxPOZMK4NWH4kb5d_wddOY5dfKgHRbgJYSeK00Y9_5wLdBM27AV-fhCkMv32lfsnN0INu5A7b8yC6A64E4KGM-6EUjxA5k7EByibHmVt5nHBwlUkEIQ63o/s1600/cyan+bird.png";

var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3",

"h4","p","code","object","a","b","strong","span");

var twitterAccount = "http://twitter.com/#!/robz_hitz";

var tweetThisText = "Twitter - UserID http://slinder9.blogspot.com/";

tripleflapInit();

</script>

Ganti yang berwarna merah dengan ID Twitter sobat,dan untuk yang berwarna biru ganti dengan URL blog sobat.

4. Kalo sudah jangan lupa di"Save"ya sob.

Untuk lengkapnya lihat di pojok info. Nah kalo diperhatikan script yang ijo itu kan milik orang. Nah saya ingin membuat gambar milik saya sendiri. Ini untuk mengantisipasi, bila sewaktu-waktu gambar tersebut dihapus oleh pemiliknya maka kita akan kehilangan gambarnya. Jika kita punya sendiri maka kita yang punya hak milik. Jadi kalo punya saya jadi begini scriptnya:

<!-- floating twitter Bird -->

<script type="text/javascript" src="http://misbahudin-dcaesga.googlecode.com/files/twitter-terbang.js"></script>

<script type="text/javascript">

var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Jd262UNZhNf14jvyX3b4MCnLMJnYgXxqgm38HFBfaywUZ0HZlR1gQFoFIkE2hRJZaSJSo6lU7StZMf4T9C-ejpH35owYGzORhyphenhyphenfxpq6tdphr_24z39WaEjD48M4pKA3OsXswars0dTJz/s1600/cyan+twitter+gunawanyuli+guvysidog.png";

var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3",

"h4","p","code","object","a","b","strong","span");

var twitterAccount = "http://twitter.com/gunawanyuli";

var tweetThisText = "Twitter - UserID http://guvysidog.blogspot.com/";

tripleflapInit();

</script>


Caranya adalah kita upload saja gambar burungnya ke blog kita. Dapet dari mana gambarnya? Ya dari buka link ijo yang dipake bang Muhammad trus di download. Begini biar lebih jelas:

1. Login ke blogger saudara

2. Buat entri baru

3. Upload gambar tadi ke halaman edit tersebut

4. Klik kanan gambar yang sudah masuk ke entri, lalu pilih copy link

5. Copy link tersebut ke notepad ato tulis tangan :D

6. Simpan entri dengan gambar tadi (tidak usah dipublikasikan). Kasih judul juga boleh. Jadi entri ini akan jadi draft.

7. Masuk ke Tata Letak>>Tambah Gadget>>HTML/JavaScript, taruh layoutnya dimana aja.

8. Masukkan script tadi

9. Yang "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Jd262UNZhNf14jvyX3b4MCnLMJnYgXxqgm38HFBfaywUZ0HZlR1gQFoFIkE2hRJZaSJSo6lU7StZMf4T9C-ejpH35owYGzORhyphenhyphenfxpq6tdphr_24z39WaEjD48M4pKA3OsXswars0dTJz/s1600/cyan+twitter+gunawanyuli+guvysidog.png" diganti dengan alamat yang sudah saudara copy ke notepad ato tulis tangan tadi :D, "http://twitter.com/gunawanyuli" alamat ID twitter, dan biru blog saudara.

10. Simpan

11. Simpan Setelan

12. Lihat apakah terjadi perubahan di halaman blog Saudara



Berikut adalah tampilan hasil screencapture burung saya yang di blog.

Tampilan di Google Chrome





Tampilan di browser bawaan Galaxy Young






Sekian dari saya, semoga bermanfaat.



####update 17 Juli 2013####
Untuk langkah ke 7 bisa diganti dengan masuk ke edit HTML dan cari <style type='text/css'>

Paste kode di atas di atas kode <style type='text/css'>