Customized twitter widget for blogger blogs



Twitter is definitely one of the most successful social networking sites which almost all the bloggers use. As I’ve seen many bloggers using the original twitter widget available in the official twitter website. Now In this tutorial you can stylize your twitter widget like this and make your blog look more beautiful. LIKE the one below

 Customized twitter widget for blogger blogs
Simple Customized twitter widget for blogger blogs.

There are few steps to be followed you just need 5 minutes to design a customized twitter widget for blogger.

Step1. Visit the twitter page and get the code for twitter here.

Step2. Your code will look something like the one below

<div id=”twitter_div”>
<h2 class=”sidebar-title”>Updates Via Twitter</h2>
<ul id=”twitter_update_list”></ul>
<a id=”twitter-link” style=”display:block;text-align:right;” href=”http://twitter.com/cheth”>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/cheth.json?callback=twitterCallback2&amp;count=1″ type=”text/javascript”></script>

Step 3. Now to add the twitter bird you can see in the code

div id=”twitter_div”

You have to insert the style part between

<div style=”background: url(http://i385.photobucket.com/albums/oo295/chethstudios/tweet_cheth.gif) top left no-repeat; padding-left: 50px;” id=”twitter_div”>

This will add the twitter bird from twitterific.

Step 4. Now if you want to insert a background color like I’ve used orange here you have to: add hte code below before your url

style=”background: #EC4705;”

Step 5. Now your final code will look like this.

<div style=”background: #EC4705;”url(http://i385.photobucket.com/albums/oo295/chethstudios/tweet_cheth.gif) top left no-repeat; padding-left: 50px;”id=”twitter_div”>
<h2 class=”sidebar-title”>Updates Via Twitter</h2>
<ul id=”twitter_update_list”></ul>
<a id=”twitter-link” style=”display:block;text-align:right;” href=”http://twitter.com/cheth”>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/cheth.json?callback=twitterCallback2&amp;count=1″ type=”text/javascript”></script>

That’s it your new awesome twitter widget is ready to be added to your blog. Go to your Edit Layout >> Add a Gadget >> HTML / Javascript.

Here I’ve used #EC4705 as the background color you can change the codes and add any background color you like. ( for yellow use #FBF807, you can find the codes on internet)

Here, for demonstration I’ve used my username as cheth . For any assistance you can comment here or direct message on twitter here.

Follow me on twitter for any help twitter profile

I promise to be back with more useful blogger widgets and hacks.
posted in twitter hacks for blogger.

PinExt Customized twitter widget for blogger blogs











Related Posts

Blogger Toolbox: Fresh, Free and Stunning Blogger Templates

40+ New and Fresh Blogger Templates

BloggerPower- A Super Flexible Blogger Template

Glassical: A Free Blogger Template ~ SmashingMagazine

Mindblowing Premium-Like Free Blogger Templates

Blogging Faceoff: Blogger vs. WordPress

HOW TO: Official Facebook Share Counters for Blogs

Create Mobile Version of Blog: 12 Free Alternatives

jQuery Powered Text / Font Resize Widget

HOW TO: Elegant CSS Message Boxes for Blogs

3 Comments

  1. Greetings,

    This is a message for the webmaster/admin here at http://www.chethstudios.net.

    May I use part of the information from this post above if I give a link back to this site?

    Thanks,
    Charlie

    • Admin

      02.24.2011

      Reply

      Sure!

  2. Hi there,

    Thanks for sharing this link – but unfortunately it seems to be down? Does anybody here at http://www.chethstudios.net have a mirror or another source?

    Thanks,
    William

Leave a Reply








+ 9 = 18



Recent Tweets

Follow Me On Twitter →

Email Updates

Get all our latest posts delivered right to your mailbox.