73D41416194E8A7C390936971FB2B74B Chira Sathi

Friday, September 30, 2011

125 by 125 Ad Banner Widget For Blogger/Blogspot Blogs.

125-by-125-Ad-Banner-Widget

Early this morning I tried to create some tables using simple HTML. Remarkably I arrived at a really easy and well optimized code that could be used to show your 125 by 125 Ad banners just like the one on my sidebar. This widget is named “125 by 125 Ad Banner Widget
See an example below,





         
 125 by 125 Ad Banners Widget  (1)
AD DESCRIPTION AD DESCRIPTION
AD DESCRIPTION AD DESCRIPTION
Here is the code to be pasted in your HTML/JavaScript Widget,
<div align="center">
<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody><tr>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>
<tr>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>
</tbody></table>
<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody>
      <tr>
       <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="URL OF BANNER’S IMAGE" /></a></center></td>
      </tr>

    </tbody></table>
</div>

Now make the following changes,
1.  Replace URL OF ADVERTISER with the website link of the advertiser
2.  Replace URL OF BANNER’S IMAGE with the Image link of the Advertiser’s banner
3.  Replace AD DESCRIPTION with some information related to the Ad. The description appears when some hovers his mouse cursor over the banner.
4.  If you want to increase the distance between the ad blocks then adjust width="265" . By default 265 is the minimum width of this banner widget. You can’t further decrease the width.

  • If you want to increase the number of rows of this ad widget and want to add two other Ad blocks i.e 6 ad blocks. Then simply copy paste the code below just above </tbody></table>
<tr>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>


  • If you want to have a more fancy Ad widget like the one below,
125 by 125 Ad Banners Widget  (2)
BEST--- 2
3 4
 
ADVERTISE
then copy and paste the code below in your HTML/Javascript Widget
<div align="center">
<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody><tr>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>
<tr>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
<td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="URL OF BANNER’S IMAGE" height="125"/></a></center></td>
</tr>
</tbody></table>
<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody>
      <tr>
       <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="URL OF BANNER’S IMAGE" /></a></center></td>
      </tr>

    </tbody></table>
</div>

Follow the same steps as instructed above to customize this new code.
If you are searching for some Ad Banner Images than may be you will like the Animated 125 by 125 AD Banners
I hope you will surely like this widget. The internet is full of tutorials for such a widget but most of them use complex CSS and ask you to edit your blogger template but this one is using simple HTML and is a copy-paste widget code. Kindly let us know how you find it.

Most Viewed Posts Widget With Thumbnails by Blogger

imageBlogger recently introduced there Most Viewed Widget which is also called Popular Posts widget. This gadget displays the posts which has the maximum number of pageviews in three ways i.e. All time, monthly or weekly. It is a great tool to engage your readers more and increase your page views. It will also help you know which of your posts leads the row.
Live Demo



Add The Popular Posts Widget To Your Blogs

  1. Go To Blogger > Design > Page Elements
  2. Click "Add a Gadget"
  3. Choose the Popular Posts Widget
popular posts
    4.  Set your settings in this way,
settings
  5.   Save your widget and you are done!
May be you will like these widgets too:

For thumbnails to appear make sure you always add an intro image of 100px by 100px at least in your post starting paragraph. The square size will give a more clearer picture. You can make the image as big as 300px by 300px.

Feedburner Recent Comments Widget For Blogger

 Feedburner Recent Comments WidgetJust few months back I wrote a post on how to add a Recent Posts Widget by Feedburner to your Blogger and Typad blogs and today we will learn a similar tutorial based on a really attractive and fast loading Recent Comments widget offered by Feedburner. This widget is really fast loading in a sense that it is well scripted and the JavaScript it uses is stored on feedburner’s server so there will be no load time delay on your blog. You have seen this widget hanging on my sidebar inside the multi-tab widget. So lets learn how to add it to blogger.
To add the Recent comments Widget By Feedburner to your blogs follow these steps,

Burn Your Comment Feed At Feedburner

1.  Login To Your Feedburner Account. Incase if you don’t have one simply sign up for a free account.
2.  Insert your Comment Feed URL inside the Feedburner box. The URL for Blogger Blogs will be like this,
http://YOUR-BLOG-NAME.blogspot.com/feeds/comments/default
Replace YOUR-BLOG-NAME with your blog’s good name.Burn-your-feed-box
3.  Press the Next Button and you will be brought to a new page. Simply insert an easy memorable Feed title and feed address. I prefer both to be the same.
Feed-title-and-address

4.  Press Next and then fill the two options on the new page as shown below,
choose-feed-options

5.  Finally press the Next button again and you have successfully burnt your comment feed!
  • Now click the publicize button just at the top
publicize-button
  • On the left sidebar click BuzzBoost
buzzboost
  • Hit The Activate button on the right pane
activate
  • Then fill in the options as shown below,
recent-comments-widget-sett
Its advisable to leave all boxes unchecked.
  • Finally click the save button and get your HTML code which will be just at the top of the page as shown below,
Widget-code
  • Done!
Adopt a similar procedure for Typad

How to Add the Recent Comments Widget To Blogger

Now once you have copied the code for your recent comments widget then simply follow the steps below,
  1. Log into Blogger
  2. Go To Layout
  3. Click Add a Gadget or Add a Page element
  4. Choose HTML/JavaScript Widget
  5. Now paste the Feedburner code inside this widget and hit save
  6. Done!
Finally Preview your template to see it hanging on your sidebar :>
Best Blogger Gadgets