Add Amazon Product Links to Blogger Posts

In this tutorial you will learn how to deep link a specific Amazon product directly into your Blogger posts so that the link will appear either on every post page or alternatively only on a selected post page. By deep linking a targeted Amazon product directly to your Blogger blog you can expect to increase your Amazon sales and to make extra money from Blogger. If you wish to learn more about adding Amazon widgets to your blog please refer to my earlier tutorial Make Money Add an Amazon Widget to Blogger


This tutorial provides you with a complete walk through of the process of adding Amazon product links to Blogger. I have rated the tutorial as moderate as it involves setting up the Amazon product link, converting the code and adding a block of code to your Blogger template. All these steps are within the capabilities of the average Blogger user provided you follow the step by step instructions below.

How to Deep Link an Amazon Product to Blogger Posts
This tutorial will show you how to add an Amazon Product Link at the foot of every post in your Blogger blog. If you want your link to appear only on a specific individual post page see Tips and Troubleshooting below for instructions.

Difficulty Level: Moderate

1. Sign in to your Amazon Associates account. If you are not a member sign up is free to both Amazon.com and Endless.com
   
   
2. Click on the Links and Banners tab
   
   
3. Under the Product Links heading choose the Add Product Links Now link
   
   
   
4. From the Product Links page choose your Product Category from the drop down list and enter your search keyword phrase to identify the product you wish to link to. Hit the Go button.
   
   
   
5. From the search results choose the individual product you will linking to by clicking on the Get Link button on the right hand side of the product
   
   
   
   
6. You will now be taken to the Customize and Get HTML code page.
   
   
   • Select Link Type
     By default both the product image and text link will display but you can customize it to display the image only or the text only by checking the box alongside these options
     
     
   • Customize Link
     Choose the appearance of your product. With or without a border. Choose color options to suit your blog. I suggest you keep the default setting for the link opening in a new window. Amazon lets you see a live preview of your product on the right so that you can make any adjustments before embedding the code into your blog.
     
   
   
   
7. Once you are satisfied with the product's appearance click on the highlight code button at the foot of the page and copy the HTML code for the Amazon Product Link.
   
   
8. Open a Javascript to HTML converter such as Centricle. Paste your code into the content window and press the Encode button
   
   
9. Highlight and copy the code that has been converted
   
   
10. Login to Blogger if not already logged in
    
    
11. Navigate to Layout > Edit HTML
    
    
12. Back up your Blogger template as a precaution
    
    
13. Check Expand Widget Templates box
    
    
14. There are several places you may wish your product link to appear. I have assumed for the purposes of this tutorial that you want it at the bottom of your post. Therefore find the following code in your template:
    
    

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

    
    
15. Directly below this line paste the converted Amazon HTML code
    
    
16. Click on Save Template
    
    
17. Click on View Blog to view your link at the foot of every Blogger post including the home page view.
    

Tips and Troubleshooting
If you are writing about a lot of different products on your blog you may need to place targeted Amazon product links on your Blogger individual post pages. To have the Amazon Product Link only appear on a specific post page follow these steps.

How To Add an Amazon Product Link to an Individual Blogger Post
Before you get started you will need to know the full URL address of your Blogger post. To get this navigate in a new window to the specific post page of your Blogger blog and copy the address from the address bar at the top of your browser

1. Follow steps 1 to 13 as per adding an Amazon Product Link to the foot of every Blogger post.
   
   
2. Find the following code:
   
   

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

   
   
3. Directly below this line paste the following code:
   
   

   <b:if cond='data:blog.url == "your blog post URL including http://"'>
   Paste your Amazon code here
   </b:if>

   
   
4. Replace "your blog post URL including http://" with the URL address of your blog post
   
   
5. Paste over "Paste your Amazon code here" with your converted Amazon HTML code
   
   
6. Click on Save Template
   
   
7. Click View Blog and navigate to the individual post page to see your Amazon Product Link at the foot of your Blogger post (Blogspot post)
   

In this tutorial you have learned how to add an Amazon Product Link to your Blogger posts (Blogspot posts). I have also shown you how to embed an Amazon Product Link directly into a specific Blogger post. By adding targeted Amazon product links to your Blogger blog you can expect to make extra money from your blog. I would love to hear from anyone about their experiences of adding Amazon widgets or product links to their Blogger blog so if you have the time please let me know how you get on.




Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Make Money Add an Amazon Widget to Blogger
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
Add an Affiliate Banner Below Blogger Post
Make Money Add Banner Ads to Blogger
5 Ways to Make Money from Blogger
Blogger Guide to Google Adsense Placement
Add Paypal Donate Button to Blogger
Blogger Guide to Google Adsense Myths

Make Money With Adsense Keywords and Blogger

If you are new to blogging with Blogger (Blogspot) and wondering how to make money with Adsense this article is for you. If you have Google Adsense on your blog but are disappointed with the revenue generated so far then read on. Even if Google Adsense is performing well for you I am going to give you some tips that will mean you will earn extra money from Google Adsense.

Why Are Keywords So Important for Bloggers?
In order to make money from blogging with Blogger it is important first to understand the significance of keywords and keyword phrases. Via Google Adwords, the sister of Google Adsense, advertisers bid for keywords and keyword phrases. The more frequently these keyword terms are searched for the higher their value. That is why keyword phrases like make money or make money online which receive a huge number of monthly searches are top paying keywords and are worth so much to advertisers.


To make money with Google Adsense all you need do once your blog is receiving traffic is sign up with Google Adsense, receive a unique code and then place Google Adsense ads on your Blogger blog. These ad units are targeted automatically based on the keywords and keyword phrases which appear in the content of your posts. You get paid for every click on one of your Google Adsense ads. The amount you get paid is determined by the value of the keyword or keyword phrases used.

As a webpublisher it is important to be mindful when crafting your content that you use Google keywords and keyword phrases relevant to your blog's content. This does not mean that you stuff your posts with Google keywords to generate higher Google Adsense payments. In fact having too many keywords is known as keyword stuffing and could mean your blog is penalized by Google. A good rule of thumb is to have 3-5% of your content made up of your blog's keywords. A keyword density over 7% is too high and risks penalty.

For help with adding Google Adsense ad units to your Blogger blog please refer to my article Blogger Guide to Google Adsense Placement

Find The Best Google Keywords for Your Blog
These days many bloggers wanting to make money with Adsense build their blogs based on Google keywords. Their plan is to achieve first page positions on Google search pages for each of these keywords and keyword phrases. However, adopting this strategy from the outset would not be the case for most bloggers. Most of us start a blog about something we are interested in and then decide that we would like to make money with Google Adsense.

If Google keywords for your blog is not something that you have paid much attention to up to now then you may be surprised at what a difference it will make to your Google Adsense earnings and SERPs (search engine results page). Just by figuring out your keywords and emphasizing them in your blog posts you can expect to earn extra money with Google Adsense and Blogger. I did an exercise recently where I edited one of my earlier posts and added about 10 more keywords to the content. Not only did I move my article from about 60 in Google searches to 10 the revenue earned from Adsense for this article increased markedly too.

To determine what your keywords are for your blog you will need to conduct some research. Go to Google Adwords Keyword Tool and type in the topic of your blog. For instance if your blog is about making money online you would type in this phrase to receive other keywords that are related to your blog topic.

Try to identify about 10 to 15 Google keywords and keyword phrases that fit with your blog content. Print out this list and keep it handy so you can refer to it often when writing content for your blog.

Write an article around each of these Google keywords or keyword phrases. These 10 to 15 articles will become the backbone content of your blog. Research these articles by performing Google searches and reading what other bloggers who make it to the first couple of pages in the search engine results are writing about. Notice their keywords and keyword phrases, and the tags they have used. This research will help you identify two things:

• Any gaps not so well covered by fellow bloggers but relating well to your keywords. That will give you a nice opportunity to write a series of articles on the topic
  
  
• How other bloggers in your niche are tailoring their content for success and which keywords are performing well for them

Always write original content. Never copy another bloggers material. Despite being unethical to plagarize duplicated material is easy to identify and can mean that you get penalized by search engines like Google and run the risk of being banned from Google Adsense. My take on what is known as blog scraping is that if you need to copy what some else has written clearly you don't understand your blog topic well enough and you are probably better to write about something you do know something about. Your readers will see through you very quickly if you don't fully understand the depths of your blog topic.

Google Adsense Tips for Blogspot Bloggers (Blogger Bloggers)

• Add Your Main Keyword to Your Title Tag
  Make sure that your main keyword for each of your 10-15 articles forms part of your title tag as this is important if your article is to rank highly in search engine results. If you can use two keywords or keyword phrases all the better. You will note that I have added three keywords in my title: make money, Google Adsense and Blogger.
  
  
• Use the Main Keyword in the Body of Your Posts
  Make sure you use the main keyword throughout the body of your article. Ensure that your main keyword appears in the first and last paragraph of your post. There are keyword density tools available to help you check the ratio of keywords used.
  
  
• Make Sure You Tag Your Main Keyword
  Tagging your main keyword and other keywords and keyword phrases is also important if readers are to find your article. Your posts will do better in search engine results if they are appropriately tagged. And of course the better your blog is search engine optimized the more traffic your blog will receive and the greater the potential for Google Adsense revenue.
  
  
• Make Sure Your Blog is Search Engine Optimized
  Optimize your Blogger blog by adjusting your title tags and adding meta tags for better SEO. SEO is important as it generates search engine traffic and building traffic is paramount for high earnings from Google Adsense.
  
  
• Develop Backlinks for Your Blog
  Some of the factors that determine how high your articles will appear in search engine results are backlinks and the age of your blog. If you have some good backlinks to highly ranked websites your blog articles are likely to be promoted in search engine results. Use blog directories, forums, and comment on other blogs in your niche to build a good range of backlinks. Submit your best articles to article directories to generate traffic and links. Also submitting your article to social bookmarking sites like Digg and StumbleUpon can provide backlinks and boost traffic at the same time
  
  
• Give Your Old Blogger Posts a Keyword Makeover
  Go back through your previous blog posts and identify posts that are not receiving a lot of traffic. Read through them and look for opportunities to rewrite small portions of the content to insert keywords and keyword phrases. Check the tags too and add any keywords and keyword phrases that may help to boost traffic. Identify any posts that need to be rewritten from a slightly different angle and with more scope for the addition of keywords
  
  
• Publish Posts at Least 250-300 Words Long
  Check the number of your articles Google has indexed. Shorter articles can often be missed out particularly if your blog is only recently created. Plus shorter articles do not give enough scope for Google Adsense to necessarily know what keywords to target when serving ads.
  
  
• Optimize Google Adsense Placement, Size and Appearance
  Some locations for Google Adsense work better than others. Make sure you read up on Google Adsense placement as this will ensure you make the most money from your Adsense ads.
  
  Some Adsense ad unit sizes are better performers than others. My personal favorite is 336x280 ad unit which I use successfully on most of my blogs.
  
  Consider the appearance of your Adsense ad unit. Blend it in or make it stand out the choice is yours.
  

In today's article I have discussed how to make money with Google Adsense and Blogger. I have paid close attention to the use of keywords and keyword phrases in your content as these are the basis for the ads served up by Google. Included in this article are tips on how to locate and identify your keywords, increase your keyword density and use keywords effectively along with other Adsense tips.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Blogger Guide to Google Adsense Placement
Blogger Blogspot SEO Tips and Tricks

Make Money Add an Amazon Widget to Blogger

In today's tutorial you will learn how to place an Amazon widget on your Blogger blog (Blogspot blog) to enable you to add a further income stream to your existing Blogger earnings.

Adding an Amazon widget to Blogger is not difficult. No change or very little change to your Blogger template is required. There is some time involved in setting up the widget itself and choosing the products to link to and customizing the look to match your blog however. This tutorial will walk you through the steps involved but first a few need to know facts about Amazon's affiliate program.


Important Details For Bloggers About Amazon's Affiliate Program

• Amazon have 2 referral structures: Classic Plan and Performance Plan
  
  
  • For the Classic Plan - A flat rate commission of 4% is paid
    
    
  • For the Performance Plan - A sliding scale between 4% and 8.5% commission is paid on general product items shipped. Consumer electronics is paid at a flat rate of 4%. Kindle, MP3,video on demand and game downloads are at the rate of 10%. View fee structure for Performance Plan
    
  
  
• Sell 7 items in a month and you will receive 6% commission on sales. Sell in excess of 30 items and receive referral fees at the rate of 6.5%
  
  
• Affiliates earn commission on the total of items shipped not just the first product bought
  
  
• Payment options are direct credit, check or Amazon Gift Certificate. There is a $15 charge for the issue of a check.
  
  
• Payment of referral fees is made once your account reaches $10 provided you have opted for the direct credit or Amazon Gift Certificate option. Otherwise it is $100 for a check (cheque)
  
  
• Amazon offer a choice of 17 different widgets
  
  
• Amazon also offer links and banners and an astore option

Earning Money from Amazon Widgets
Linking to Amazon products on your blog can generate significant income depending on your blog topic and the type of links you choose. I personally find that my sales are not always related to blogging despite the Amazon widget on this blog linking to books about blogging. However I would strongly suggest that you try to match the products offerred to the general content of your blog so that your links are targeted to your blog's audience. Another option is to add a generic Amazon widget such as the Deals Widget to snag those bargain hunters and impulse buyers from your readership.

Placing Amazon Widgets on Blogger
There are 17 different Amazon widgets to choose from. The decision about which widget is best will partly be determined by the type of blog you have and where you want to place the widget.

I have had some success with the Carousel Widget that I have on Blogspot Blogger Guide - another of my blogs. I have found under the header to be a prime location for this gadget and as it is displayed on every page the widget is getting maximum exposure. I have also had moderate success with a sidebar location using the I Recommend widget. I think it is true to say that you will need to experiment a bit to find the best type of widget for your blog.

How to Add an Amazon Widget to a Blogger Blogspot Blog

Difficulty Level: Easy to Moderate

1. Join Amazon's Referral Program and create an affiliate account at Amazon. You will need to supply your direct deposit details as Amazon charges to issue affiliate checks (cheques)
   
   
2. Once your affiliate registration is confirmed (this is a fast process) you will then be ready to start to create an Amazon widget for your blog. So go ahead and login to your affiliate account at Amazon and click on the widgets tab
   
   
3. Now comes the fun part - choosing a widget. Amazon currently have 17 different widgets to choose from. The Amazon help section is good and I suspect will answer most of your questions if you get stuck.
   
   
4. Choose your widget. For the purposes of this demonstration let's choose a Recommended Product Links widget. Click on the Add to Your Webpage button
   
   
5. From the drop down select a product line eg Cameras and Photo. Select a subcategory eg General Bestsellers. Click the Continue button.
   
   
   
6. Select the size of widget according to the location where it will be placed on your blog eg 160x600 in the sidebar of Blogger. Click on the Select This Size button at the right of the example widget
   
   
   
7. Now you will need to customize your widget. Click on Customize Link Appearance and enter link and text colors to suit your blog. Ensure that the widget opens in a new window unless you are quite happy for your readers to leave your blog. Leave this window open in the meantime as we will be returning
   
   
   
8. In a new window login to Blogger if not already logged in
   
   
9. Navigate to Layout > Page Elements
   
   
10. Click on Add Gadget in the sidebar and choose HTML/Javascript from the list of available gadgets
    
    
11. Copy the widget code which contains Amazon's tracking code and paste it into the content area of the gadget. Add a title if you wish. Click the Save button
    
    
12. Use the drag and drop feature to reposition your widgets in the sidebar in the order that you want them to appear. Save any changes
    
    
13. Click on View Blog and admire your new widget in the sidebar of your blog
    

Tips and Troubleshooting
Some placements of Amazon widgets will require tweaks to your Blogger template. For instance the Carousel widget which I mentioned earlier I inserted under the header in my blog. To place an Amazon widget or for that matter any widget below the header and above the first post in Blogger do the following:

1. Login to Blogger if not already logged in
   
   
2. Navigate to Layout > Edit HTML
   
   
3. Find the following line of code
   
   

   <b:section class='crosscol' id='crosscol' showaddelement='no'/>

   
   
4. Replace the no with yes and click the Save button
   
   
5. Navigate to Layout > Page Elements
   
   
6. You will see that you can now add a gadget below the header
   

In this tutorial you have learnt about adding Amazon widgets to a Blogger Blogspot blog in order to earn cash from referral fees. Most bloggers earn around 4 to 6.5% in commission for items shipped from Amazon. While not the best affiliate scheme Amazon referral fees can add up to tidy sum at the end of the month. I would recommend giving it a try. You will need to experiment to get the best fit of location and widget. Good luck and let me know how you get on.

Related Articles
Add Amazon Product Links to Blogger Posts
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
Add an Affiliate Banner Below Blogger Post
Make Money Add Banner Ads to Blogger
5 Ways to Make Money from Blogger
Blogger Guide to Google Adsense Placement
Add Paypal Donate Button to Blogger
Blogger Guide to Google Adsense Myths

Add Social Bookmark Buttons to Blogger

In today's Blogger tutorial (Blogspot tutorial) you will learn how to place 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 with scr='
     
  
  

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

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 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

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 /><!-- HTML codes by blogknowhow.blogspot.com --><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 /><!-- HTML codes by blogknowhow.blogspot.com --><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/AVvXsEigz1SllEjqCYzogPx5B7pZSUPdmVmGG9kxZ03d3FvR381XQZXwSGoftqpMakEkYNaVYTCjED6K3L6LAHzpb2Hb7-U6ktVe6WYS5owBJkjdsYvras0NKjaEBnPhl71o8dENQ9eClAgqK8o/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 /><!-- HTML codes by blogknowhow.blogspot.com --><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