September 24, 2009

Releasing Highly Stylized “Contact Me” Form For Bloggers and Web Developers – Available For Free Of Charge!

58 Comments so far

Stylized-Contact-Me-Form-For blogger A Contact Form is a must for every website and weblog for feedback and suggestion purposes. There are many free email services that let you create free online Contact Forms but most of these forms are casual in look and appearance and are already used by millions of websites. Then how can you make your free form look any different from others?

Well luckily after spending some hours of hard work I have successfully created a well stylized and optimized code that is unique in every aspect and that is capable enough to turn your free Contact form from this,

 

Normal looking contact form 

to this,

MBT-Stylized-Contact-Me-Form

This new stylized version has CSS effects added to it. Text inside fields appear in different colours and the radio buttons change colour on mouse hover. Click Here to see it in action.

You need to follow two simple steps to get to the end result,

  1. Sign Up to create a Normal Contact Form
  2. Stylize Your Contact Form*

 

 

Sign Up To Create A Normal Contact Form

First and foremost you need an account at a free email service to create a normal looking contact form which will be controlled by the email service itself. Go to Email Me Forms and Sign Up for an account and then follow the steps below

 

Go To Control Panel

After you have created an account click the link “Create a New Form” at the right-hand pane under Control Panel as shown below,

email--me-form-control-pane

 

Then There will a total 7 steps which are illustrated in the images below. But Before going for step#1 kindly create a thank you page for your blog. This thank you page will appear when readers have successfully submitted their message to you using the contact form.  You can see my Thank you Page as an example. Make sure you give it an old date.

Once you have created it then follow each step below carefully,

1.   Step#1

Add a name for your contact form, enter your email address, leave spam Email address emtpy, add your thank you page URL/link and let number of fields be 6.

EMAIL-FORM-STEP1

Hit Next

2.   Step#2

Change your options to the ones shown in the image below. As far as the Required? Portion is concerned, you can set it according to your will but set other options the way they are shown in the image below,

EMAIL-FORM-STEP2

Hit Next

3.   Step#3

Change your options to exact ones below,

EMAIL-FORM-STEP3

Hit Next

4.   Step#4

For step 4 only edit the part as shown in the image below and leave the above portion as default. Make changes for regions indicated by blue arrows only.

EMAIL-FORM-STEP4

Hit Next

5.   Step#5

Follow the image below,

EMAIL-FORM-STEP5

Hit Next

6.   Step#6

And this is how your contact form looks like,

EMAIL-FORM-STEP6

Hit Next

7.   Step#7

Copy the link indicated in the image below. This is your the ID for your form. We only need this ID link and not the HTML code they provide because you deserve a better stylized code!

EMAIL-FORM-STEP7

Now jump to the next important part shared below


Stylize Your Contact Form

First you will need to add a CSS code to your selected blogspot template. To do this follow the steps below,

  1. Log into your blogger account
  2. Go to Layout > Edit HTML
  3. Back Up your template
  4. Search for ]]></b:skin>
  5. And finally add the code below just above ]]></b:skin>

input.mbt1 {
color:#FF8E1F;
font:10px 'trebuchet ms',helvetica,sans-serif;
background-color:#fff;
border:1px dotted #0080ff;

}
input.mbt1hov {
color:#0080ff;
font: bold 10px 'trebuchet ms',helvetica,sans-serif;
border:1px solid;
}

textarea {width:100%; color:#0080ff;
font:12px 'trebuchet ms',helvetica,sans-serif;
background-color:#fff;
border:1px dotted #0080ff; }

textareahov { width:100%;
color:#0080ff;
}

  • Save Your template

Now open your blogger Editor and create a new post entitled as “Contact Me” . You can give it any title you like. Give this post an old date so that it should not appear in recent posts.

  • First Create a Welcome Note  as shown in the image below. You can see my Welcome Note as an example.

Blogger-Compose-Mode 

  • Then Click the Edit HTML tab at the top right-hand corner and add the code shared below just below the visible text.

<form action="PASTE THE EMAIL ME FORM ID LINK HERE" charset="UTF-8" enctype="multipart/form-data" method="post"><table bg="" border="0" cellpadding="2" cellspacing="0" style="color:white;"><tbody><tr><td><span style="font-family:Verdana;font-size:85%;color:black;"></span><div id="mainmsg"></div></td></tr></tbody></table><table bg=""border="0" cellpadding="2" cellspacing="0" style="color:white;"><tbody><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;">Name</span></td><td><input class="mbt1" maxlength="100" name="FieldData0" size="30" value="" type="text"> </td></tr><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;">Email</span></td><td><input class="mbt1" maxlength="100" name="FieldData1" size="30" value="" type="text"> </td></tr><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;">Country</span></td><td><input class="mbt1" maxlength="100" name="FieldData2" size="30" value="" type="text"></td></tr><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;">Age</span></td><td><input class="mbt1" maxlength="100" name="FieldData3" size="30" value="" type="text"></td></tr><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;">Subject</span></td><td><input class="mbt1" maxlength="100" name="FieldData4" size="60" value="" type="text"> </td></tr><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;"  >Message</span></td><td><textarea cols="60" name="FieldData5" rows="10"></textarea></td></tr><tr><td colspan="2"></td></tr><tr><td></td><td align="left"><input maxlength="100 " name="hida2" size="3" style="display: none;" value="" type="text"><input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" class="mbt1" name="Submit" value="Submit " type="submit"> <input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" class="mbt1" name="Clear" value="  Clear  " type="reset"></td></tr><tr><td colspan="2" align="center"></td></tr></tbody></table></form>

 

 

Kindly replace the bolded green text in the code above with the URL of your contact form. Copy this code as it is and don’t try to edit it. Paste it as instructed in the image below,

EDIT-HTML-MODE

  • That’s it, You are Done! Click the Publish Button and see a beautiful contact form on your weblog

Let me know how you liked it. Any suggestion is highly appreciated.

September 23, 2009

Direct Linking To Picasa Images. Who Says You Can’t Store-Save-Upload Animated Images in Blogger

10 Comments so far

Animated GIF Image saved in blogger blogspot blog The reason why you can’t show animated images in your blogger posts once you upload them to your account is really simple to answer. By default blogger displays all images uploaded directly from blogger editor as static images and show only one instance of the in-motion image. But there is a way round by which we can really embed animated GIF images in our blogger posts by using the same Picasa Web Album account used by Blogger to store our images. Want to know how? Kindly Follow the steps below,

 

  1. Log Into Your Picasa Web Album Account By Visiting picasa.google.com
  2. Create A New Public Album
  3. Upload Your Animated Image
  4. Obtain The Direct Link To your Uploaded Image
  5. Finally Upload The Image in Your Blogger Editor and Edit it!

 

1.   Log Into Your Picasa Web Album Account By Visiting picasa.google.com

Click the upload button at the top right corner, as shown below,

Upload-button-in-Picasa

 

2.   Create A New Public Album

Once you click the upload button a small window will pop-up.

Click create a new album link 

 Create-a-new-album

 

Set your title and choose the Public Share Option as shown in the image below,

Give-your-Picasa-Album-a-ti  Then click the Continue button to get to step# 3 as discussed below,

3.   Upload Your Animated Image

 

Now browse to locate your image saved in your hard driveBowse-the-file-from-your-ha

And then click Start Upload, which will take you to step # 4

4.   Obtain The Direct Link To your Uploaded Image

After the image is uploaded , a small thumbnail of the image will appear. Click this thumbnail image to get to the original size

 click-the-uploaded-image

 

You will now have to click the link at the right-hand-side entitled “Link to this Photo” as shown below,

Copy-the-direct-link-of-you

Now the important part,

  • Check the image only (no link) box
  • Set image size to original
  • Copy the code under Embed image and that’s the Direct link to your Image!

5.   Finally Upload The Image in Your Blogger Editor and Edit it!

Now go to your blogger Editor and click the image icon to upload an image as you  usually do.

Here you will have two options, either to upload an image from your hard drive Or add an image from the web. If you choose the first option your image will appear static and no animation will occur but since we want the image to appear animated therefore choose the second option and paste the Direct link to your Image just next to URL

Look at the image below for better understanding,

Add-Image-URL-that-you-copi

Alas! you successfully added an animated image to your blogger editor without using Image services like Photobucket etc.

Now you can play with your image by resizing it and aligning it as you normally do.

Edit-Your-Uploaded-Image

 

That’s All!

The Best Shortcut:

If you are using Windows Live Writer than you will simply need to upload the image to your Live Writer from your Hard Drive and that’s it! Once the post is published the image will appear animated by default. I do the same to upload MBT Animated Icons.

September 17, 2009

Stylized Page Navigation Widget For Blogger|Blogspot blogs – MBT Church Theme Style!

76 Comments so far

Page-Navigation-Widget-for-Blogger As mentioned in the download page of MBT Church Theme that it has a Page Navigation Widget that is an alternative to Recent Posts, Home and Older Posts links at the bottom of blogger hosted blogs. In order to add the stylized version of Page Navigation Widget created by Mohammad Rias to your MBT Church Theme, follow the steps below,


Page Navigation Widget For Blogger Hosted Blogs

  1. Log into your blogger account and go to Layout > Page Elements
  2. Then Click on Add a Gadget
  3. Amongst the Blogger Featured Widgets Choose HTML/JavaScript Widget

    html-javascript blogger widget

  4. Inside the HTML/JavaScript Widget  paste the code below,

    <style type="text/CSS">

    .showpageArea a {
    text-decoration:underline;
    }
    .showpageNum a {
    text-decoration:none;
    border: 1px solid #7AA1C3;
    margin:0 3px;
    padding:3px;
    }
    .showpageNum a:hover {
    border: 1px solid #7AA1C3;
    background-color:#F6F6F6;
    }
    .showpagePoint {
    color:#333;
    text-decoration:none;
    border: 1px solid #7AA1C3;
    background: #F6F6F6;
    margin:0 3px;
    padding:3px;
    }
    .showpageOf {
    text-decoration:none;
    padding:3px;
    margin: 0 3px 0 0;
    }
    .showpage a {
    text-decoration:none;
    border: 1px solid #7AA1C3;
    padding:3px;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:none;
    color:#7AA1C3;
    }
    </style>

    <script type="text/JavaScript">

    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
    var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
    var isPage = thisUrl.indexOf("/search?updated")!=-1;
    var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
    thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
    var thisNum = 1;
    var postNum=1;
    var itemCount = 0;
    var fFlag = 0;
    var eFlag = 0;
    var html= '';
    var upPageHtml ='';
    var downPageHtml ='';

    var pageCount = 2;
    var displayPageNum = 5;
    var upPageWord = 'Previous';
    var downPageWord = 'Next';

    var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

    for(var i=0, post; post = json.feed.entry[i]; i++) {
    var timestamp = post.published.$t.substr(0,10);
    var title = post.title.$t;
    if(isLablePage){
    if(title!=''){
    if(post.category){
    for(var c=0, post_category; post_category = post.category[c]; c++) {
    if(encodeURIComponent(post_category.term)==thisLable){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    postNum++;
    htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
    }
    }
    }
    }//end if(post.category){

    itemCount++;
    }

    }else{
    if(title!=''){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    if(title!='') postNum++;
    htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
    }
    }
    itemCount++;
    }
    }

    for(var p =0;p< htmlMap.length;p++){
    if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    if(fFlag ==0 && p == thisNum-2){
    if(thisNum==2){
    if(isLablePage){
    upPageHtml = labelHtml + upPageWord +'</a></span>';
    }else{
    upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
    }
    }else{
    upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
    }

    fFlag++;
    }

    if(p==(thisNum-1)){
    html += '<span class="showpagePoint">'+thisNum+'</span>';
    }else{
    if(p==0){
    if(isLablePage){
    html = labelHtml+'1</a></span>';
    }else{
    html += '<span class="showpageNum"><a href="/">1</a></span>';
    }
    }else{
    html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
    }
    }

    if(eFlag ==0 && p == thisNum){
    downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
    eFlag++;
    }
    }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    }//end for(var p =0;p< htmlMap.length;p++){

    if(thisNum>1){
    if(!isLablePage){
    html = ''+upPageHtml+' '+html +' ';
    }else{
    html = ''+upPageHtml+' '+html +' ';
    }
    }

    html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

    if(thisNum<(postNum-1)){
    html += downPageHtml;

    }

    if(postNum==1) postNum++;
    html += '</div>';

    if(isPage || isFirstPage || isLablePage){
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");

    if(postNum <= 2){
    html ='';
    }

    for(var p =0;p< pageArea.length;p++){
    pageArea[p].innerHTML = html;
    }

    if(pageArea&&pageArea.length>0){
    html ='';
    }

    if(blogPager){
    blogPager.innerHTML = html;
    }
    }

    }
    </script>

    <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>

  5. If you are using a domain other than .blogspot.com or .com, then kindly change  the bolded red text .com with your domain extension. For Example if your domain ends with .info or .biz than replace .com with .info or .biz . But if you are a BlogSpot user than leave the code unchanged.
  6. Once you have pasted the code inside the widget, simply drag your HTML/Javascript widget to the area just below your posts and drop it there, as shown in the picture below,

Page-Navigation-Widget-For- blogspot blogs

 

That’s All!

Hope you enjoyed it. Let me know if anything is unclear.

September 15, 2009

Learn How To Add Image Pop-Up And Opacity Effect To Blogger Images – MBT Church Theme Style!

19 Comments so far

IMAGE-POP-UP-OPACITY-EFFECT Adding different effects to your blog template surely makes it outstanding. By default MBT Church Theme has two Image effects features, which are the pop-up and fading image effects.

First lets learn how to add the Pop-up image effect to our images. I hope you are using MBT Church Theme, if not then download and upload it now!

 




Image Pop-up effect

To expand an image to its original size, you will need to follow the steps below, 
  • Go to your blogger Editor and upload an image.
  • After you have uploaded an image, simply click the preview button near the top-right-corner as shown in the image below,

click-the-preview-link-in-blogger-editor

  • Right click on the image that you just uploaded and then click on Copy Image Location to get the Image URL. Make sure you are using Mozilla Firefox Browser,

copy-image-location-to-save-Image-URL 

You can use the same method always to get Image URLs for your uploaded images. Get rid of Photobucket!

  • After you get the image URL simply use the popping code shared below,

 

<a class="thumbnail" href=""><img src="Add Image URL Here" width="100px" height="100px" border="0px" /><span><img src="Add Image URL Here" /><br /> Image Description here </span></a>

 

  • Copy-paste this image code in your blogger editor and make the following changes,

------> Replace Add Image URL Here  with the image location that you just copied.

------> You can also change the size of the display image. The Display image is the smaller image which on mouse hover expands to the original size. Change 100px to any size you want.

------> Replace Image Description here with a little description about the image. This text will appear below the expanded/popped up image. If you don’t want to add any description simply delete the bolded green text.

That’s All! Apply the popping code to see things popping up :>

 

On Mouse Hover Image Opacity Effect

Now Lets add the fading effect to your images. This one is pretty easy!

  • Follow the same steps for getting the image URL as guided above.
  • Once you have copied the Image Location, use the following code to add fading effect to your image,

<a  class="Fadein" href="Add Image URL Here"/><img src="Add Image URL Here" width="" height="" border="0px" /></a>

  • Simply replace the bolded red text with the Image location that you copied.
  • By default the original image size will appear because I have mentioned no image dimensions. If you want to give a particular size to the image then give the proper dimensions to width="" and height=""   e.g:- width="500px" height="600px"

That’s All! I hope everything was clear.

You can follow the same procedure for adding these two effects to images in your sidebar. You just need the Image URL and that’s it! bye

September 12, 2009

Blinking Read More Buttons For Blogger- With a Tiny Arrow!

33 Comments so far

Animated Read More Buttons

Animation is always eye-catching and seeks readers attention. In order to give a more lively look to blogger hosted blogs I am proud to present another set of beautiful animated Read More Buttons with metallic frame surrounding each one of them and a blinking tiny arrow to give the motion look.

This is how one such button looks in motion,

 

black

green  blue-dark

 

 

 

 

 

MBT Read More Blogger Buttons - Metallic Frame

Downloads:

Attractive Animated Read More Buttons For Blogger With Stylish Arrow Nose!

23 Comments so far

Animated Read More Buttons

If a picture says a thousand words than it would not be objectionable to say that an animated image would speak a million words. Well if not you then at least I believe that way :>>

Its time to get rid of the Read More or Continue Reading Text and replace it with a cool, stylish and most importantly with an animated Read More Button. Give it an Arrow Nose!

Below is an example of an in-motion Read More Button with an animated arrow nose,

 

grey

purple green

 

 

 

 

 

 

Animated Read More Buttons with Arrow heads

Downloads:

September 11, 2009

Attractive Read More Button Images For Blogger|Blogspot blogs –Arrow Head

44 Comments so far



Thankfully we are glad again to present yet another unique blogger resource entitled Arrow Head Read More Image Buttons which is barely available in the blogosphere. We have created a set of 12 Images each of different colour and taste. Get rid of that Read More Link text and replace it with a cool MBT Read More button.
First have a look at them in the screen display below,



Blogger Arrow Head Read More Button Images
Read More button Images for blogger/blogspot blogs
Downloads:
To replace you Read More Link with one of these button images then do the following,
1. Go to Layout > Edit HTML
2. Back up your template
3. Press Ctrl + F , and in the search box write the read more text. You know it better whether to search for Read More or Continue Reading. Depends what text are you using.
Once you find the read more text in your blogger template then replace the text with the code below,
<img width="120px" height="32px"   src="URL Of Your Read More Button Image"/>
Replace the bolded text in blue with the image link of the read more button. To know how to get Image URLs , read this post –> Create Image Backup In Blogger & Get Image URLs
You can also resize the image. The default size is 120px by 32px. If you want a smaller one than you can use these proportions:
width=”100px” height=”27px”
width=”80px”  height=”21px”

I hope you like this new set of images. I will publish a new set tomorrow.

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

52 Comments so far

 

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.

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!