Cara Menambah Icon Pada Twitter Widget

Mencantikkan lagi Twitter Widget dengan Icon yang Menarik Perhatian Ramai.

Seperti yang saya janjikan semalam, hari ini saya ingin membuat tutorial bagaimana menambah/memasukkan icon pada widget twitter anda. Sudah tentu widget twitter anda akan diletakkan pada blog kan?

Jadi semalam saya mencuba dan aktifkan akaun Twitter saya. Jika anda hendak follow apa cerita terbaru saya, anda boleh follow saya di solehpolysas in twitter.



Update terbaru juga boleh dilihat disebelah kanan blog saya ini. Baiklah jom kita mulakan tutorialnya. Pertama sekali sudah pasti anda mahukan icon kan? Jadi anda pilihlah icon-icon twitter ini :




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



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



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

okey dah pilih, kemudian anda uploadlah gambar tersebut ke server percuma seperti photobucket atau server anda sendiri.

jika sudah, anda copy code ini :

<div style="float:right;margin:0 0 0 5px">
<img src="http://i51.photobucket.com/albums/f375/solehpolysas/twitter-bird-6.png?imgmax=800"/>
</div>

code yang bewarna merah adalah URL gambar yang anda upload tadi, anda tukarlah kepada URL gambar pilihan anda.

Jika sudah copy, anda hanya perlu memasukkan code tersebut bersama-sama code widget dari twitter.

Contoh code setelah digabungkan adalah seperti ini ;

<div style="margin: 0pt 0pt 0pt 5px; float: right;">
<a href="http://twitter.com/solehpolysas" target="_blank" rel="nofollow"><img
alt="follow solehpolysas" style="width: 169px; height: 169px;" src="http://i51.photobucket.com/albums/f375/solehpolysas/twitter-bird-6.png?imgmax=800"
rel="nofollow" title="Follow solehpolysas"/></a>
</div>

<div id="twitter_div">
<h2 style="display: none;" class="sidebar-title"></h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display: block; text-align: right; color: rgb(0, 0,
102);" href="http://twitter.com/solehpolysas" target="_blank" >follow
me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" target="_blank"
type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/solehpolysas.json?callback=twitterCallback2&amp;count=5"
target="_blank" type="text/javascript"></script>

Jadi itu sahaja, anda masukkan full code yang telah anda ubah suai tersebut didalam page element blog anda.

semoga berjaya semua.. enjoy..
Credit to Kolom Tutorial