Wednesday, May 13, 2009

Menambah Icon Pada Twitter Update

Pernah ada yang bertanya ke kang Rohman bagaimana cara menambahkan icon pada widget twitter Update seperti tampak pada gambar di bawah ini :

twitter

Untuk memasang icon seperti di atas, anda silahkan baca langkah-langkah di bawah ini :

 

Langkah #1

Tentukan dulu icon yang akan di pasang sesuai dengan keinginan. Sebagai bahan pertimbangan, anda bisa mendownload icon twitter yang cantik-cantik pada situs-situs berikut :

free-twitter-bird-icon-set[8]

Download di sini : http://www.productivedreams.com

twittering vector

Download di sini ; http://www.productivedreams.com

cute-twitter-birds

Download di sini : http://www.smashingmagazine.com

 

Langkah #2

Setelah anda menemukan yang di rasa cocok, silahkan uploadlah icon tersebut ke hosting tempat biasanya anda menyimpan gambar. Contoh hosting gambar gratis ; http://photobucket.com, http://tinypic.com, http://flicker.com. Atau jika kang Rohman biasanya mengupload ke blogger langsung.

Catat alamat URL dari icon yang telah anda upload tadi, misalkan alamatnya seperti ini :

http://lh6.ggpht.com/_pt7i0nbIOCY/SfpokN3_t7I/AAAAAAAAB6s/V8n1FOsLUAI/8_thumb%5B3%5D.png?imgmax=800

Buatlah kode seperti ini :

<div style="float:right;margin:0 0 0 5px">


<img src="http://lh6.ggpht.com/_pt7i0nbIOCY/SfpokN3_t7I/AAAAAAAAB6s/V8n1FOsLUAI/8_thumb%5B3%5D.png?imgmax=800"/>


</div>






 



Langkah #3



Ambil kode twitter pada account twitter anda di twitter.com. misal milik kang Rohman seperti ini :



<div id="twitter_div"><ul id="twitter_update_list"></ul><br/>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/rohman">Follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/rohman.json?callback=twitterCallback2&count=3" type="text/javascript"></script>


 



Gabungkanlah kode icon yang tadi dengan kode twitter sehingga menjadi seperti ini :



<div style="float:right;margin:0 0 0 5px">


<img src="http://lh6.ggpht.com/_pt7i0nbIOCY/SfpokN3_t7I/AAAAAAAAB6s/V8n1FOsLUAI/8_thumb%5B3%5D.png?imgmax=800"/>


</div>
<div id="twitter_div">


<ul id="twitter_update_list"></ul><br/>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/rohman">Follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/rohman.json?callback=twitterCallback2&count=3" type="text/javascript"></script>


Langkah #4




  1. Silahkan login ke blogger dengan ID anda.


  2. Klik Tata Letak.


  3. Klik tab Elemen Halaman.


  4. Klik Tambah Gadget.

    tambah-gadget




  5. Klik tanda plus (+)  untuk HTML/Javascript

    html




  6. Copy lalu paste kode yang tadi sudah di gabungkan.


  7. Klik tombol Simpan


  8. Selesai.



Ternyata mudah ya. Selamat mencoba!