4 Four (04) Twitter Follow Me Buttons With Followers Counter

We have been using "Twitter - Follow Me" and "Followers Counter" buttons for a long, what if both comes together as a widget , it sounds good, isn't it! You can see one at the side-bar of this blog of mine, it looks cute.

So, here I'm sharing four of them with you all. But, make sure that you have registered you twitter account with twittercounter.com to get these widgets working for you.

To install this widget go to Blogger > Layout > Add a gadget > HTML/Javascript and paste any of the following codes in the content area and replace the texts in RED within the codes with your twitter user name/ID and save it.

• Twitter Button Widget 01:

Code:

<style>
.twt_me {
background: transparent;
width:128px;
height:128px;
padding-bottom:15px;
}
.twt_me img {
border:0;
}
.counter {
margin:-8px 0 0 0;
}
</style>
<center><div class="twt_me">
<a href="http://twitter.com/nrashish"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJGA0gw4jptTCNpNjfQAuhHoCk9x25GIzpKXCzL2mUADh9m2F7n64m-4_8uGXPu1cGDoPCURtShMQf3Yzemakk9izcXnMKOyLtCiFYNknO6VfIPrDkYVYMPRobKG__qCxc_vvLrmx28SLT/s1600/twt2.png"/></a>
<div class="counter"><script language="JavaScript" src="http://twittercounter.com/embed/nrashish/444444/F5D0A9" type="text/javascript"></script></div>
</div></center>

• Twitter Button Widget 02:

Code:

<style>
.twt_me {
background: transparent;
width:128px;
height:128px;
padding-bottom:15px;
}
.twt_me img {
border:0;
}
.counter {
margin:-8px 0 0 0;
}
</style>

<center><div class="twt_me">
<a href="http://twitter.com/nrashish"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS9Mc_Cm_2tPConkGMDFLmpGLGMStIwkXznMk_cLW25IfqC4N01NPf0Ead1ismLtmfm9nd1bjzibJLZKYdSVM15GifkHs1AEBRzcNpijeAgaDqoqDAeADVrhJEs35v15TTBl1Ea8fpLSAl/s1600/twt3.png"/></a>
<div class="counter"><script language="JavaScript" src="http://twittercounter.com/embed/nrashish/444444/FAAC58" type="text/javascript"></script></div>
</div></center>

• Twitter Button Widget 03:

Code:

<style>
.twt_me {
background: transparent;
width:128px;
height:128px;
padding-bottom:15px;
}
.twt_me img {
border:0;
}
.counter {
margin:-15px 0 0 0;
}
</style>

<center><div class="twt_me">
<a href="http://twitter.com/nrashish"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsjrjUTQ-BsMsI9cPu_9CN2DSBfPKhk8z8TS76NYJs9LB5mGlQkS98mMGlgYctdZG_eN3f-s3sCPaM2Ww8Wd6woxMtOh8IFwCygQ-Kgs5SrCFenCIryIaSXTR7oPqfYqucr1FvW2iM-sXe/s1600/twt4.png"/></a>
<div class="counter"><script language="JavaScript" src="http://twittercounter.com/embed/nrashish/FFFFFF/0174DF" type="text/javascript"></script></div>
</div></center>

• Twitter Button Widget 04:

Code:

<style>
.twt_me {
background: transparent;
width:128px;
height:128px;
padding-bottom:15px;
}
.twt_me img {
border:0;
}
.counter {
margin:-20px 0 0 0;
}
</style>

<center><div class="twt_me">
<a href="http://twitter.com/nrashish"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjKItu2OZUyMHz-iv9C0t3U72GLSo2_jQfLaIyO1O53c-fU-KflKmWdDhWgdTIpMtSGVmoOEEARQ9XKQEgGUoHYEzwWJLnQgJQ4671RQP2n_v9IL4Aamp4hjKRuGT8AYlO3G4DuCTM0GKB/s1600/twt5.png"/></a>
<div class="counter"><script language="JavaScript" src="http://twittercounter.com/embed/nrashish/FFFFFF/0174DF" type="text/javascript"></script></div>
</div></center>

For any further help with these widgets feel free to come through the comment section!

0 Free Twitter Backgrounds

Backgrounds

For last couple of weeks I had been trying to create some twitter backgrounds of my own. It was a tough job, at least for me, but finally I made it. I created five backgrounds of which four I'm posting here for you all, if you like, to download and have them as your twitter background. All these are looking fine in 1024x768 resoulution, I havn't tried them on higher resolutions, but if you wish you can try.





To download just click on an image to enlarge and then right click and save to your computer.
To upload to twitter, log on to your twitter account, go to the Settings > Design > Change Background Image > Browse (the saved image on your computer) > Save Changes. It's done now!

0 Twitter Buttons with Mouse Hover Effect Code for Blogger

Here are some twitter buttons for you all with code for mouse hover effect. First of all right click and save all images on you computer.

Now, upload any pair of images that you want to put as your twitter button on your blog to any image sharing site (like photobucket.com) as per your wish.

And paste the following code between <head> & </head> of your blog template's (path: Dashboard>Layout>Edit Html) source code;

Code:

<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="image1 source";
}
function mouseOut()
{
document.getElementById("b1").src ="image2 source";
}
</script>

Note: Change the texts in red on above code with the path of image1 & image2 sources of your uploaded pair.

Save the template.

Next step, in the Layout section of your Dashboard click on Add a Gadget>HTML/Javascript and in content area paste the following code;

Code:

<a href="http://twitter.com/yourtwitterpage" target="_blank">
<img border="0" alt="follow me on twitter" src="image1 source" id="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>

Note: Change the texts in red on above code with the path of image 1 source of uploaded pair and the text in blue with the path of your twitter page.

Save and view the blog, its done now!

(Note: I found all these twitter bird image sources on an online file sharing site without any license agreement, if anybody claims to be the owner and wants me to remove these images from my blog, please contact me for that. To do so please visit the contact me page on this blog.)