Add your Twitter updates to your Blogger

On the right side, you can see my Twitter updates.
Here is how you can add your Twitter to your Blogger.


1. Login to your Blogger and go to Layout.
2. Click "Add a Gadget" and select HTML/JavaScript. Add the following code.

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

3. In the above code, change YOUR-Twitter-NAME to your twitter name. If you want to change the number of updates, change count=10 to any number you wish.

4. Add the following CSS to your Blogger CSS and tweak it according to your taste.

/* Twitter */
#twitter_update_list li {
background-color: #EFF4FF;
text-indent: 0;
margin-bottom: 5px;
border: 1px solid #B5BDCF;
}
#twitter_update_list li span{
}

Read the rest of this entry »

Adding Tweet Button to your Blogger and Website

After reading an article by Woork, I added Tweet this to my bloggers. The article was simple but I thought I could add a little bit more details here.

Open your blogger and go to Layout.
Click Edit HTML then tick a box next to Expand Widget Templates.
Then find a line

<div class="post-footer-line post-footer-line-1">

Then after this line add the following line.

<div class="tweetmeme">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript"> </script>
</div>

Then add CSS just before the line.

]]></b:skin>

I add the following css to mine.

tweetmeme {
    width: 70px;
    height: 75px;
    float: left;
}

For your normal website, you can use the following code where you want to add Tweetmeme.

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

You can find an Official documentation.

Read the rest of this entry »