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
Tuesday, August 4, 2009
Free Social Bookmark Buttons for Blogger
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
- Add these lines to your template:
<div class='post-footer-line post-footer-line-3'/>
Place the affiliate banner code here
</div> - 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>
- Add these lines to your template:
- 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
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:
This code results in:
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> - 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
