Blogger Templates | Tips-Tricks | Widgets

30 Blogger | Add Reply Tag To The Comments

The most awaited and anticipated hack for Blogger Blogs was always a "Reply" tag to the comments like Wordpress. Now, you don't have to wait for an official release from the Blogger Team. Thanks to Marcher, a young blogger from China, who wrote this awesome and much easier hack for a BIG demand. Moreover, it's much easier too to install. As he writes his blog in Chinese I thought to post an English version of this hack for the English audience from Blogger platform with some added flavours from my end like I replaced Text with reply button image and changed the placing of code in the template.

DOWNLOAD REPLY BUTTONS

The Steps For Installation:

Important! Save a backup of your existing template before making any changes.

Go to Blogger > Layout > Edit HTML > Expand Widgets Template, find <b:include data='comment' name='commentDeleteIcon'/> </span> and paste the following code just after it;

Code:

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR BLOG ID HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Reply To This Comment' src='YOUR REPLY BUTTON IMAGE URL HERE'/></a></span>

Now, in the above code replace the texts in BLUE with your "Blog ID" and the texts in RED with the "Reply Button Image Url".

That's it! Now, save the template and feel good to have a new look of your blog.

4 Blogger | Google Buzz Button With Share Count

As we are aware of the Wordpress plugin for the Google Buzz Share Counter, one being used at Mashable, I wanted to have one for Blogger too and thanks to Dstats.net, for I used their download counter script and added some pieces of CSS as well as html codes and came up with this "Google Buzz Share Count Button" widget which almost resembles one from Wordpress, see it in action at the top right of this post.

But, to be very honest this actually counts the number of clicks it has got not the number of shares. Suppose you clicked the button and did not share still it has counted the click & will show the new count after the page is reloaded. For me this is enough for now as I will get to know at least how many clicks it got on a particular post.

If you want to have this widget on your blogger blog here are the steps to add it:

Important! Save a backup of your excisting template before making any changes.

Go to Blogger > Layout > Edit HTML and check the Expand Widget Templates option.

Now, find ]]></b:skin> and paste the following CSS code just before it;

Code:

/*By: Around The Web */
/*Url: http://www.aroundtheweb.co.in */
/* Google Buzz Button with Share Count
-----------------------------------------------
*/

.buzzit {
  height:65px;
  width: 60px;
  margin: 0;
  padding: 4px;
  line-height: 100%;
  float: right;
}
.buzzit span {
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnmxgduypv3KWSbJdaaiJOr4oXW585SzuiCzARcCi48sUJgbZy9aegaE1i2_IX3NVU5C2sf0z4Yr-zcBanFFw5P9I1cRcKLiViNoztZWB8t1Fz1Ic4Iph6KiR5ZjK68L_WVE84k1jB9TWu/s1600/gbc_bg.png) repeat center center;
  display: block;
  font: bold 10px Arial;
  color: #fff;
  text-align: center;
  margin:-55px 10px 0 20px;
  padding: 0 0 0 0;
  position:relative;
}

Now, find the first occurrence of <data:post.body/> and paste the following codes just before it;

Code:

<!--Google Buzz Button with Share Count By www.aroundtheweb.co.in Starts-->
<div class='buzzit'>
<a expr:href='&quot;http://dstats.net/download/http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google'><img alt='Buzz This' onmouseout='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ydIPbDZRgExo6wcN6tRoZQnZDzZpFsuq6uOW69y8UoRinlZBQxLv-Xn2ZhYEjSCyc1BvJbsFXcuQQDBBpdBJdDYmduTHXF-zlLsATKRFPxiiwPj42DjQo2o80ON6b1c1eym1G35nVRsf/s1600/g_buzz4.png&quot;' onmouseover='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZyAf_92NZajynVC6CiX67RqNKYtsHwuYW-opdt1clvKFuSusVWYEqA6dg4MwTe1xLlZF2asBgETDD-ZvmsZZ6BcvRAFF3dyyhxQNV73crPmYp5uhc57fHxhD7VOKcX_ytauY3qXtuTzz/s1600/g_buzz7.png&quot;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ydIPbDZRgExo6wcN6tRoZQnZDzZpFsuq6uOW69y8UoRinlZBQxLv-Xn2ZhYEjSCyc1BvJbsFXcuQQDBBpdBJdDYmduTHXF-zlLsATKRFPxiiwPj42DjQo2o80ON6b1c1eym1G35nVRsf/s1600/g_buzz4.png'/></a><span><script expr:src='&quot;http://dstats.net/dstatsjs.php?file=http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' type='text/javascript'>
</script><script type='text/javascript'>
document.write(dsCounter);
</script></span></div>
<!--Google Buzz Button with Share Count Ends-->

Preview your blog and if all is fine save the template. That's it!

For more "Google Buzz" icon styles click here.

Update:

Do not remove credit tags from the codes.

38 Free Blogger Template | Simply Supperb

This is another 2 column premium like free template for blogger platform and again with some exciting features like Twitter Updates, Featured Content Slider, Sliding AD Panel and lots more.

DEMO

I know you are wondering about the "Download Link", Where is it? If this is a free template there must be a download link to it. Yup! well, of course this is a free one but costs a little favour, don't worry I'm not asking for any bucks, the favour I am talking about is just that you need to subscribe to my blog's feed;

and then confirm me through the comment section or you can use the contact form (click the Contact Me tab @ sidebar). As soon as I receive your confirmation the download link will be sent to you.

You can also try some of my previous free blogger templates:

"Ishthyle" -Style Redefined (Listed among top 30 magazine style blogger templates @ Shoutmeloud.com)
Carbonika
Bombastic Blue
Awesome Gallery
I'm Smart

-----------------------------------
Update On 08 March, 2010: Download

Update On 14 March, 2010:

If you are experiencing any glitches with "Javascript" files on this template then either download the updated template file from the link above or find following codes;
Code:

<script src='http://www.yourjavascript.com/189322401250/jquery.corner.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/71113102201/startstop-slider.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/12301148121/readmore-right.js' type='text/javascript'/>

and replace respectively with following codes within the template;
Code:

<script src='http://www.weebly.com/uploads/3/9/3/0/3930875/jquery.corner.js' type='text/javascript'></script>
<script src='http://www.weebly.com/uploads/3/9/3/0/3930875/startstop-slider.js' type='text/javascript'></script>
<script src='http://www.weebly.com/uploads/3/9/3/0/3930875/readmore-right.js' type='text/javascript'></script>

4 Google Buzz Share Icons With Rollover (Hover) Effect

For the last few days the entire web is buzzing about "Google Buzz", a big step towards social media venture by Google. The whole blogosphere too is full with "Buzz" mantra from all possible ways like articles, comments, criticism etc. And among the all "Buzz" things flooded around the web I liked most was the "Google Buzz Social Icons" by Chethstudios, and picked the PSD source then added a little piece of my creativity (hope you all would like them) and came up with a few Icons with rollover (hover) effect codes that you can place in your blog to allow visitors to click and add the articles to Google Reader they like to.

So, here are the codes, just hover the mouse over each Icon image below to see the effect and copy the code just below the respective image you like to place on your blog;

Code:

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google'><img alt='Buzz This' onmouseout='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuLpKFeVlC5D3YvWDc4OleKR4M1hP1ekIgjyMLopGptSZFF_XCq13eSrAPJbZBdogKyc3RtXx5XWuAxrtQkpVABcfQQ8aVfTgNFT7eLgMZcmJeYjD79lrHi93vVVIp-8WDEKjHrJX5YciO/s1600/g_buzz1.png&quot;' onmouseover='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZyAf_92NZajynVC6CiX67RqNKYtsHwuYW-opdt1clvKFuSusVWYEqA6dg4MwTe1xLlZF2asBgETDD-ZvmsZZ6BcvRAFF3dyyhxQNV73crPmYp5uhc57fHxhD7VOKcX_ytauY3qXtuTzz/s1600/g_buzz7.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuLpKFeVlC5D3YvWDc4OleKR4M1hP1ekIgjyMLopGptSZFF_XCq13eSrAPJbZBdogKyc3RtXx5XWuAxrtQkpVABcfQQ8aVfTgNFT7eLgMZcmJeYjD79lrHi93vVVIp-8WDEKjHrJX5YciO/s1600/g_buzz1.png'/></a>

Code:

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google'><img alt='Buzz This' onmouseout='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrU1SguQvBL74cC7Y8p3YIXm_lRVHAoBeaahwkJ62iCiNd4yMH4jSot7cAdCHfC7e3wnjxwMEG9o0e__1Ppmraty3jJfLT4s3I-RoiWSJPKPIltCke7nZSY5iKGtMsedZxSUESfdzHiQux/s1600/g_buzz2.png&quot;' onmouseover='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZyAf_92NZajynVC6CiX67RqNKYtsHwuYW-opdt1clvKFuSusVWYEqA6dg4MwTe1xLlZF2asBgETDD-ZvmsZZ6BcvRAFF3dyyhxQNV73crPmYp5uhc57fHxhD7VOKcX_ytauY3qXtuTzz/s1600/g_buzz7.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrU1SguQvBL74cC7Y8p3YIXm_lRVHAoBeaahwkJ62iCiNd4yMH4jSot7cAdCHfC7e3wnjxwMEG9o0e__1Ppmraty3jJfLT4s3I-RoiWSJPKPIltCke7nZSY5iKGtMsedZxSUESfdzHiQux/s1600/g_buzz2.png'/></a>

Code:

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google'><img alt='Buzz This' onmouseout='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPZgCmNzE8DbVt-WR6gBFLlWJUePyuWJpn1nNrmSrW9V6XGk1417ml_t1ihnLp9SmYsob1Wu9SSGxgEeZ7a4h9mM9vAgsCj-IrwEcAoS-pEaeBZIT6tq1BQjC4X44zdH82OUUzEnwhngUP/s1600/g_buzz3.png&quot;' onmouseover='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZyAf_92NZajynVC6CiX67RqNKYtsHwuYW-opdt1clvKFuSusVWYEqA6dg4MwTe1xLlZF2asBgETDD-ZvmsZZ6BcvRAFF3dyyhxQNV73crPmYp5uhc57fHxhD7VOKcX_ytauY3qXtuTzz/s1600/g_buzz7.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPZgCmNzE8DbVt-WR6gBFLlWJUePyuWJpn1nNrmSrW9V6XGk1417ml_t1ihnLp9SmYsob1Wu9SSGxgEeZ7a4h9mM9vAgsCj-IrwEcAoS-pEaeBZIT6tq1BQjC4X44zdH82OUUzEnwhngUP/s1600/g_buzz3.png'/></a>

Code:

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google'><img alt='Buzz This' onmouseout='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ydIPbDZRgExo6wcN6tRoZQnZDzZpFsuq6uOW69y8UoRinlZBQxLv-Xn2ZhYEjSCyc1BvJbsFXcuQQDBBpdBJdDYmduTHXF-zlLsATKRFPxiiwPj42DjQo2o80ON6b1c1eym1G35nVRsf/s1600/g_buzz4.png&quot;' onmouseover='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZyAf_92NZajynVC6CiX67RqNKYtsHwuYW-opdt1clvKFuSusVWYEqA6dg4MwTe1xLlZF2asBgETDD-ZvmsZZ6BcvRAFF3dyyhxQNV73crPmYp5uhc57fHxhD7VOKcX_ytauY3qXtuTzz/s1600/g_buzz7.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ydIPbDZRgExo6wcN6tRoZQnZDzZpFsuq6uOW69y8UoRinlZBQxLv-Xn2ZhYEjSCyc1BvJbsFXcuQQDBBpdBJdDYmduTHXF-zlLsATKRFPxiiwPj42DjQo2o80ON6b1c1eym1G35nVRsf/s1600/g_buzz4.png'/></a>

Code:

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google'><img alt='Buzz This' onmouseout='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimUK7uQ0Ha5QKLD6pYpWjmGzNZ7ASJYD7aJnP3kn6_fdHU3BI6SGWdjnr8dASlK2sc_qs0RAlZ7YjMkkpOLZnMTUhrRMYpsmURZNjjjmoFJlIfC3sELfACkEgIi_YktQk5TcqnVmk1QQ1U/s1600/g_buzz5.png&quot;' onmouseover='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZyAf_92NZajynVC6CiX67RqNKYtsHwuYW-opdt1clvKFuSusVWYEqA6dg4MwTe1xLlZF2asBgETDD-ZvmsZZ6BcvRAFF3dyyhxQNV73crPmYp5uhc57fHxhD7VOKcX_ytauY3qXtuTzz/s1600/g_buzz7.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimUK7uQ0Ha5QKLD6pYpWjmGzNZ7ASJYD7aJnP3kn6_fdHU3BI6SGWdjnr8dASlK2sc_qs0RAlZ7YjMkkpOLZnMTUhrRMYpsmURZNjjjmoFJlIfC3sELfACkEgIi_YktQk5TcqnVmk1QQ1U/s1600/g_buzz5.png'/></a>

Code:

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google'><img alt='Buzz This' onmouseout='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8LOYzTCXyL1Vbq2Lg9jhWv_-dQB5K29CUcIip3Xnx1DP4Cha4yNMYme4Q2LbJXTaJyjMmZNzMNMl_RRESsAgRD3JTQExvgHXMsq4QHjdpeXcKLb7uteJsnSdWXR_PU8DROCzhpo2HRfdw/s1600/g_buzz6.png&quot;' onmouseover='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZyAf_92NZajynVC6CiX67RqNKYtsHwuYW-opdt1clvKFuSusVWYEqA6dg4MwTe1xLlZF2asBgETDD-ZvmsZZ6BcvRAFF3dyyhxQNV73crPmYp5uhc57fHxhD7VOKcX_ytauY3qXtuTzz/s1600/g_buzz7.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8LOYzTCXyL1Vbq2Lg9jhWv_-dQB5K29CUcIip3Xnx1DP4Cha4yNMYme4Q2LbJXTaJyjMmZNzMNMl_RRESsAgRD3JTQExvgHXMsq4QHjdpeXcKLb7uteJsnSdWXR_PU8DROCzhpo2HRfdw/s1600/g_buzz6.png'/></a>

Code:

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google'><img alt='Buzz This' onmouseout='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEingIhQ07fT6FiEMpm1RWQI-_ZxIEG9g5L1jirMBMNMRz8a-6I4oB9eu9aiS1LPi2cweNV_sM5Vi38WkQro-_IrJ8N4B88u4-deYzOKvqSp1PgpHneTOGrQBAw0O5yPQQWfnKavozvZXAfP/s1600/g_buzz8.png&quot;' onmouseover='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZyAf_92NZajynVC6CiX67RqNKYtsHwuYW-opdt1clvKFuSusVWYEqA6dg4MwTe1xLlZF2asBgETDD-ZvmsZZ6BcvRAFF3dyyhxQNV73crPmYp5uhc57fHxhD7VOKcX_ytauY3qXtuTzz/s1600/g_buzz7.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEingIhQ07fT6FiEMpm1RWQI-_ZxIEG9g5L1jirMBMNMRz8a-6I4oB9eu9aiS1LPi2cweNV_sM5Vi38WkQro-_IrJ8N4B88u4-deYzOKvqSp1PgpHneTOGrQBAw0O5yPQQWfnKavozvZXAfP/s1600/g_buzz8.png'/></a>

Enjoy Buzzing!

13 Blogger | Recent Posts Widget With Thumbnail

This one is based on Mlxperience's -- "Recent Posts Widget", I just wanted to add some more features that can be easily customized and make it quite more attractive. What I added? A "Comment Bubble" replacing the text (Comments), an animated "Read More Button" and font size customization tag for "Comments & Date" span. See the DEMO!

Screen-shot: Recent Post Widget

To install this widget on your blog, go to Blogger > Layout > Add A Gadget and paste the following codes in the content area;

Code:

<script language="JavaScript">
imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv-tNSE2AmT-MrcjTsRsQOkHSR6Iat0Jsg0qIAEw_2A69TGD8oLxOt3qHbYUX3D1_0lnEAhXhWFBCaKxkVcnjlQyvxBJtza21OPQ7e2u-ax4DpyReFi_iVoGJj1lZ5cWuCIPdzrrc3ruQ/s1600/img1.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKMT4OxMZoCyunvqzm33nFMsuXMrUfEgjx2NmZsyI9Gux5q6IzUR06jg4nQ0IzDp7utns6j30FwpaLGRWE8FZHG-uOt6VRUnpuPdKeN0KDe5aGAKPugGi1diirZhwMP5ue59pbyiT_yEk/s1600/img2.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ4DznNIE_lpSZQ8s71foU3hce2QWLgHQAILPevSJj7zTsmDE13cTveBpzuMWP_cNvhpF_JTFUWPrgPvaubCBYMPviMN62behe-vDJPVhFutWm4allTef1OC7iWZLCCxuSqtdM56RNqZo/s1600/img3.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZHSZ_dSuh-1ubiATdFhlLCz59-Qsq5mT8jjJcJDzejKgY6AtiQJPGJjF6QwYtRsZAFESDPqJM3C_0Ofi-sZATpAxau3JxhId3a65X_NgK6y55Wk76Lvmd8iSIE4q-6T21kBOE2-hLk2Q/s1600/img4.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibGHNDQoq6DZhRSH8nPCtn_6ERcEfCYghgySrq3ExPV_6bKeLCkpvetdmizJVRX5a_xgLH8iaNIWPlqHvqQgAUElUFM5dNuH3LhKBfP3wPRrXiVb0ph3hk7s9KoawOhKEw8UEq0ppfzno/s1600/img5.jpg";

showRandomImg = true;

tablewidth = 360;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 40;
imgheight = 40;

fntsize = 12;
acolor = "#000";
aBold = true;
icon = " ";

text = "";
fsize= "11";

showPostDate = true;

summaryPost = 60;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";

numposts = 5;

home_page =

"http://yourblog.blogspot.com/";
</script>
<script type="text/javascript" src="http://www.weebly.com/uploads/3/9/3/0/3930875/recentposts.js"></script>

Now, before saving the widget see below the customization part of the above code;

To edit the width of the widget as per your sidebar's width;

tablewidth = 360;

To edit the border & background color of the widget;

borderColor = "#ffffff";
bgTD = "#ffffff";

To edit the thumbnail image size;

imgwidth = 40;
imgheight = 40;

To edit the post title font size & color;

fntsize = 12;
acolor = "#000";

To edit the comments & date span font size;

fsize= "11";

To edit the post summary lenght;

summaryPost = 60;

To edit the post summary font size & color;

summaryFontsize = 11;
summaryColor = "#666";

To edit the number of posts to be displayed;

numposts = 5;

The most important part is to replace http://yourblog.blogspot.com/ with your blog's home page Url.

For advanced customization of the widget like changing the "Comment Bubble" and "Read More" button follow the steps below;

Download the recentposts.js.zip file and unzip it and open the file with a text editor.
Now, within this js file find <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje6JPF_8RoF0VJgdGOf1YhM03d8NUiRTthgCoEBJR4YY8TFzbI6uqmFuT2HkLqaa8rg4_vqWeiUUzGKCdFyjoH8mTPdjBXQ-3dyQbLgDQ1k8JlkBGLhUmK7tcX29omG0yimv6j3KNO6Umc/s1600/r_more.gif" style="padding-top:10px; padding-left:4px; height:15px; width:75px;"/></a> and replace the RED texts part with the Url of your new "Read More" image and edit the BLUE texts as per the width & height of your new "Read More" image.
To change the "Comment Bubble" find <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilAMJlZIKV5NuJeYA_9SxRrZv6-7nVVP9LMgg3eZLcSONxzGzyJZexgNd5dr6Pg47d6q-jg_oLIemLYPn389kGFWtrCm2kuglW0mg3y9B3qFyi98ppwD0WZAg1Ntex-AaoRPdG9GLg8RV8/s1600/c_bubble.png"/> and replace the RED texts part with the Url of your new "Comment Bubble" image.
Now, save the file and upload it to a javascript file hosting site like - YourJavascript.Com and in the above widget code replace the http://www.weebly.com/uploads/3/9/3/0/3930875/recentposts.js Url with the Url of your uploaded js file.

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

2 Blogger | Simple Mouseover Effect Code For Images

For a last couple of days I have been observing my blog's incoming traffic analytics through Clicky, and found most of the visitors were searching for "image mouse over" or "hover image" or similar keywords and phrases, while my blog was not carrying any post specifically to provide them with some codes to be used with any desired images or images to get such effect and rather then this it was some of the widgets I do have here are included with such codes that were catching attention of the search engines and drawing traffic to my blog, which may not be easier for some of the fellow bloggers to understand. Therefore, I decided to share an easiest code you can use to get this effect with any image on all major browsers but IE.

DEMO: Hover mouse over the image!

Here are the codes:

If you have to place image with mouseover effect through "Add & Arrange Page Elements" section on Blogger use this code (this code may work on IE);

Code:

<img alt='Image01' onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXdLj6rt-6uOsEOu7BkCTEb0W3hKpPhqXxT6v35MIO4-IEKSDS9nL45a5ON6hJ5G3wbYbjJqMchQ22u-cfAjjWBqVox7trz7l3kmoYnJQ1pmSXmkbvQHfoyRdK9Vm-QBZPchIEgZ_Pe3za/s1600/image02.jpg'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-ia-IjH0AZCw8em5ggZWVLq0oXhozjE3kUtAmR3YW_ifqi8rrXpoUFqST7RH91E-CJn-KCWKhZBabmruegEHYkEF9sDkuYJKN44f2g9bHQStejN4Ekmh9XRmTYQiBGis4N1UdotGquBR/s1600/image01.jpg" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-ia-IjH0AZCw8em5ggZWVLq0oXhozjE3kUtAmR3YW_ifqi8rrXpoUFqST7RH91E-CJn-KCWKhZBabmruegEHYkEF9sDkuYJKN44f2g9bHQStejN4Ekmh9XRmTYQiBGis4N1UdotGquBR/s1600/image01.jpg'" />

If you have to place image with mouseover effect through "Edit HTML" section on Blogger use this code (this code may not work on IE);

Code:

<img alt='Image01' onmouseout='this.src=&amp;apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-ia-IjH0AZCw8em5ggZWVLq0oXhozjE3kUtAmR3YW_ifqi8rrXpoUFqST7RH91E-CJn-KCWKhZBabmruegEHYkEF9sDkuYJKN44f2g9bHQStejN4Ekmh9XRmTYQiBGis4N1UdotGquBR/s1600/image01.jpg&amp;apos;' onmouseover='this.src=&amp;apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXdLj6rt-6uOsEOu7BkCTEb0W3hKpPhqXxT6v35MIO4-IEKSDS9nL45a5ON6hJ5G3wbYbjJqMchQ22u-cfAjjWBqVox7trz7l3kmoYnJQ1pmSXmkbvQHfoyRdK9Vm-QBZPchIEgZ_Pe3za/s1600/image02.jpg&amp;apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-ia-IjH0AZCw8em5ggZWVLq0oXhozjE3kUtAmR3YW_ifqi8rrXpoUFqST7RH91E-CJn-KCWKhZBabmruegEHYkEF9sDkuYJKN44f2g9bHQStejN4Ekmh9XRmTYQiBGis4N1UdotGquBR/s1600/image01.jpg'/>

In the above codes replace the RED texts with the URL of the main image and the BLUE texts with the URL of the hover image.

3 Let's Roar For Our Tigers

Since the "Save Our Tigers" - An Initiative Of Aircel, where Aircel has partnered with WWF-India to help save tigers, has been started I was excited to be a part of it and contribute to it by any means possible for me so, I joined the roar and twittered it, but it was bit surprising for me to find that such a great campaign's web-site is not carrying any badge at least for bloggers like me to help this campaign grow more by placing a cute kind of badge on our blogs or web-sites and let our visitors to know about it in an easy way. Hope they must would have planned for it to put a few someday. But I didn't want to wait with a hope and decided to create some myself and place on my blog and share with you all who too want to have one on their blog.

Badge 01:

Code:

<a href="http://www.saveourtigers.com" title="Save Our Tigers" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5oc4_qjPbWYb1yBKOjTP9Y_Uzd70ckPhisLtupoRMSEeTS5NQ3SfuS_aX5LJ1OPCdw0h-_XkyeaI1adH3BUFiUJpLUORt-_n49bMQiIR0Oj_SCIxFDVEubG2JErb3tcAQmCHJ_uhKQXJc/s1600/s_o_tigers01.png" alt="Save Our Tigers" border="0"/></a>

Badge 02:

Code:

<a href="http://www.saveourtigers.com" title="Save Our Tigers" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlNBlSCubJ_xMeYH8SE9zrz3-qwvPABguTSzhxLimZRFAy4TU8I_1nFN-rlNiF-O-yQ2pOuGtc_Lvh_b9gZRsrNPdLEnnn-_9yVWv7bgO-0KeEeLSSU6jVv39il-BNOB7iw0vltgvLal2I/s1600/s_o_tigers05.png" alt="Save Our Tigers" border="0"/></a>

Badge 03:

Code:

<a href="http://www.saveourtigers.com" title="Save Our Tigers" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXisfhP7kjL2l_0Ycc0PFpGcNEOPaU4EbzDmvzIW-LkbAGNAr0X4GekGgjCSfwm_5Lswq3dZU-ECU_EQKpC7nYGL0hIZFjYkNJ61ot7h1w6zfEnbTv0YxUWkXjb6uqS3CVGqzHg3iDQCqH/s1600/s_o_tigers04.png" alt="Save Our Tigers" border="0"/></a>

Badge 04:

Code:

<a href="http://www.saveourtigers.com" title="Save Our Tigers" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOVlvpOkQEqi8mek3vC-y6tCgNl9GlOyVFxI6mPiGmnyhFHrW-EcMy6LTHWs1QOe0OZBU_iPWydS8_a-hHJ4wKQGYH4ZOpMFD-Ffxct3ScuHeONbJPgToSNzP7QkUHReVQu3ztGP_IVCis/s1600/s_o_tigers06.png" alt="Save Our Tigers" border="0"/></a>

Badge 05:

Code:

<a href="http://www.saveourtigers.com" title="Save Our Tigers" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiILlW5aBftq7oPL66VAvvOLGj2rt5uurJjrfdOrcsE5T0gA2G4gyYfPahK0wx_jHBx6yTesBSGRyaA8mqD9CSkh8zlgMcnaRjNA6LQOEifQ-tn9629rBNpS5077WDeKRovSL-YPVOit6FF/s1600/s_o_tigers02.png" alt="Save Our Tigers" border="0"/></a>

Badge 06:

Code:

<a href="http://www.saveourtigers.com" title="Save Our Tigers" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiRMcyiEKIbIexdm1ifiRs0JkTQPvYhJw2ms1W7eABQTX8cA034YgdDNueOS1HApB4KrXt9gbcJI9F0BcafelH6KFRJ2smBY63Cw3Uvga7ru-0bwRkiN57gI55-9XP_QrksrzS3r7sNbn1/s1600/s_o_tigers03.png" alt="Save Our Tigers" border="0"/></a>

Simply, copy the code below the respective badge you want put on your blog or site and "ROAR"! The visitors of your blog or site will be redirected to the official web-site of "SAVE OUR TIGERS" campaign.

Note: I have not used the official logo of the campaign on these badges only the text style is same.