Blogger Templates | Tips-Tricks | Widgets | Add-ons

Blogger | Add Reply Tag To The Comments

noreply@blogger.com (Googy) — Sat, 20 Feb 2010 09:33:00 +0000

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.

Blogger | Google Buzz Button With Share Count

noreply@blogger.com (Googy) — Thu, 18 Feb 2010 22:38:00 +0000

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.

Free Blogger Template | Simply Supperb

noreply@blogger.com (Googy) — Wed, 17 Feb 2010 00:23:00 +0000

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>

Google Buzz Share Icons With Rollover (Hover) Effect

noreply@blogger.com (Googy) — Sun, 14 Feb 2010 14:08:00 +0000

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!

Blogger | Recent Posts Widget With Thumbnail

noreply@blogger.com (Googy) — Thu, 11 Feb 2010 12:14:00 +0000

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!

Blogger | Simple Mouseover Effect Code For Images

noreply@blogger.com (Googy) — Wed, 03 Feb 2010 09:43:00 +0000

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.

Let's Roar For Our Tigers

noreply@blogger.com (Googy) — Tue, 02 Feb 2010 12:17:00 +0000

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.

Free Blogger Template: Ishthyle - Style Redefined

noreply@blogger.com (Googy) — Fri, 29 Jan 2010 11:08:00 +0000

This is another 2-column template with some great pre-added features and working fine with all latest versions of major browsers.

Screen-shot:Ishthyle-Template

DEMO | DOWNLOAD

Features:

Auto Read More with thumbnail.
Navigation Buttons on top right corner.
Featured Images Widget with Sliding Panel.
Stylish Post Header Background, Calendar Icon, Read More Button & 125x125 Ad Banner.
Social Media Bookmarking Widget.
Search Bar Widget.

Credits:
For Social Media Bookmarking Icons: Evohosting

--------------------------------------
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/25949711022/jquery.cycle.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/8314201106/readmore.js' type='text/javascript'/>

and replace with following codes respectively 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/jquery.cycle.js' type='text/javascript'></script>
<script src='http://www.weebly.com/uploads/3/9/3/0/3930875/readmore-ishthyle.js' type='text/javascript'></script>

Blogger | 15 Awesome Calendar Icons For Post Date Header

noreply@blogger.com (Googy) — Sat, 23 Jan 2010 13:07:00 +0000

A calendar icon adds little beauty to a blog when used as post date header. You can see one here on this blog or might have seen on several other blogs around the web. And if you don't have it and wish to have a good looking one on your blog then grab it here for today I'm sharing fifteen (15) awesome calendar icons with you all to choose the best that suits your blog.

DOWNLOAD (cal_icons.zip)

Now, most of you must be wondering what to do with the icon only, so here goes the installation steps and codes to see this in action on your blog;

Step 01:

Go to Blogger > Layout > Edit HTML > (click on) Download Full Template and save a backup of your template.

Step 02:

(Check) Expand Widget Templates, find ]]></b:skin> and now paste the following CSS codes just above it;

Code:

* Post Date Header Calendar Icon
-----------------------------------------------
*/
.calendar {
height: 50px;
width: 45px;
background: url(Calendar Icon Image Url Here) no-repeat;
font: normal 22px Arial;
color: #9C9284;
text-align: center;
margin: 0 4px 4px 0;
padding: 0 2px 0 0;
line-height: 100%;
float: left;
}
.calendar span {
height: 18px;
display: block;
font: normal 11px Arial;
color: #ffffff;
text-align: center;
padding-top: 0;
}

and replace the texts in RED with the Url of Calendar Icon that you have chosen as per your blog's look and uploaded (to the image hosting site you use), and you can also play with the texts in Blue in the above code to change the colour of the texts that will appear with in the calendar icon.

Step 03:

Now find <h3 class='post-title entry-title'> and paste following codes just before it;

Code:

<div class='calendar'>
<script type='text/javascript'>
var timestamp = &quot;<data:post.timestamp/>&quot;;
if (timestamp != &#39;&#39;) {
var timesplit = timestamp.split(&quot;,&quot;);
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(&quot; &quot;);
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
}
</script>
<span><script type='text/javascript'>document.write(date_mmm);</script></span>
<script type='text/javascript'>document.write(date_dd);</script>
</div>

and save the template.

Step 04:

This is the most important step, move to (Blogger) > Settings > Formatting and scroll down to the Timestamp Format options and choose the format just as shown in the image below;

Screen-shot: Timestamp Format

Now, save your settings, check preview of your blog and enjoy a new look of your blog with a sweet smile on your face.

For any further help do leave a comment !

Free Blogger Template: Veer - The Warrior

noreply@blogger.com (Googy) — Thu, 21 Jan 2010 18:41:00 +0000

Nothing official about it, just consider it as an unofficial act of mine promoting my favourite bollywood superstar Salmaan Khan's most awaited mega movie "Veer - An Epic Love Story Of A Warrior" that is to be released today itself, and here I wanted to release my part of it just for fun, so here it is another free blogger template: "Veer - The Warrior"!

Screen-shot:Veer-The Warrior Blogger Template

DEMO | DOWNLOAD

To know all about the movie visit: Veer

Template installation instruction is included with "Download Pack", for any further help leave a comment!

Blogger | Free 125x125 AD Banners

noreply@blogger.com (Googy) — Wed, 20 Jan 2010 08:11:00 +0000

Today I'm going to share eight different 125x125 ad banners in four different colors and with two different styles. Confused?? Ok, it's a simple calculation, the quantity is eight, i.e.;

Glossy Orange
Glossy Green
Glossy Black
Glossy Blue
3D Orange
3D Green
3D Black
3D Blue

Now, the four different colors are;

Orange
Green
Black
Blue

And, the 2 styles are;

Glossy with rounded corners.
3D (I used the 3D gradients)

Screen-shot

DOWNLOAD (in zip format)

If you don't have 125x125 AD panel on your blogger blog and want to add then go to Blogger > Layout > Add a gadget (at sidebar & width of sidebar should be more than 250px) > HTML/Javascript and paste the following code in the content area;

Code:

<!-- 125x125 Banner AD Panel Starts-->
  <center><a href='125x125 AD LINK URL'><img src='125x125 Banner Image URL'/></a> <a href='125x125 AD LINK URL'><img src='125x125 Banner Image URL'/></a></center>
<center><a href='125x125 AD LINK URL'><img src='125x125 Banner Image URL'/></a> <a href='125x125 AD LINK URL'><img src='125x125 Banner Image URL'/></a></center>
<!-- 125x125 Banner AD Panel Ends-->

and replace the RED texts with the 125x125 banner image Url(s) & BLUE texts with link Url(s).
Now, save the widget and check preview.

Free Blogger Template: Carbonika

noreply@blogger.com (Googy) — Mon, 18 Jan 2010 05:49:00 +0000

This is another 2 column template and a dark one with left sidebar and main wrapper at the right side. Here in this template I have given sliding RSS & Twitter buttons at the top right corner, hope you all would like that. 125x125 ad box at the sidebar, default avatar image, admin's comment with different backgroud are some common though great features included in this template. The rounded corner effect is working well with Firefox & Safari but there are some glitches with Opera & IE. All rest fine and tested on Firefox 3.5, IE8, Opera 10.10 & Safari 4.

Screenshot- Carbonika Template

DEMO | DOWNLOAD

Installation instructions is included with download pack. For any further help come through the comments section.

Free Blogger Template: Bombastic Blue

noreply@blogger.com (Googy) — Fri, 15 Jan 2010 08:25:00 +0000

This is a three (03) column blogger template with left and right sidebars and pre-added features like "Follow Me" button with "Followers Counter", "Email Subscription Form Widget" for feeds and "Related Posts Widget" at post footer. There is also a cute "Calendar Image" before the post content showing date of the post.

Screen-shot: Bombastic Blue Template.

DEMO | DOWNLOAD

Installation Steps:

Backup you existing template:

Go to Layout > Edit HTML, and then click Download Full Template and save it.

Install "Bombastic Blue" Template:

Go to Layout > Edit HTML
Click on the Browse Button and upload the bombasticblue-template.xml file.
Click on the Save button.

To edit "Navigation Menu-bar" find the following codes;
Code:

<ul>
<li><a expr:href='data:blog.homepageUrl'>HOME</a></li>
<li><a href='LINK URL'>LINK 1</a></li>
<li><a href='LINK URL'>LINK 2</a></li>
<li><a href='LINK URL'>LINK 3</a></li>
<li><a href='LINK URL'>LINK 4</a></li>

and replace RED texts with link Url(s) and link titles respectively as per your requirement.

To learn how to edit "Twitter Follow Me & Followers Counter Widget" click here.

To learn how to edit "Email Subscription Form Widget" for feeds click here.

Credits:
For Social Media Icons at sidebar: Bruno Maia, IconTexto - http://www.icontexto.com

Six (06) Free Read More Buttons

noreply@blogger.com (Googy) — Mon, 11 Jan 2010 15:16:00 +0000

"Read More" is a pretty blogger feature which allows visitors to have a look of a portion of text and image from the beginning of each post as summary instead of entire post. If a visitor wants to read the full post, simply clicks on "read more" link and gets redirected to the full post. Some bloggers use text link and some a image as "read more" link. So, if you are using image link and want to replace with some other image or if you are using text link and planning to replace with an image link here are six (06) simple though gorgeous "Read More" images for you all to use freely.

Download complete set in .zip format from here. Hope you will like them all.

Free Blogger Template: Techno Mantra

noreply@blogger.com (Googy) — Mon, 11 Jan 2010 05:30:00 +0000

This is another 2-column blogger template with quite similar resemblance with my earlier template, Wood Craft. Here in this one I have replaced or say changed the background images and colours of some parts as Content Wrapper, Footer Columns, Menu-bar, and Sidebar Headings. Major change is the addition of rounded and notched corners to some common visible parts like Header Wrapper Top, Menu-bar Bottom, Main Wrapper, Content Wrapper, Sidebar Wrapper, Headings and Footer Columns & Footer. Rest is almost same.

DEMO | DOWNLOAD

For installation steps visit Free Blogger Template: Wood Craft

Credits:
For Top Social Media Icons: Chethstudios
For Footer Columns Background: Backgrounds Etc.

Four (04) Twitter Follow Me Buttons With Followers Counter

noreply@blogger.com (Googy) — Wed, 06 Jan 2010 23:40:00 +0000

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!

Blogger | Free Image Hosting Alternative

noreply@blogger.com (Googy) — Tue, 05 Jan 2010 08:04:00 +0000

Today I found this website, Picimg.com, by Xoise Solutions which allows free image hosting and supports all major formats - GIF, PNG, JPEG and BMP. No registration required, can upload 5 images at a time (but file name gets changed). There is no any information regarding image size and bandwidth limitations on the website. So, I wish and hope there should not be any such limitations.

Although, we know that Blogger itself provides us a good image hosting service, this (Picimg.com) too could be considered as a good alternative.

Update as on 15th January, 2010: I suggest not to use this site for image hosting as some glitches reported with it.

Blogger | Social Media Bookmarking Widget With Fisheye Effect

noreply@blogger.com (Googy) — Fri, 01 Jan 2010 20:12:00 +0000

This is another great jQuery magic, with Fisheye components from Interface and the icons I used here are from Icons etc. Here is the link to the DEMO.

Now, the steps to implement this widget to your blogger blog. Go to Blogger > Layout > Edit Html and click on Download Full Html and save it to have a backup of your template.
After the above step check on Expand Full Widget Template and place following two (2) codes within <head> and </head> section of your template;

Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/></script>
<script src='http://www.yourjavascript.com/502931191293/interface.js' type='text/javascript'/></script>

Now, find ]]></b:skin> in your template and place the following CSS codes just above it;

Code:

/* Social Bookmarking Widget */

#smb2 {
width: 100%;
position: relative;
padding-bottom:30px;
top:-20px;
}
.smb-container2 {
position: absolute;
height: 50px;
padding-left: 20px;
}
a.smb-item2 {
display: block;
font: bold 10px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
top: 0;
bottom: 0;
position: absolute;
text-align: center;
text-decoration: none;
}
.smb-item2 span {
display: none;
padding-left: 20px;
}
.smb-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}

The final step is to find <div class='post-footer-line post-footer-line-3'> and place the following codes just after it;

Code:

<!--Social Bookmarking Widget Starts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='font-size:85%; font-weight:bold;'>Bookmark &amp; Share:</p>
<div class="smb" id="smb2">

<div class="smb-container2">
<a class="smb-item2" expr:href='"http://del.icio.us/post?url=" + data:blog.url + "&amp;title=" + data:blog.title' target='_blank'><span>Delicious</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggJ6GXTIGPaMerSl36Esr5SiQAXBHgNt26_vFErHNVX858J4-yOeHLdLDrdV9xTPwyxtP2-O_TVo3NmZbxv8xkzCzYmyn_UOgLSarTkKxSVq6rerocHvekW_eJTj7buwxy87ATS8RLuzgf/s1600/delicious.png" alt="Delicious" /></a>
<a class="smb-item2" expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><span>Twitter</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL4T8k82vkzejfhRIEMuLPuv7_deOKMdYDzhsg5W1x8piFO0sOOuEC_WoxUW3laLMu_BE5_j_iHut1GQP-bcudThgDqF2RuBA4Ea_AViyNpxYLc58PBsGAliIv1LmP7otGcaaYd0NqqyCv/s1600/twitter.png" alt="Twitter" /></a>
<a class="smb-item2" expr:href='"http://www.facebook.com/share.php?u=" + data:blog.url' target='_blank'><span>Facebook</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQph_JMmPYeZ1I-yQAPUb8vfOq1IXk-lKkspjWd6iHBsfyI7f_x1B6eO_7hU-OCV7-6eswME28atlDRJ93e8f5DMFrnJ8AVJn6bx3K6-Ughw1J0wK6Fj0gZE3RclnCNFj2pvLHlYJjrvWy/s1600/facebook.png" alt="Facebook" /></a>
<a class="smb-item2" expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:blog.url + "&amp;title=" + data:blog.title' target='_blank'><span>Digg</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjeRqie8jdRmlHU8z3Btay7PzajL9gEupeP3fYxFxeV9ArkZPKLrhyphenhyphenpMEydgLmorLeskU6Fo-OvsGj6LsJ4KJsOci5kY5w2oSRglRrmfAHUsSTG_cAYin5XcSf4n7eEWIBHKvveIBM2tjl/s1600/digg.png" alt="Digg" /></a>
<a class="smb-item2" expr:href='"http://www.stumbleupon.com/submit?url=" + data:blog.url + "&amp;title=" + data:blog.title' target='_blank'><span>Stumbleupon</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk12D10eK5YE6vWzR9-o_gE08rEh13YO83832KuWLqCCUTh9SXadXGIpafzJdFAEB4Hs0uGHtOaDGBIJc9Y4WJI60a878KJg9KZZUOUY8SzK1JxRXGN3XjPDis7BJUQwUkHZJYuJPfWNT9/s1600/stumble.png" alt="StumbleUpon" /></a>
<a class="smb-item2" expr:href='"http://technorati.com/faves?add=" + data:blog.url' target='_blank'><span>Technorati</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ4APBclUCRh7RUt_usUQNN-UBdeyBg69AYkYVw7JLSo8S59xIqpxpY-zZ56l_Kn1YvE4p8vpJCEV8yxeG-rY6hBbDwR7agC3neJHazM5GwOEAeCYlYC0eo-3ihPHShp6upp_t4pU5_7sr/s1600/technorati.png" alt="Technorati" /></a>
<a class="smb-item2" expr:href='data:blog.homepageUrl + "feeds/posts/default"' target='_blank'><span>RSS</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQVc9ib-s0PQ78wEWCdN4yuI2S86xIvopPPvOEG0vmovI9Hw-PEMl6wzZwqujV_Vn074JIGrtWlOeeLZ6JWyr5UbCI3YLpnDKsAwaB6jWGJtKWPdYdUFtKSDsH-Xwkbt5mNJ1UwwohAtuK/s1600/rss.png" alt="RSS" /></a>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(
function()
{
jQuery('#smb2').Fisheye(
 {
  maxWidth: 64,
  items: 'a',
  itemsText: 'span',
  container: '.smb-container2',
  itemWidth: 60,
  proximity: 80,
  alignment : 'left',
  valign: 'bottom',
  halign : 'center'
 }
)
}
);
</script>
</b:if>
<!--Social Bookmarking Widget Ends-->

Save the template and you are done.

Use only 128x128 pixels icons, in case you would like to replace them.

Free Blogger Template: Wood Craft

noreply@blogger.com (Googy) — Wed, 30 Dec 2009 01:46:00 +0000

At the end of the year 2009 waiting for a few hours to go and welcome 2010, I wanted to publish another blogger template as a new year gift for you all, no this is not the end I am coming with lots of more templates in future with new and exciting experimental features, so for now here it is another free blogger template - Woodcraft. Now, now you may ask what's new with that? So, click on the demo link below and experience the difference! I have given jQuery based page-curl effect on main-wrapper (i.e below post). When you are on hompage you will see it at the right side assuming it as saying to move to the next page, and when you are on any inner page it appears to both left and right sides assuming as saying either move to the next page or to the previous.

Screen-shot: Page-curl effect on homepage

Screen-shot: Page-curl effect on inner-pages

Another gorgeous feature is the "Recent Posts/Updates" widget having a "Subscription Form Balloon (or say Bubble)" on top directing visitors to subscribe to the feeds via email.

Screen-shot: Recent Posts/Updates Widget with a email subscription form widget on top

Screen-shot: Woodcraft Template on IE-8

DEMO | DOWNLOAD LINK 1 | DOWNLOAD LINK 2

Installation Steps:

Backup you existing template:

Go to Edit HTML, and then click Download Full Template and save it.

Install "Stunning Looks" Template:

Go to Layout > Edit HTML
Click on the Browse Button and upload the woodcraft_Template.xml file.
Click on the Save button.

Edit Widgets:

To edit top "Social Media Networking Widget" find the following codes in template;

Code:

<!--TOP SOCIAL MEDIA ICONS WIDGET STARTS -->
<div id='sm_icons'><span class='digg'><a href='#Digg' target='_blank'>Digg</a></span> <span class='delicious'><a href='#Delicious' target='_blank'>Delicious</a></span> <span class='facebook'><a href='#Facebook' target='_blank'>Facebook</a></span> <span class='stumble'><a href='#Stumble' target='_blank'>Stumble</a></span> <span class='technorati'><a href='#Technorati' target='_blank'>Technorati</a></span> <span class='linkedin'><a href='#LinkedIn' target='_blank'>Linkedin</a></span> <span class='twitter'><a href='#Twitter' target='_blank'>Twitter</a></span> <span class='feedit'><a href='#FEED URL' target='_blank'>Subscribe</a></span> <span class='emailit'><a href='http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER FEED TITLE' target='_blank'>Via Email</a></span></div>
        <!--TOP SOCIAL MEDIA ICONS WIDGET ENDS -->

and replace the RED texts with your profile link for the respective social networking site, BLUE text with your blogs feed Url and the text in PINK with your feedburner feed title.

To edit the top navigation menu find the following codes;

Code:

<ul>
<li><a expr:href='data:blog.homepageUrl'>HOME</a></li>
<li><a href='LINK URL'>LINK 1</a></li>
<li><a href='LINK URL'>LINK 2</a></li>
<li><a href='LINK URL'>LINK 3</a></li>
<li><a href='LINK URL'>LINK 4</a></li>
</ul>

and replace the RED texts with respective link and titles.

To edit the "Email Subscription Form Widget" find the codes shown below;

Code:

<div id='subsfeed'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER FEED TITLE&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='subsfeed_field' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;email address here&quot;;}' onfocus='if (this.value == &quot;email address here&quot;) {this.value = &quot;&quot;;}' type='text' value='email address here'/><input name='uri' type='hidden' value='YOUR FEEDBURNER FEED TITLE'/><input name='loc' type='hidden' value='en_US'/><input class='subsfeed_button' type='submit' value=''/></form>
</div>

and replace the RED texts with your blog's feedburner feed title.

To edit the 468x60 ad panel on top right find the codes shown below;

Code:

<div id='banner_468_60'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTYpkachfUB7c-vzVQ56292VWEXAQdBsLlb6SmxoeCLMHuMN5Jb-me9967y7cM2WyHkDK-DjKl8-CfeCvoBv0YRyE124-AFsMlylsTqVNWZDz6j_nxhJru6_5ctkaajW886FcKquG2fHYN/s1600/468x60ad.jpg'/></div>

and replace the RED texts with your 468x60 ad-sense or any ad code.

For any further help come through the comments section!

Credit:
For Social Media Networking Icons Set: chethstudios.

Free Blogger Template: Stunning Looks

noreply@blogger.com (Googy) — Sun, 27 Dec 2009 18:10:00 +0000

After "I'm Smart" and "Awesome" Gallery" here comes another free blogger template - "Stunning Looks". The most important feature of this template is the rounded corners of common boxes like header-wrapper, content-wrapper, main-wrapper, etc. But this feature will not work with IE, don't worry, still it won't look bad there. You can try the demo from the link below. Hope you all would like this too.

Screen-shot: Stunning Looks (On Firefox 3.5)

DEMO | DOWNLOAD LINK 1 | DOWNLOAD LINK 2

Installation Steps:

Backup you existing template:

Go to Edit HTML, and then click Download Full Template and save it.

Install "Stunning Looks" Template:

Go to Layout > Edit HTML
Click on the Browse Button and upload the stunning_looks.xml file.
Click on the Save button.

Edit Widgets:

To edit top navigation menu find following codes;

Code:

<ul>
<li><a expr:href='data:blog.homepageUrl'>HOME</a></li>
<li><a href='LINK URL'>LINK 1</a></li>
<li><a href='LINK URL'>LINK 2</a></li>
<li><a href='LINK URL'>LINK 3</a></li>
<li><a href='LINK URL'>LINK 4</a></li>

and replace the RED texts shown in above code with link Urls and titles respectively.

To edit top "728x90 leaderboard" ad panel and "Twitter" & "Feed" button links find following codes;

Code:

<!-- TOP AD PANEL AND TWITTER-RSS LINK -->
<div id='banner_728_90'><a href='http://twitter.com/YOUR TWITTER USER ID' target='_blank'><img alt='Follow Me' background='transparent' class='twtlink' height='90' onmouseout='this.style.opacity=0.8;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1C2gSMCLiTm0P377CuNH_wmLbZSRxPbcwZSOfjr_howJHvz0mHtBuGSPzGewvU6mFkj1gGvEWY-tjtfIspOdJ6fJ7QCOesdNZKwjiJhZoxNR55lZbJtktrOkLVgfa-R2k4Hx4ATTK5lO8/s1600/twitter2.png' style='opacity:0.8;filter:alpha(opacity=80)' width='90'/></a><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirfSuXCtv6lpuywI3YQ3hOwdwsGWwmL-jB18q9x2Udw2xnv6M3lAd1_xNn_LOzk_peoW2zTfxV0ngq6QGI2IWfkl8Qxh8DFWBwMehULkdl2QD89NLhZEot9lXAjTUQ8ye6W1-Kpdetp2Fp/s1600/728x0_blue.jpg'/><a href='YOUR FEED URL HERE' target='_blank'><img alt='Feed Me' background='transparent' class='rsslink' height='90' onmouseout='this.style.opacity=0.8;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO6E_jE0HLgUUtTxhJ3U7WZXpyEA7k8ILc6htKmcAWxoyUxZh2TdxJZjQqKOcaOTRPTRzNNJ9tlr1R3lvyETssHa5zfuArw5i2j0rVnvlg90aZqpJQk_NgqpB2fWRCHwG7-FuARuPEHzTs/s1600/rss2.png' style='opacity:0.8;filter:alpha(opacity=80)' width='90'/></a></div>

and replace RED texts with your Twitter User ID, BLUE texts with your adsense 728x90 leaderboard ad code and the texts in PINK with your blog's feed URL.

To edit "Email Subscription Form" for feeds find following codes;

Code:

<!-- Email Subscription Form Widget Starts -->
<center><div id='subsfeed'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=aroundweb&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='subsfeed_field' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;email address here&quot;;}' onfocus='if (this.value == &quot;email address here&quot;) {this.value = &quot;&quot;;}' type='text' value='email address here'/><input name='uri' type='hidden' value='aroundweb'/><input name='loc' type='hidden' value='en_US'/><input class='subsfeed_button' type='submit' value=''/></form>
</div></center><!-- Email Subscription Form Widget Starts -->

and replace RED texts shown in above code with your feedburner feed title.

To edit "125x125 AD Panel" in the sidebar find following codes;

Code:

<!-- 125x125 SPONSOR ADS STARTS-->
<center><a href='125x125 AD LINK URL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFMl8t9zVuavlkXCk0aI1f6xp3oOzPjbPQ6HG0_Y4nmlmI2Ypz9jKz0UPetFqy7ut89NB-b7cZvQyayOhrFTGwKZLDCEOQa67OOqTvEtBhJTb0mb-GBRo1rNrDF8lXOMgSDWiBinnSdcD/s1600/125x125addy.png'/></a> <a href='125x125 AD LINK URL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFMl8t9zVuavlkXCk0aI1f6xp3oOzPjbPQ6HG0_Y4nmlmI2Ypz9jKz0UPetFqy7ut89NB-b7cZvQyayOhrFTGwKZLDCEOQa67OOqTvEtBhJTb0mb-GBRo1rNrDF8lXOMgSDWiBinnSdcD/s1600/125x125addy.png'/></a></center>
<center><a href='125x125 AD LINK URL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFMl8t9zVuavlkXCk0aI1f6xp3oOzPjbPQ6HG0_Y4nmlmI2Ypz9jKz0UPetFqy7ut89NB-b7cZvQyayOhrFTGwKZLDCEOQa67OOqTvEtBhJTb0mb-GBRo1rNrDF8lXOMgSDWiBinnSdcD/s1600/125x125addy.png'/></a> <a href='125x125 AD LINK URL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFMl8t9zVuavlkXCk0aI1f6xp3oOzPjbPQ6HG0_Y4nmlmI2Ypz9jKz0UPetFqy7ut89NB-b7cZvQyayOhrFTGwKZLDCEOQa67OOqTvEtBhJTb0mb-GBRo1rNrDF8lXOMgSDWiBinnSdcD/s1600/125x125addy.png'/></a></center>
<!-- 125x125 SPONSOR ADS ENDS-->

and replace the RED texts shown in the above code with link and image Urls respectively.

For any further query come through the comments section!

Free Blogger Template: Awesome Gallery

noreply@blogger.com (Googy) — Tue, 22 Dec 2009 12:02:00 +0000

Awesome Gallery is a 2 column showcase style template for blogger with contrast color combination and stunning backgrounds images. This is an "Adsense" ready template, as you can see in demo there is a 728x90 ad banner place on top just below menu bar and 125x125 ad places in the side bar and 468x60 ad place in the inner page below post title and above post content. A unique piece of CSS based "Email Subscription Form" for feeds I have added just beside the 728x90 ad place. I use Ubuntu 9.10 OS with Firefox3.5 browser so, the screen-shot below may differ from the actual results in other OSs' and browsers. For the the title image (logo) I have used "Create a cool metallic logo with reflections and perspective shadows" section of GIMP 2.6.

Screen-shot (On Firefox 3.5 Browser on Ubuntu 9.10 OS)

DEMO | DOWNLOAD

Screen-shot: Comments Area

Now let's move to the installation part. First step is to take the backup of your existing template. To do so just log on to Blogger, Go to Edit HTML, and then click Download Full Template and save it.

To upload the template:

Go to Layout > Edit HTML
Click on the Browse Button and upload the awesomegallery.xml file.
Click on the Save button.

Navigation Menu:

To edit Menu links find the following series of codes;

Code:

<!-- TOP NAVIGATION MENU WIDGET STARTS-->
<ul class='menu4'>
<li><a expr:href='data:blog.homepageUrl'><b>Home</b></a></li>
<li><a href='LINK URL'><b>About Us</b></a></li>
<li><a href='LINK URL'><b>Contact us</b></a></li>
<li><a href='LINK URL'><b>Disclaimer</b></a></li>
<!-- SEARCH BAR STARTS-->
<li id='search_bar'><form action='/search' id='search_bar'><table border='0' cellpadding='0' cellspacing='0'><tr><td><input class='search_field' id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search this site..&quot;;}' onfocus='if (this.value == &quot;Search this site..&quot;) {this.value = &quot;&quot;;}' type='text' value='Search this site..'/></td><td><input class='search_button' type='submit' value=''/></td></tr></table></form></li><!-- SEARCH BAR ENDS-->
</ul>
<!-- TOP NAVIGATION MENU WIDGET ENDS-->

and replace only the RED texts shown above with required link URL and title.

Twitter and RSS Buttons:

To edit the Twitter and RSS widget on top find the following series of code;

Code:

<!-- TWITTER AND RSS WIDGET STARTS-->
<ul id='twtlink'>
<a href='http://twitter.com/YOUR TWITTER USER ID' target='_blank'><img alt='Follow Me' background='transparent' class='twt' height='100' onmouseout='this.style.opacity=0.8;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigsmjXmwDwFTy4j5S5dnFHoeswsr8N7EHHqDr01s9YKLBIDIbtVkHXYkWrappxbHhBTWrwbZRj7Zaq8w4INCh9UZIaHqfz6RafUN2W-WY4BY2sxeAlgyezWOlnGRSF3a5oDKVhOZNe-PEf/s1600/twitter_blur.png' style='opacity:0.8;filter:alpha(opacity=80)' width='100'/></a>
<a href='YOUR FEED URL HERE' target='_blank'><img alt='Feed Me' background='transparent' class='ss' height='100' onmouseout='this.style.opacity=0.8;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirixeiEtefZYZtL93wJeWA7Ove4GUO-pKFe_o8hHkSCxYZoZC4iZbEmTrIsfVpw_vs3BUBBzndYsIylE6yiBSsUT_inXrBLCNl79wXqFEB_amT6Rmq1vx10qHJjwHTrS5TtJ6CivVOHgOT/s1600/feed_blur.png' style='opacity:0.8;filter:alpha(opacity=80)' width='100'/></a>
</ul>
<!-- TWITTER AND RSS WIDGET ENDS-->

and replace the RED texts shown above with your Twitter User ID and your blog's feed URL respectively.

Top 728x90 AD Panel and Email Subscription Form:

To edit the top 728x90 AD panel and email subscription form find the following series of code;

Code:

<!--Top AD Panel & Subscription Form Widget Starts -->
<div id='addy_B'><span class='big_ad'><a href='AD LINK URL'><img alt='ADVERTISEMENT' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6srjUw-F2hdgc18hCE05BRXxSuZJ1ndW-3ee7JSrhN5sZtnc7tgMHJQiPI6IB1mq0ojzUhQgDkutazIzMFiltkX6NLfjw1Qq5fmNtSEO8A0BwpVgrPDkaNQJFI3coIxnYa0F7a68VjD7o/s1600-r/728addy.jpg'/></a></span><div class='small_ad' id='subsfeed'>
<p align='center' style='margin:5px 0 7px 0; font-size:110%;'><b>Subscribe Via E-mail</b></p>
<p><a class='email_button' href='http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER FEED TITLE&amp;loc=en_US' method='' onclick='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER FEED TITLE&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'/><p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER FEED TITLE&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='subsfeed_field' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;email address&quot;;}' onfocus='if (this.value == &quot;email address&quot;) {this.value = &quot;&quot;;}' type='text' value='email address'/><input name='uri' type='hidden' value='YOUR FEEDBURNER FEED TITLE'/><input name='loc' type='hidden' value='en_US'/><input class='subsfeed_button' type='submit' value=''/></form>
</p></p></div></div>
<!--Top AD Panel & Subscription Form Widget Ends -->

and replace RED texts shown above with 728x90 leaderboard adsense code and BLUE texts shown above with your feedburner feed title.

125x125 SIDEBAR ADS:

To edit 125x125 ADS in the side bar find following series of codes;
Code:

<!-- 125x125 SPONSOR ADS STARTS-->
<center><a href='125x125 AD LINK URL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlA3iG_iz8N6aCSrUNUuUj13-uYNVIiPxo-5WcNbEePE6WOLYXrNyZl7mqZD_rYopKrcpxLBnVmK4BJYpM7ZsDgQRYVLyf9uApf_nc8BMtTWTwtEeLHwPzlx875YlaDpznTxyB1r1t77U2/s1600/125addy.jpg'/></a> <a href='125x125 AD LINK URL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlA3iG_iz8N6aCSrUNUuUj13-uYNVIiPxo-5WcNbEePE6WOLYXrNyZl7mqZD_rYopKrcpxLBnVmK4BJYpM7ZsDgQRYVLyf9uApf_nc8BMtTWTwtEeLHwPzlx875YlaDpznTxyB1r1t77U2/s1600/125addy.jpg'/></a></center>
<center><a href='125x125 AD LINK URL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlA3iG_iz8N6aCSrUNUuUj13-uYNVIiPxo-5WcNbEePE6WOLYXrNyZl7mqZD_rYopKrcpxLBnVmK4BJYpM7ZsDgQRYVLyf9uApf_nc8BMtTWTwtEeLHwPzlx875YlaDpznTxyB1r1t77U2/s1600/125addy.jpg'/></a> <a href='125x125 AD LINK URL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlA3iG_iz8N6aCSrUNUuUj13-uYNVIiPxo-5WcNbEePE6WOLYXrNyZl7mqZD_rYopKrcpxLBnVmK4BJYpM7ZsDgQRYVLyf9uApf_nc8BMtTWTwtEeLHwPzlx875YlaDpznTxyB1r1t77U2/s1600/125addy.jpg'/></a></center>
<!-- 125x125 SPONSOR ADS ENDS-->

and replace the RED texts shown above with link and image URL(s) respectively.

468x60 AD Panel:

To edit the 468x60 ad panel below post title in the inner page(s) find the following code;

Code:

<!-- 468x60 AD BELOW POST TITLE STARTS -->
<div align='center' class='ads'><a href='468x60 AD LINK URL'><img alt='AD' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1XVCTHelhhOdyW1LvPOyX9OZuEhaukNuHSVBqvcDOkiddiP-GlpY_pSvEM2-lyZCCDKEof5fbQunTqdDJO56QCmDLfUVzWGeumNaLdp7N-DM_xLyzzllt3uqPKGr3mqLecR0ZLsFfm36k/'/></a></div>
<!-- 468x60 AD BELOW POST TITLE ENDS -->

and replace the RED texts shown above with your 468x60 ad code.

IMPORTANT: USE WORDPAD FOR THE TEXT FILES IN DOWNLOAD PACKAGE

For any further query please come through the comments section!

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/122201022579/mootools.js' type='text/javascript'/>
  <script src='http://www.yourjavascript.com/201352290112/bumpbox.js' type='text/javascript'/>

and replace with following codes within the template;
Code:

<script src='http://www.weebly.com/uploads/3/9/3/0/3930875/mootools.js' type='text/javascript'></script>
<script src='http://www.weebly.com/uploads/3/9/3/0/3930875/bumpbox.js' type='text/javascript'></script>

Free Blogger Template: I'm Smart

noreply@blogger.com (Googy) — Thu, 17 Dec 2009 14:33:00 +0000

Here comes a smart free blogger template, I'm Smart, with some exciting and pre-added features like Featured Images Widget, Bumpbox (a lightbox alternative), CSS based E-mail Subscription Form Widget, Jquery based navigation menu with awesome hover effect, Bookmark & Share Widget, exiting new look of Comments area and lots more.

Screenshot: I'm Smart Template (On Firefox 3.5 Browser)

Comments count have an icon in the left, and is followed by Comment feeds link image, Admin's comment have different background color and Post a Comment tag is replaced with an image.

Screenshot: Comments Area

Awesome Jquery based menu widget with great hover effect feature, hovering mouse on menu link popups a description balloon.

Screenshot: Menu Bar

"Bumpbox" a great lightbox alternative is pre-added with this template which can be used with images and htmls and inline contents.

Screenshot: Image shown in a bumpbox

Moreover, you can add "About" or "Contact" or "Disclaimer" or any Inline Content as widgets and hidden onload without adding pages using "Bumpbox". To know more about this click the "Link 2" button on the menu bar on template's demo.

Screenshot: Showing an Inline Content after clicking a link button.

Installation instructions are included with download pack, I request you to OPEN ALL THE TEXT FILES IN THE DOWNLOAD PACK WITH WORDPAD NOT WITH NOTEPAD.

For any further help, please leave a comment!

DEMO | DOWNLOAD

Credits:
For Bookmark & Share Widget, Blockquote and Bullet List CSS: www.mybloggertricks.com
For Jquery based menu bar widget: www.webdesignerwall.com
For Bumpbox: www.artviper.net

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/122201022579/mootools.js' type='text/javascript'/>
  <script src='http://www.yourjavascript.com/201352290112/bumpbox.js' type='text/javascript'/>

and replace with following codes within the template;
Code:

<script src='http://www.weebly.com/uploads/3/9/3/0/3930875/mootools.js' type='text/javascript'></script>
<script src='http://www.weebly.com/uploads/3/9/3/0/3930875/bumpbox.js' type='text/javascript'></script>

Image With Hover Effect As Blog Title In Blogger

noreply@blogger.com (Googy) — Fri, 11 Dec 2009 07:17:00 +0000

We always prefer to use image as a blog header title instead of text, we even want it to be clickable and always be redirecting to the homepage, what else? Adding some beauty, like hover effect! Well, that's not possible if we simply add an image as title through "Page Header" widget in "Layout" section of Blogger and choosing "Instead Of Title and Description". Then how? Yup! Not that much difficult, its just a piece of cake.
Have a look to the DEMO HERE, and now lets move to the coding part. Log on to Blogger > Layout > (Make sure you are not using any image as blog title, if using get back to the text mode) > Edit Html > (Take a backup of your template) > Expand Widgets Template and find (Ctrl + F) ]]></b:skin> and paste following CSS codes just above it;

Code:

.title_H {
background: url(Your Blog Title's Main Image URL);
width:305px;
height:57px;
padding:0;
margin:0;
}
.title_H:hover {
background: url(Your Blog Title's Hover Image URL);
}

In the above CSS code replace the RED text with the URL of the main title image for your blog and the BLUE text with hover image URL. The PINK texts are for the width and height of the images which you have to change in respective of your main title and hover images' width and height (main title image's and hover image's width and height should be equal).

Now, find (Ctrl+F) the follwing series of code;

Code:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>

and replace it with the series of code given below:
Code:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<a expr:href='data:blog.homepageUrl'><p class='title_H'/></a>
<b:else/>
<a expr:href='data:blog.homepageUrl'><p class='title_H'/></a>
</b:if>
</b:includable>

And, finally, save the template and enjoy a new blog title style!

Add Jquery Based Sliding Advertisement Panel In Blogger

noreply@blogger.com (Googy) — Sat, 05 Dec 2009 06:48:00 +0000

This is a wonderful script that attracts your curious blog visitors to find out what's hiding behind it, just clicking the button shows and hides the advertisement in sliding panel.

Image 1: without Ad Banner before sliding

Image 2: with Ad Banner after sliding

This is a simnple though awesome css and jquery based add-on for blogger (can be used on other websites too) which carries your adsense or other ads without eating any space on your blog or site. You can assume through the images above what it actually does or you can try it on my this blog as live demo, to do so just click the button on top of this blog (below blog title image) and see the magic in action.

Now, let's move to the installation part. So, to have it working on your blog log on to Blogger > Layout > Edit HTML > (Take Backup of your template) and find (Ctrl + F) ]]></b:skin> and paste the following CSS code just above it:

Code:

#panel {
 height: 100px;
 display: none;
}
.slide {
 margin: 0;
 padding: 0;
 }
.btn-slide { padding-left:15px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1roNPoFeTIKmw0zLPkv1cIe5vZdAgaeeJ8yTJjXrxwSTIm2LEc_d9nWqj8vivSK_M_edIymWamS19O2Q6bwkfJr-quZ8lgrUl9GTmiDuoSsn_ZXaa380_cb5Hcs4ZSEYPFmlmfqSLhtet/s1600/001_53.png) no-repeat;
width:13px;
height:13px;
_width:13px;
_height:13px;
}
.btn-slide:hover { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_W5_bxOipqk8NfnsXqwmoMwsFI9sX2fFUn63C8NeeRqEZtohdl-Judz0ZRZpofUa2GXFMo8t9Gbn7gg5Zo2UEM_qkzDdlsY77D_IJ4rBCRgq4kfBJK_BhV2pqOFbMedcX6uiukZpbWspz/s1600/001_51.png) no-repeat;
width:13px;
height:13px;
_width:13px;
_height:13px;
}
.active { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuosMHeV5-UCqfunsLVrLoNsQwGV5-FOtz-WDNE_p5c9Y51JEDmYIDYSmzo7LArF93Rj4fxJlovFI108xPWGNc4v-E45yCSKyRsqADEOJSZhx0Go8gbQGG1SCkse3hpmgJh4cLh_sebYBC/s1600/001_54.png) no-repeat;
width:13px;
height:13px;
_width:13px;
_height:13px;
}
.active:hover { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGYT7iHSo6CpvnvSDaL7Yw0-ZENRd9h2bI6vwH-TQWg_XD_i0CqgBC5bBeoe2thtXeawWqHRNheIuG0-Prdfk5zv-6b1LPln5je44NaXEua7ny-qeNc2tEyti5IWLoPVh4JTFcnj3VduAV/s1600/001_52.png) no-repeat;
width:13px;
height:13px;
_width:13px;
_height:13px;
}

In the above CSS code you can adjust the height of the sliding panel by changing values in RED text.

Next step is to find (Ctrl + F) </head> and paste the following Javascript Code just above it:

Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

 $(&quot;.btn-slide&quot;).click(function(){
  $(&quot;#panel&quot;).slideToggle(&quot;slow&quot;);
  $(this).toggleClass(&quot;active&quot;); return false;
 });
 
 
});
</script>

And the most important point, if the above Javascript Code does not work on your blog then replace it with the following one:

Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){

 jQuery(&quot;.btn-slide&quot;).click(function(){
  jQuery(&quot;#panel&quot;).slideToggle(&quot;slow&quot;);
  jQuery(this).toggleClass(&quot;active&quot;); return false;
 });
 
 
});
</script>

Now, save the template and move to Layout > Add A Gadget > HTML/Javascript and paste the following code in the content area and replace the text in Blue color with your Adsense (or any ad code):

Code:

<div id='panel'>
YOUR ADSENSE AD CODE HERE
</div>
<p class='slide'><a class='btn-slide' href='#' title='Click To Slide'></a></p>

Yes! it's done now. Save the template and view your blog and slide the panel.

CSS Based E-mail Subscription Form Widgets For Feeds

noreply@blogger.com (Googy) — Thu, 03 Dec 2009 14:33:00 +0000

I prefer to subscribe feeds to my e-mail's inbox rather than any reader, and I am sure most of you too might do the same. This is an easy process as simply enter your email, submit and get updates in your e-mail's inbox.
We bloggers always try to make it and ease for our visitors to subscribe to our feeds and if the subscription form looks good that will be a surplus. So, here I am sharing three (03) CSS based e-mail subscription form widgets with you all, hope you would like to grab them.

Subscription Form Widget 01:

Code:

<style>
#subsfeed{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZVQdm8TD563_BzBDNSUGlp_UMlKQPMxJr2e8Wk0PVu5ytbxS5RenwIrXqrbV8xCQ5MDfjVCpT4THS_KwCjvowfcMy8dziGVc6fyGWidTVjC9DeBqkrWwaATMHcUcMA_2sry7AfQ-SnoFQ/s1600/feedbg3.png);
width:320px;
height:97px;
}
.subsfeed_field{
width:200px;
height:18px;
border:2px solid #6ca408;
margin:35px 2px 0 85px;
float:left;
}
.subsfeed_button{
width:24px;
height:24px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAuEUuZBsxpzJ8n8r7NpKJqaDS6HDSocbgFwQYnXUTdT2o6SS7q5wMf6x_r06PZ-K3nQBqTuj6u5FBBeWQoEu5xxfb22fhNAdRmXy0bNsVoHXZTktjn994ETuTXqHuDRdn0bp8S3XZqSab/s1600/go_b.png);
border:0px;
margin:35px 0 0 0;
cursor:pointer;
float:left;
}
</style>
<center><div id="subsfeed">
<form action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-Feed-Title', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input onfocus="if (this.value == &quot;email address here&quot;) {this.value = &quot;&quot;;}" class="subsfeed_field" value="email address here" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;email address here&quot;;}" type="text"/><input value="Your-Feed-Title" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="" class="subsfeed_button" type="submit"/></form>
</div></center>

Subscription Form Widget 02:

Code:

<style>
#subsfeed{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXSMZa8vpHQTopqMzo8z7mbsmqI_CF-ablk_UREVgIJhJ3zzulPevBYl6MOz8X57Dwwahq36OctrCBTpjLAFkm9vwORMeehXLGugfcTIOqk4nmT2OrEY8vkZ5nv4PLa9gm4bQ9OCjT62Q3/s1600/feedbg1.png);
width:320px;
height:97px;
}
.subsfeed_field{
width:200px;
height:18px;
border:2px solid #6ca408;
margin:35px 2px 0 85px;
float:left;
}
.subsfeed_button{
width:24px;
height:24px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifa2f3mGjIxm2ETMaCPGw62bFKxAmA90tTnr86GT7Im7wcooRgCwOSZ4AWj5RAr0D1mwJ04ddcoTyxk6hAsNB6VXiFHnUfdHNo60lAtyvlMKyupRfN56I-Ir48FLh1eNsp8KfhYjapqkR1/s1600/go_g.png);
border:0px;
margin:35px 0 0 0;
cursor:pointer;
float:left;
}
</style>
<center><div id="subsfeed">
<form action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-Feed-Title', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input onfocus="if (this.value == &quot;email address here&quot;) {this.value = &quot;&quot;;}" class="subsfeed_field" value="email address here" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;email address here&quot;;}" type="text"/><input value="Your-Feed-Title" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="" class="subsfeed_button" type="submit"/></form>
</div></center>

Subscription Form Widget 03:

Code:

<style>
#subsfeed{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNokcDFe2cYPP_UbN5oKFwW_RBBEsJxqUFosAZ6D6ypyT3a3lBf1rk3kto-IAEjwHlFL4drzRbPEjcuav8ehXAGMEBjbuUPII3HpP6W8OConvF3y6tRbT_fndvBuO0rp5E-TR6VD-5KYTy/s1600/feedbg2.png);
width:320px;
height:97px;
}
.subsfeed_field{
width:200px;
height:18px;
border:2px solid #6ca408;
margin:35px 2px 0 85px;
float:left;
}
.subsfeed_button{
width:24px;
height:24px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4mH2HIWKh0mlGKLWAWtUnTEJiADXDQVMqhcMePklNqc6X74yK5cYB4jrdWwJykzx0U2bTEyZB820s12c59RBJWGNwV6yUcKSqnn9wQAHU1YZcwBv8GPexcfjo8ioIVkth0Wrbna0SDgV6/s1600/go_o.png);
border:0px;
margin:35px 0 0 0;
cursor:pointer;
float:left;
}
</style>
<center><div id="subsfeed">
<form action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-Feed-Title', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input onfocus="if (this.value == &quot;email address here&quot;) {this.value = &quot;&quot;;}" class="subsfeed_field" value="email address here" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;email address here&quot;;}" type="text"/><input value="Your-Feed-Title" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="" class="subsfeed_button" type="submit"/></form>
</div></center>

To install go to Blogger > Layout > Add A Gadget > HTML/Javascript, paste the code in content area and replace the RED text in code with your Feedburner feed title then save and preview!

Update as on 4th December,2009:
I just updated the codes above as there were some glitches left with them earlier so it might not working with IE if you had used it before this update message, so I apologise for any inconvenience if it caused to you, now its working fine with IE, enjoy!
For any further query please use the comments section, thank you!