Add Affiliate Banner Below Post in Blogger

Add Affiliate Banner Below Post in Blogger

In today's Blogger tutorial you will learn just how easy it is to place an affiliate banner at the end of each post of a Blogger blog (Blogspot blog). This is a relatively easy task but does require adding a short snippet of code to your Blogger template. For those new to Blogger or without much technical knowledge don't worry as I have broken down the steps so that anyone can follow them even virtual beginners.

For instructions on how to add affiliate banners to other areas of a Blogger blog (Blogspot blog) please consult these tutorials:

Add an Affiliate Banner or Adsense Above Blogger Header
Add an Affiliate Banner to Blogger Header
Add an Affiliate Banner to Blogger Sidebar

How to Add an Affiliate Banner Below a Blogger Post
The instructions below will place an affiliate banner below each post in your blog. The banner will appear on all pages including the home page. If you want faster loading times and the banner to appear only on individual post pages see tips and troubleshooting below for instructions on how to restrict the banner display to post pages only.

1. Login to Blogger if not already logged in

2. Navigate to Design > Edit HTML

3. Back up your Blogger template as a precaution by downloading to your computer

4. Check the Expand Widgets Template box

5. Find the following lines in your Blogger template with CTRL + F to bring up the search box

<div class='post-footer-line post-footer-line-3'/>
</div>

6. Paste your affiliate banner code between these two lines

<div class='post-footer-line post-footer-line-3'/>
Place the affiliate banner code here
</div>

Once you have finished your code should like something like the following which places a horizontal banner (468x60) in the post footer but any size banner can be inserted below each post provided your template is wide enough to accommodate it:

<div class='post-footer-line post-footer-line-3'/>
<a href='https://chitika.com/publishers.php?refid=XXXXXX' style='text-decoration: none;' title='Get Chitika | Premium'><img alt='Get Chitika | Premium' border='0' src='http://scripts.chitika.net/eminimalls/logos/468x60.png' title='Get Chitika | Premium'/></a>
</div>

7. Save Template

8. Click on View Blog to see your new affiliate banner in action

Tips and Troubleshooting

• If your template does not have these lines it may only have two post footer lines in which case you can do one of two things
  
  1. Add these lines to your template:
     

     <div class='post-footer-line post-footer-line-3'/>
     Place the affiliate banner code here
     </div>

     
     
  2. Or place the affiliate banner code between the following lines:
     

     <div class='post-footer-line post-footer-line-2'/>
     Place the affiliate banner code here
     </div>

  
  
• If you would like the banner to appear below your post only on the post page and not the home page then you will need to add an if statement to the code as follows:
  

  <div class='post-footer-line post-footer-line-3'/>
  <b:if cond='data:blog.pageType == "item"'>
  Paste affiliate banner code here
  </b:if>
  </div>

  
  
• If you are having problems adding the affiliate banner code to the template make sure that only single quotes are used. The Blogger template code is sensitive to this and usually doesn't accept double quotes

In today's Blogger tutorial you have learned how to place an affiliate banner at the bottom of a post in a Blogger blog (Blogspot blog). This banner will be the same for each post and only displays on the individual post page. If you would like to know more about adding banners to Blogger please consult the list of tutorials below. 

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Add Chititka Ads to Blogger Blogspot Blog
Add an Affiliate Banner or Adsense Above Blogger Header
Add an Affiliate Banner to Blogger Header
Add an Affiliate Banner to Blogger Sidebar
5 Ways to Make Money from Blogger
Blogger Guide to Google Adsense Placement

Free Social Bookmark Buttons for Blogger

Free Social Bookmark Buttons for Blogger

One way to get your blog to grow is add social bookmarking buttons to your Blogger Blogspot blog. In an earlier article I wrote about the simplest way to place social media on a Blogger blog - that is to add an all-in-one Add This social bookmarking button. 

However, as one size doesn't fit all situations there may be lots of times when you would prefer to add individual social bookmark buttons to your Blogger blog. That's why I have put together this list of useful free social bookmarking button sets. All are free to use on a personal blog and most have no restrictions for commercial use either but please do double check the license when you download them if you want to use the buttons commercially.

Best Sources of Social Bookmarking Buttons for Blogger Blogspot

128 Completely Free Icons Set
128 Icons available in 48×48px. Includes Social Media Icons such as: Design Float, Digg, Delicious, Furl, Technorati, Flickr, Stumble Upon, Twitter & more…

Web 2.0 Icons (23 icons)
23 freeware “iPhone-like” icons sized from 512X512 to 16X16 pixels. Includes Blinklist, BlogMarks, Delicious, Digg, FaceBook, Favorite, Feeds, FeedBurner, Flickr, Furl, Google Magnolia, Misterwong, Myspace, Newsvine, Netvibes, Reddit, Simpy, Stumbleupon, Technorati, Twitter, Youtube.

Socialize (12 icons)
12 high quality, free icons in these sizes: 16x16px, 32x32px, 48x48px, 64x64px and 128x128px and 32-bit transparency PNG file format.



Handycons (12 icons)
Handycons is a free, hand drawn social media icon set containing 12 icons. Package contains icons for del.icio.us, Digg, Mixx, DesignBump, StumbleUpon, Reddit, Developer Zone, DesignFloat, Technorati, Twitter and RSS feed & Email icon, of course. All icons are available in four sizes: 16x16, 24x24, 32x32 and 48x48 pixels. 




Handycons 2 (20 icons)
20 more hand drawn icons following on from the first Handycons set. Package contains Facebook, Blinklist, Feedburner, Flickr, FriendFeed, Furl, Gmail, Google, Heart icon, Last FM, Linked IN, Magnolia, Newsvine, PayPal, Skype, Sphinn, Twitter, Vimeo, Yahoo and You Tube icons. All icons come in four sizes: 16x16, 32x32, 64x64 and 12x128px. 




Social Media Icons (26 icons)
26 clean looking free social media icons available for personal or commercial use.

Aquaticus Social (30 icons)
30 Web 2.0 social media icons in 4 sizes. Free to use on blogs. List includes popular icons like: Blogger, Delicious, Digg, Facebook, flickr, furl, Google, Ma.gnolia, Mixx, MySpace, NetVibes, NewsVine, Reddit, StumbleUpon, Technorati, Twitter, Yahoo!


Aquaticus.Social by ~jwloh on deviantART


Social Me Icons (30 Icons)
30 free iPhone-inspired icons that can be used on blogs and websites without restriction. 4 sizes up to 60x60px, 48x48px, 24x24px, 16x16px. List includes popular icons like: Blogger, Delicious, Digg, Facebook, flickr, furl, Google, Ma.gnolia, Mixx, MySpace, NetVibes, NewsVine, Reddit, StumbleUpon, Technorati, Twitter, Yahoo!


Social.me by ~jwloh on deviantART


Social Bookmark Iconset Pt I


Social Bookmark Iconset Pt II



Ok so that's my current list of some of the best free social bookmark icons available on the net suitable for a Blogger Blogspot blog. This is a pretty extensive list to get you started but I will add more as time goes on and I come across other great sets. If you find what you are looking for here please let me know and if not I would be interested in that too. 


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Add a Social Bookmarking Button to Blogger

Add Social Bookmark Buttons to Blogger

Add Social Bookmark Buttons to Blogger

In today's Blogger tutorial (Blogspot tutorial) you will learn how toplace social bookmark buttons in the sidebar, footer and below each post in a Blogger Blogspot blog. This is a social bookmarking script for individual buttons or icons rather than the Add This all-in-one solution that I have previously written about. These free social bookmark buttons will encourage social bookmarking SEO by having your visitors save their favorite content and hopefully share it on social media sites such as Digg, Technorati and Stumble Upon thereby helping to grow your blog traffic.

I personally prefer to use an Add This social bookmark button because individual buttons can create a cluttered busy look. However, I also realize that the Add This social bookmarking button is not necessarily that recognizable to visitors who may have otherwise bookmarked your pages had the button been more recognizable to them.

How to Add Social Bookmark Buttons to Blogger Sidebar or Footer

1. Login to Blogger if not already logged in

2. Navigate to Page Layout > Page Elements

3. Click on Add Gadget in Sidebar or Footer

4. Select HTML/Javascript gadget from the list of available gadgets

5. Copy and paste the social bookmarking button code into the content box that is available for free download below. Note you will only be able to add the small social bookmarking buttons to the sidebar unless you only want a few of them.

Download Code for Large Buttons (48x48)
Download Code for Small Buttons (24x24)

6. Add a title such as Bookmark and Share if you wish

7. Click on the Save button

8. Use the drag and drop feature in the sidebar to reposition the new widget if necessary and save again

9. Click on View Blog to admire new social bookmarking buttons


How to Add Social Bookmark Buttons Below Every Post in Blogger

1. Login to Blogger if not already logged in

2. Navigate to Page Layout > Edit HTML

3. Back up your template as a precaution by downloading it to your computer

4. Check the Expand Widget Templates box

5. Find the following line of code using CTRL + F

<p><data:post.body/></p>

or

<data:post.body/>

6. Paste the button code below directly below this line

Download Code for Large Buttons (48x48)
Download Code for Small Buttons (24x24)

7. Click on the Save Template button to save

8. Click on View Blog to admire your new social bookmarking button set at the bottom of your blog


Tips and Troubleshooting

• To center the social bookmarking buttons

  <p><data:post.body/></p>
<div align='center'>
Your social bookmarking button code goes here
<br/>
</div>

  
  
• To have your social bookmarking buttons only appear on post pages you will need to enclose the code in an if statement
  

  <p><data:post.body/></p>
<b:if cond='data:blog.pageType == "item"'>
Your social bookmarking button code goes here
<br/>
</b:if>

  
  
• To center the social bookmarking buttons and have them appear only on post pages

  <p><data:post.body/></p>
<b:if cond='data:blog.pageType == "item"'>
<div align='center'>
Your social bookmarking button code goes here
<br/>
</div></b:if>

  
  
• To center the social bookmarking buttons and have them appear only on post pages

  <p><data:post.body/></p>
<b:if cond='data:blog.pageType == "item"'>
<div align='center'>
Your social bookmarking button code goes here
<br/>
</div></b:if>

  
  
• To add extra social bookmarking buttons to this set download the Aqauticus Icon Set
  
• To change the social bookmarking buttons for another set simply do the following:
  
  1. To find other social bookmarking buttons please do check out my article Best Free Social Bookmark Button Sets for Blogger first as very likely you will find something suitable in that collection. Download your preferred icon set. These will be in a zip file so you will need to unzip them and take a look at what sizes are on offer. Most icon sets come in at least several sizes.
     
  2. Upload your button images to Blogger or to an image storage site like Photobucket or Flickr. One easy way to upload to Blogger is to create a post called images that you never publish. Then upload the images you want individually (that's the drawback). Copy the URL address of the button image and paste it into the social bookmarking button code replacing existing URLs
     
  3. Change the URL address of each button in the button code I have supplied. That's the code beginning withscr='
  
  

In today's tutorial you have learned how to add social bookmark buttons using a social bookmarking script to the sidebar, footer and below each post in a Blogger blog (Blogspot blog). I have supplied you with the code for a small and large social bookmarking button set to get you started. I suggest you download the codes first and install them on your blog. Then it is just a simple matter of changing the URL address of the social bookmarking buttons if you wish to substitute these for a new set of social bookmarking buttons. Also in this tutorial I offered you some tips and troubleshooting suggestions for adding your social bookmarking buttons to Blogger. If there are other issues that crop up for you as always please ask. I am interested in hearing from anyone about how they got on installing these social bookmark buttons.


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Add a Social Bookmarking Button to Blogger
Best Free Social Bookmark Icon Sets for Blogger

Add 3 Column or 4 Column Footer to Blogger

Add 3 Column or 4 Column Footer to Blogger

In this Blogspot tutorial you will learn how to convert your existing Blogger footer (Blogspot footer) into a 3 column footer or a 4 column footer. With more columns in your Blogger footer you will be have the extra room to accommodate more widgets such as Flickr photos and Twitter updates. Also you will be able to put less frequently used widgets such as recents comments, archives, followers, About Me etc at the bottom of your template so that only the most important widgets are loaded first.

This tweak involves adding code to the footer section of your existing Blogger template to change it to 3 columns or 4 columns. The tutorial is not beyond the capabilities of Blogger newbies and webmasters with intermediate skills but care needs to be taken when modifying your Blogger template so back up before you start. For best results a Blogger template with a width of around 900px is best.



How to Add a 3 Column Footer to Blogger

1. Log in to Blogger if not already logged in
   
2. Navigate to Layout > Page Elements
   
3. Move any existing widgets out of the footer section and place them in the sidebar temporarily and save changes
   
4. Navigate to Layout > Edit HTML
   
5. Back up your template as a precaution by downloading it to your computer
   
6. Find the following section in your Blogger template
   

   <div id='footer-wrapper'>
   <b:section class='footer' id='footer'/>
   </div>

   
   If you are having difficulty finding this section trying searching for footer-wrap or something similar as sometimes this section is called something else in some templates.
   
7. To Add a 3 Column Footer to Blogger
   Replace all the code located in Step 6 with the following
   

   <div id='footer-columns'>
   <div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
   </div>
   <div style='clear:both;'/>
   </div>

   
   To Add a 3 Column Footer to Blogger with a Lower Footer Section
   Replace all the code located in Step 6 with the following
   

   <div id='footer-columns'>
   <div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
   </div>
   <div style='clear:both;'/>
   <p/>
   <div id='footer-bottom' style='text-align: center; padding: 10px;'>
   <b:section class='footer' id='col-bottom' preferred='yes'>
   </b:section>
   </div>
   <div style='clear:both;'/>
   </div>

   
   
   To Add a 4 Column Footer to Blogger 
   Replace all the code located in Step 6 with the following
   

   <div id='footer-columns'>
   <div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
   </div>
   <div style='clear:both;'/>
   </div>

   
   
   
8. Save changes to your Blogger template.
   
9. Navigate to Layout > Page Elements. You will now see a 3 column footer, 3 column footer with a lower section or a 4 column footer depending on what option you chose.
   
10. Move the desired gadgets to the new Blogger footer columns. Create new widgets to fill up the footer columns if necessary. Save your changes.
    
11. Click View Blog to admire your new footer section

Tips and Troubleshooting

1. To Add Padding Between Footer Columns in Blogger
   To create some padding between the columns add the following code to the style section of your Blogger template - before </b:skin> tag.
   
   #footer-columns {
   clear:both;
   }
   
   .footer-column {
   padding: 10px;
   }
   
2. To Add a Border to the 3 or 4 Column Blogger Footer
   
   • For Top Border Only of the 3 or 4 Column Footer
     Paste the following code before the </b:skin> tag
     
     #footer-columns{
     border-top:1px dotted $bordercolor;
     clear:both;
     margin:0 auto;
     }
     
     Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example
     
     
     #footer-columns{
     border-top:1px dotted #113355;
     clear:both;
     margin:0 auto;
     }
     
   • For a Box Border Around the 3 or 4 Column Footer
     
     #footer-columns{
     border:1px dotted $bordercolor;
     clear:both;
     margin:0 auto;
     }
     
     Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example
     
     #footer-columns{
     border-top:1px dotted #113355;
     clear:both;
     margin:0 auto;
     } 

In today's Blogger tutorial you have learned how to add a 3 column footer or a 4 column footer to your Blogger template (Blogspot template). You have also learned how to add some styling such as a border above the footer and around the footer. As always I am available to answer questions if you need assistance. Good luck! 

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Customize Blogger Tips

Blogger Post Image Borders Change or Remove

Blogger Post Image Borders Change or Remove

Sometimes you may want to remove, delete or change the image border of a custom Blogger template or default Blogger template (Blogspot template). In this Blogger tutorial you will learn how easy it is to make changes to your template so that you can get rid of unwanted image borders around all the images that appear in your blog posts or around a single image in a blog post.

You will also learn how to enhance your Blogger template (Blogspot template) by changing the line color and line style of the existing image borders.

Note this Blogger tutorial applies to custom templates and the previous generation of Blogger templates. If you are using the new default Blogger Template Simple please refer to my Blogger tutorial How to Remove the Image Border in Blogger template Simple for instructions

This Blogspot tutorial is rated easy. It involves making minor alterations to your Blogger template (Blogspot template) but this is well within the capabilities of beginner bloggers and newbies. The changes will take less than 5 minutes to complete and can make the world of difference to your Blogger template.


How to Delete, Remove, Get Rid of the Image Border in Blogger Posts
The following instructions will remove the little border around the images in your Blogger posts.

1. Login into Blogger if not already logged in
2. From the Dashboard navigate to your blog. Go to Design > Edit HTML by clicking on the Design tab and then choosing the Edit HTML link
3. Back up your existing Blogger template by clicking on theDownload Full Template button
4. Find the following code in your Blogger template (no need to check the Expand Widgets Template box as we are only working with the CSS Style Sheet). Note: the code in Blogger templates varies but this is the code you will find on a Blogger Minima template and most other default Blogger templates.
   

   
   .post img {
   padding:4px;
   border:1px solid $bordercolor;
   }

   
   If you do not have this code look for the following:
   

   img{
   padding: 4px;
   border:1px solid $bordercolor;
   }

5. There are two ways to get rid of the unwanted border image code. You can either:
   
   • Remove the following line:
     

     border:1px solid $bordercolor;

     or
   • Change it to the following

     border:0px;

6. Click on the Save Template button
7. Click View Blog to admire your post images minus any image border.

How to Change the Color of the Image Border Around Posts in a Blogger Template 
The following instructions will show you how to change the color of the border which appears around images in your Blogger posts

1. Follow Steps 1 to 4 as per removing the image border from Blogger posts.
2. There are several methods to change the color of the image border but the easiest is to
   
   • Change the following line:

     border:1px solid $bordercolor;

     
     to

     border:1px solid #6698FF;

     
     The above change will make the border line color sky blue. To change the color (in red) to your own color choice replace with the hex color code for your chosen color
3. Click the Save Template button to save your changes
4. Click on View Blog to admire the new color around the images in your Blogger posts

Tips and Troubleshooting

• To change the image border line style from a solid line to a dotted line change the word solid to dotted eg
  

  border:1px dotted $bordercolor;

• To change the image border line style from a solid line to a dashed line change the word solid to dashed eg
  

  border:1px dashed $bordercolor;

• To increase the width of the image border change the size from 1px to 2px or 3px eg
  

  border:3px solid $bordercolor;

• To Remove The Image Border Around Only One Image paste the following into your image code in your Blogger post:
  

  style="border:none"

  eg
  <img style="cursor:pointer; cursor:hand;width: 126px; height: 22px;" src="http://3.bp.blogspot.com/_vLeiVavkV_M/SrRp2wb1I_I/AAAAAAAAAAA/XXXXXXXXX/s200/download-now.png" border="0"style="border:none"alt=""id="BLOGGER_PHOTO_ID_XXXXXXXXXXXX" />

In this Blogger tutorial you have learned how to remove, delete and get rid of the line border which appears around images in your Blogger posts (Blogspot posts). You have also learned how to change the line color of the border image to your own chosen hex color. In addition I have shown you how to change the line style from solid to dotted or dashed and to remove the border around a single image. As always any problems with making these changes please let me know. Good luck!


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Remove the Image Border in Blogger Simple Template