Rabu, 11 Mei 2011

How to add Twitter Update With Icon





Posted: 10 May 2011 11:29 PM PDT
How to add Twitter Update With Icon - In the past I’ve described about How to Add Twitter Updates gadget in Blogger, I believe that way is easy to be done by anyone including you who want to insert the twitter update to the blogger.
Actually that way already enough, but considered less attractive in terms of beauty. There is a way to make the twitter status update more interesting that is by insert the twitter icon to the update gadget, can be on top, right side, or below, depends on your own. Example like the following image:
twitter update

so, it's more interesting, isn't it?
If you are interested to install twitter icon on twitter status update gadget, then read this post completely.

Customize Twitter Update With Icon

Before we go to insert the code of twitter update with icon to your blog, there are several things must be adjusted to your twitter account. Here is the code sample of twitter update with icon.
<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"/></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/twitter_username">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/twitter_username.json?callback=twitterCallback2&count=3" type="text/javascript"></script> 
Which needed to be changed is the username code should be replace with your twitter username. For example, if my twitter address is http://twitter.com/howtoinblogger then the username must be howtoinblogger, so the code will be as follow:
<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"/></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/howtoinblogger">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/howtoinblogger.json?callback=twitterCallback2&count=3" type="text/javascript"></script>
You can change the twitter icon code as you like. The image address code are as follows:
http://lh6.ggpht.com/_pt7i0nbIOCY/SfpokN3_t7I/AAAAAAAAB6s/V8n1FOsLUAI/8_thumb%5B3%5D.png 

Replace the image address with your twitter icon address.

Add Twitter Update With Icon

Here are the steps to add twitter update with icon widget:
  1. Please login to blogger with your ID
  2. Click Design
    blogger design
  3. Usually you directly to Page Elements page, but if you don't click the Page Elements menu
    page elements tab
  4. Click Add Gadget
    add a gadget link
  5. Click Plus (+)  for HTML/ Javascript gadget
    html javascript gadget
  6. Paste the code below to the coloumn (remember! Change the twitter_username code with your twitter username) and click Save
    <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"/></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/twitter_username">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/twitter_username.json?callback=twitterCallback2&count=3" type="text/javascript"></script> 
  7. If you want to move the gadget recently created position, you can just move it and click the Save button which on top to finish.
  8. Finish

Now your twitter update widget is more attractive than ever. this aimed to add your followers on twitter.
How to add Twitter Update With Icon is a post from: Blogger Tutorial for beginners

Another useful blogger tutorials:

0 komentar:

Poskan Komentar