Blog Know How

Monday, August 3, 2009

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

Saturday, August 1, 2009

Add Simple Image Slider to Blogger

Today's tutorial will teach you how to add a very simple image slider to the sidebar or content area of your Blogger Blogspot blog. The image slider will enable you to show off your images to readers and makes a nice addition to a personal blog. Each scrolled image is linked to the related post so that readers can find the posts they are interested in very easily. When the reader hovers over the image the slider stops and resumes again when the mouse is removed. See a for a working demo of this image slider in the content area or for a working demo of this image slider in the sidebar area.

This slider is so simple you will be able to have it up and running in about 5 minutes. No change to the template is required making it a breeze to install. Even if you are very new to Blogger and a beginner I will show you just how easy it is to add an image slider to your Blogger blog.

How To Add a Very Simple Image Slider to a Blogger Sidebar
(note this code will scroll the image from bottom to top)

1. Login to Blogger if not already logged in

2. Navigate to Layout > Page Elements

3. Click on Add a Gadget in Blogger sidebar

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

5. Paste the following code into the content box of the gadget

<br /><br /><marquee behavior="scroll" direction="up" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();"><a href="url of blog"><img alt="description of image" width="160" src="url of image" height="110" /></a><p>Image title</p><a href="url of blog"><img alt="description of image" width="160" src="url of image" height="110" /></a><p>Image title</p><a href="url of blog"><img alt="description of image" width="160" src="url of image" height="110" /></a><p>Image title</p><a href="url of blog"><img alt="description of image" width="160" src="url of image" height="110" /></a><p>Image title</p><br /></marquee><br />

6. Add a title to the widget if you wish

7. Substitute the url of your blog posts, the description of your image, the url of the image, and the title of the image for each image you wish to display. For example:

<br /><br /><marquee behavior="scroll" direction="up" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();"><a href="http://best-free-blogger-blogspot-"><img alt="Blue Magz - Best Free Blogger Blogspot Templates" width="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcDYw1MHXM1kZ0z0SYobRwgm6geevFfB4PCL_N6fWvL9K86Q9QU3DwImm5EYikF2xWPQIsIuZ0TnvmEj8KeuY4rT24aicLt-0K2sD4iYpplnUMshLCb3qfid6RQTvNHdDE7ZqE0VNNL6E/s320/blue-magz_blogger-template.jpg" height="110" /></a><p>Blue Magz</p></marquee>

This code results in:

Sample text under image

To find the URL of your blog post go to the individual post page and copy the url from the address bar in your browser.

To find the URL of the your image. Upload your image to a blogger post and copy the address enclosed in src=" " tags.

8. Save the gadget

9. Use the drag and drop feature to position the new widget in the sidebar

10. Click on save to save your changes

11. View your new widget in the sidebar of your blog

Tips and Troubleshooting

To change direction of the slider
Please note that this code will scroll the image from bottom to top. If you would like it to scroll in the reverse direction all you need do is change the direction in the code from "up" to "down". Or alternatively you can scroll from left to right by setting "right" and right to left by setting "left"
To increase the size of the images
To increase or decrease the size of the image displayed simply adjust the width and height parameters to suit your needs
To add more images
To add more images to the slider add the following to the code before </marquee>

<br /><br /><a href="http://"><img height="110" alt="description of image" src="" width="160" /></a> <p>Image title</p>
To adjust scroll speed
Scroll speed is set to 5 by default but any number can be set between 1 and 20 with "1" being the slowest and "20" being very fast indeed.

In today's tutorial I have shown you how to add a very simple image slider to your Blogger Blogspot blog to show off the images on your blog. There are a number of other image and content sliders and image slide carousels that can be added to Blogger and I will be writing about some of these in my upcoming posts.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs

Monday, July 20, 2009

Increase Google Page Rank Blogger Blogspot

Today I continue my series of articles on search engine optimization SEO for a Blogger Blogspot blog. The focus of this article is on increasing the Google Page Ranking of your Blogger Blogspot blog. If your blog is like mine and relatively new you will find getting off the lowest rung of the Google Page Ranking a bit of a mission but it can be done particularly if you use solid SEO techniques.

To recap search engine optimization is the process of making your website search engine friendly. As major search engines like Google and Yahoo will drive most of the traffic to your blog the more search engine friendly your blog is the more traffic you are likely to receive.

There are a number of SEO - search engine optimization techniques you can employ on your blog to boost traffic such as adjusting titles tags, making use of meta tags, using keywords and keyword phrases, improving keyword density, submitting your blog sitemap to search engines. I have discussed these in detail in my article SEO Tips for Blogspot Blogger blog.

I have already written a number of other articles about SEO for Blogger Blogspot blogs too including the following articles so if you want help with basic search engine optimization try these:

How to Create Search Engine Friendly Permalinks for Blogger
Add Breadcrumb Navigation to Blogger Blogspot Blog
Add Meta Tags to Blogger Blogspot Blog for Better SEO
Adjust Blogger Title Tags for Better SEO
How to Add a Blogger Sitemap to Major Search Engines
Submit You Blogspot Blog to Yahoo
Add Blogger Sitemap to MSN Live
10 Tips to Build Traffic for Blogspot Blogger Blog

Once you've started employing these SEO (search engine optimization) techniques and tips you are going to want to measure your blog's progress. Two important tools that measure the popularity of websites are Google Page Ranking and Alexa Ranking.

Improve the Google Page Ranking of Your Blogger Blogspot Blog
Google Page Ranking is a tool which ranks websites listed in the Google search engine. Websites are ranked on a scale of 0-10 with 0 being the lowest possible score for a site and 10 the highest. The higher the page ranking of your site, the greater the amount of traffic it receives in comparison to other sites. Check your Google Page Rank.

Google uses a complex formula to rank websites which I am not going to cover here. However there are some basic tips about Google Page Ranking that are useful for any Blogger webmaster to know.

Make sure your posts are keyword rich.
Google expects good usage of keywords so make sure your Blogger blog posts have a density of 3-5%. Keyword density is calculated by the number of keywords divided by the number of total words on a page. If your blog article is 500 words long and has 10 keywords it has a keyword density of 2%. A keyword density of anywhere between 2% and 7% is considered an acceptable range by Google. Anything percentage higher than 7% may well be regarded as keyword stuffing and your blog is likely to be penalized. You can check the keyword density using tools like
Post to your blog frequently
Make sure you post frequently as Google prefers fresh pages and does not like out of date sites
Create internal links
Link to previous articles you have written. If you have not cross linked as you posted it is probably worth going back and doing this even if it is a bit arduous.
Build external links to other sites on an ongoing basis
Build links on a regular basis by commenting on other related blogs and in forums. Add social bookmarking buttons to your blog to encourage readers to bookmark and share your articles. Be aware though that many sites such as Reddit, Digg and del.icio.us implement the link attribute rel="nofollow" which will not boost your ranking.

Ensure your blog is properly indexed by major search engines. List your blog in blog directories. Watch out for blog directories though as some require you to put a link on your blog but do not reciprocate with a link. See my article on getting listed in blog directories for further help.

It is worthwhile to link to other blogs you may own as well but doing this will not boost your page ranking particularly. Google is weighted to give a higher ranking to links from other high ranking blogs especially if they are relevant to the content of your blog. The higher the ranking of the site externally linking to yours the better. So essentially you can't just create a bunch of blogs and link to them with the expectation that your Google Page Rank will miraculously increase overnight. Far better to spend your time concentrating on creating a small group of links to quality sites with a high Google Page Rank than going all over the net creating links to low ranking sites.
Another aspect to consider when building quality external links is to ensure that your keywords and phrases appear in links which point to your site. Google analyzes these links so have the linking text contain your keywords to get the most out of them.

Check the Ranking of Your Blogger Blogspot Blog in Alexa
Alexa.com is a website that measures the traffic levels of websites. An Alexa rank is measured according to the amount of users visiting your website with the Alexa toolbar installed and takes into account page views, number of users and three months of historical data.

The Alexa rank is measured according to the amount of users who’ve visited a website with the Alexa toolbar installed. This is kind of an odd way to measure traffic but that is how it works. However it is a well established measure of the value of your site against others so it is useful to see how highly your blog is rated in Alexa. Provided your blog has been around a month or two you can check out how your blog is ranked by visiting Alexa's site info page