Adding the icon at Twitter Update

Someone once asked Kang Rohman how to add the icon at twitter Update widget as seen in the image below:

To add or install the icon as above, please read and follow the steps below:

Step #1

Determine the icon that you want to add as your desire. As a consideration, you can download the beautiful twitter icons at the sites below:

Download here : http://www.productivedreams.com

Download here ; http://www.productivedreams.com

Download here : http://www.smashingmagazine.com

Step #2

After you have found the desired icon, please upload your icon to the image host where you are used to host your images. The examples of free image hosting providers are http://photobucket.com, http://tinypic.com, http://flicker.com. Kang Rohman usually hosts directly the images to blogger.

Record the URL address of your uploaded icon, e.g.:

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

Make the code like this:

<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>

Step #3

Take your twitter code at your account in twitter.com. As an example, see Kang Rohman’s as follows:

<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>

Combine the icon code you have recorded with twitter code so it will be like this:

<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>

Step #4

1. Pleas login to blogger with your ID

2. Click Layout

3. Click on Page Element tab

4. Click Add a Gadget

5. Click the sign plus (+)  for HTML/JavaScript

    1. Copy and paste the combination of code

    2. Click Save

    3. Done

It is very easy, right? Happy trying!