Friday, October 30, 2009

How to Add Amazon Associates to Blogger

Not very long ago Blogger.com introduced a new and cool feature which enable us to add Amazon product listings easily to our posts.

It is easy to do, you can follow the steps below if you are interested to add Amazon products to your posts fast and easy without having to bother opening Amazon site in a new tab and searching the product you want, copy the link and paste it on your post.
  1. First thing to do is you need to register or signup as an amazon affiliate.
  2. Go to your Blogger dashboard and then click Monetize.
  3. how to add amazon associates to blogger
  4. Under the Monetize menu, click on the Amazon Associates tab.
  5. Fill in the Amazon affiliate ID in the text field provided. 
  6. After that follow the instruction on that page if you want to add product previews to your posts.
  7. After that click Save Settings.
Now when you go to make a new post, you can see there is an Amazon box at the right side of the page (see the screenshot below).
amazon associates to blogger
How to add amazon products to your blogger post


You can search and choose the Amazon product from there. You can also choose whether you only want the link to appear on your post, the image or both the link and image. Point the cursor on your post where you want the product to appear and then click one of the three option (link, image or link+image) and the product will automatically appear on that chosen spot. You can see the example i did on the right side.

See how easy it is to use this new feature to add Amazon product to our post.

Swap blog title with page title in Blogger blog

By default, Blogger will place the title of your blog before the title of the article in the title bar. According to Search Engine Optimization, it is much better if our keywords in the title bar should comes first followed by the title of the blog. This to ensure that search engine robot or spider will read the keywords before anything else, so that our site is lkely to be placed higher in search engine result.

Fortunately, there is a good hack to rectify this problem. By simply swapping the position of the page title with the blog title, we can obtain significant improvement in the search engine result.

swap blog title with post title
how to swap blog title with page title
To swap the position of the blog title with the page title:
  • Login to your blog and navigate to Layout – Edit HTML.
  • Always backup your template before changing anything to avoid any undesired outcome. Click ‘download full template’ and save it into your harddisk.
  • Replace this following line of code:

    <title><data:blog.pageTitle/></title>

    With this one:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/> - <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>
  • After that click on ‘Save template’ and you’re done.
Try to view your blog, your page title should now appear before the blog title and is separated by the ‘hyphen icon’. This should works even if you view your entire pages of your blog.

Add meta tags to each Blogger posts

Meta tag is an HTML tag which resides in the <head> section of a web page. Meta tags is not visible when seen in a browser, so visitors never see them. Meta tag is very valuable because of the fact that search engines are going to use it to describe our site in the search result. Meta tags are also used as an information for the search engine as whether your site is the one that users are looking for. Ignoring on-site search engine ranking factors can be costly because things like keyword-rich titles and solid internal linking can produce a very significant impact. Since Meta keywords and Meta description are not automatically generated for Blogger templates, we have to add them to the HTML markup of our Blogger templates.

How to add meta tags to blogger posts
How to add meta tags to each of your Blogger page:
  • Login and open the dashboard of your Blogger blog
  • Click Layout and Edit HTML
  • Before making any changes to your template, always backup your current template.
  • Find the following code:

    <title><data:blog.pageTitle/></title>
  • Copy the following code snippet below, and after that paste it below the 'grey' code:

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta content='DESCRIPTION' name='description'/>
    <meta content='KEYWORDS' name='keywords'/>
    </b:if>
  • So finally it will look like this:

    <title><data:blog.pageTitle/></title>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta content='DESCRIPTION' name='description'/>
    <meta content='KEYWORDS' name='keywords'/>
    </b:if>

    That will add the meta tags for your homepage of your blog.
  • Replace the DESCRIPTION with a description about your homepage (keep it less than 150 character).
  • Replace the word KEYWORDS with your keywords, each keyword separated by commas and make it relevant for your homepage (keep word repetition less than 3 in order to avoid keyword spamming).
  • To create and add another meta tags to each of your Blogger posts, copy this following code:

    <b:if cond='data:blog.url == &quot;URL-OF-YOUR-PAGE&quot;'>
    <meta content='DESCRIPTION' name='description'/>
    <meta content='KEYWORDS' name='keywords'/>
    </b:if>

    place the code just below the homepage code that you just entered. You need to repeat the step above in order to create another meta tags for your next individual post.
  • You can check whether you've add the meta tags correctly without any mistake with any meta tag analizer provided on the web like submit express or seo centro.

How to Stop or Turn Off Commenting Feature on Blogger

Most bloggers love comments, especially useful ones. But when people flood your posts with spams, it would be tiring for you to manually delete all those unwanted comments that could hurt your blog.

In Blogger, by default, comments enabled for all our posts. Have you ever wanted to turn off or disable commenting on your specific post on your Blogger post? In fact, you are allowed to do so, here’s how:

How to remove date, time and author on Blogger posts

There are many reason for blogger to hide their post date, post time and post author. It might appear less cluttered to them or simply they want to make their blog looks cleaner and tidier. Now Blogger provides an easy and fast way for you to hide those options without having to edit your HTML template and involve in HTML codes. You can choose to hide only post time, post date, or post author, or all of them, and even to hide some other options like label, comments, Show Quick Editing and etc . Ok lets we begin the tutorial:

  • First thing to do is of course sign to your blogger account and go to your Layout from your dashboard, then at the bottom of the Blog Posts box, click an edit button and a pop up box will appear.
how to remove date, time and author on Blogger posts
  • Now all you have to do is uncheck the radio button next to each Post Page options to hide the menu and check it again to re-show it on your blog.
how to hide date, time and author on Blogger posts
  • When you’re finished with your settings, click save and the task is done.

You can also check the date of an article or web page and find out when it was first published.

Remove Subscribe to: Posts (Atom) link

You will see there is “Subscribe to: Posts (Atom)” link in every new Blogger blog that enable visitors to subscribe to your Atom feeds. On the main page, this will link to your main site feed, whereas on post pages, this wiill link to the comments feed for a partricular post. However many bloggers choose to remove it because it occupies space at the bottom of the template so it does not look nice. Moreover, blog owners who try to make their blog looks more like a website will definitely choose to eliminate those links. To remove the “Subscribe to: Posts (Atom)” links:
How to remove Subscribe to Posts Atom link
  • Sign in to Blogger and go to dashboard > Layout > Edit HTML > tick Expand Widgets Templates box.
  • Save a copy of your current template, just in case if you do something wrong.
  • Find and choose one of the following codes below and delete it:

    <b:include data='feedLinks' name='feedLinksBody'/>

    Or

    <b:include name='feedLinks'/>
  • To be sure this has worked, preview the blog template and save the settings, the “Subscribe to: Posts (Atom)” link wont be there anymore on your blog.

Remove Newer or Older Post Links

If you want to make your Blogger blog looks like a website, one of the things you need to remove is the “Newer Post”, "Home", and “Older Post” links from Blogspot post footer. Besides removing them you actually can change them or add images instead of “Newer Post” and “Older Post” links. There are two ways to do it and these hack are easy to perform and will take only few seconds.
How to Remove Newer or Older Post LinksHow do i get rid of "Older Posts" - "Home" - "Newer Post" links?
  • From your Blogger dashboard click on Layout > Edit HTML > tick Expand Full Templates box.
  • Don’t forget to backup your template, many bloggers made mistakes in this hack.
  • Search for the following code:

    <data:newerPageTitle/>
    and
    <data:olderPageTitle/>
  • Now simply delete above codes or replace with anything you want to write, to add picture just place the image URL before the Previous Page and Next Page. Remember to preview changes before saving it.
The second method is:
  • Go to Layout > Edit HTML > tick Expand Full Templates box.
  • Again, backup your template.
  • Find these codes below:

    #blog-pager-newer-link {
    float: $startSide;
    }

    #blog-pager-older-link {
    float: $endSide;
    }

    #blog-pager {
    text-align: center;
    }
  • Add "display: none;" inside every curly braces, it will then looks like this:

    #blog-pager-newer-link {
    float: $startSide;
    display: none;
    }

    #blog-pager-older-link {
    float: $endSide;
    display: none;
    }

    #blog-pager {
    text-align: center;
    display: none;
    }
  • Preview the changes and click save template.