Foto Tips Online: Free Photo Style Icons

If you would like to add some icons to your blog that are related to photography, then the icons below would be a great addition. The Polaroid style icons on the left come from Webtoolkit4.me and can be downloaded for free by visiting their site. If you download the Polaroid icons and look closely at the Stumbleupon icon, you will see that they misspelled it, using a "p" where the "b" should be. I fixed the icon and you may right click on it, and save it, along with the Technorati icon that I made, and which is not included in the set (below the first picture). The camera icons on the right come from WebTreats/IconsEtc.com and you may download them individually for free by visiting their site,.. they have far too many to show here, and the icons below are just a small sample of them. Their icons are very large when you download them, and you will have to re-size them yourself.

PNG images that can be saved:

If you would like to add the Polaroid style icons to your Blogger template like I have below each of my posts on my Demo Blog, please visit Webtoolkit4.me and download the icons first so that you may host them yourself (I cannot give any guarantees about performance if you use the links to the icons below,.. bandwidth may be exceeded in the future). If your post column is wider than 620px, you may need to resize the icons, or remove a few so they will fit. Please try the following on a test blog before adding the icons to your regular blog.

Step One: Log into your Blogger account and go to your Dashboard, click on Layout, click on Edit HTML, download your current template in case a mistake is made during the installation of the icons, and then click on the Expand Widget Templates box.

Step Two: Copy the code below and paste it above ]]></b:skin> in your template so that you can make any adjustments to the height, width, margins, and padding that might be needed-

.bookmarkbox {
height:72px;
margin-top:30px;
width:600px;
padding:0px 8px;
}

Step Three: Copy the code below and paste it in Note Pad, Microsoft Word, or something similar so you can make a few changes to it. Change the icon links with those of your hosted icon images, add your Twitter ID to the Tweet This icon, and add your Feedburner subscription ID (subscription address with Feedburner) to the Feedburner icon.

<div class='bookmarkbox'>

<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Digg'><img alt='Digg' height='78' src='http://i45.tinypic.com/vy7hb6.png' width='62'/></a>

<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Reddit'><img alt='reddit' height='78' src='http://i46.tinypic.com/wjco7n.png' width='62'/></a>

<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' height='78' src='http://i50.tinypic.com/21c5wt0.png' width='62'/></a>

<a expr:href='"http://www.technorati.com/faves?add=" + data:post.url' target='_blank' title='Technorati'><img alt='Technorati' height='78' src='http://i47.tinypic.com/2myuivm.png' width='62'/></a>

<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + "YOUR TWITTER ID " + data:post.url' title='Tweet it on Twitter'><img height='78' src='http://i46.tinypic.com/osbz0h.png' width='62'/></a>

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Delicious'><img alt='Delicious' height='78' src='http://i46.tinypic.com/9hm7w9.png' width='62'/></a>

<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.title + "&u=" + data:post.url' target='_blank' title='Facebook'><img alt='Facebook' height='78' src='http://i48.tinypic.com/2a5c2zb.png' width='62'/></a>

<a href='http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER SUBSCRIPTION ID&loc=en_US' target='_blank' title='Subscribe Via Feedburner'><img alt='Feedburner' height='78' src='http://i46.tinypic.com/bgzsaw.png' width='62'/></a>
</div><div class='clear'/>

Step Four: If your template does not have the automatic read more hack installed, paste the above code imidiately after <data:post.body/> or <div class='post-footer-line post-footer-line-1'> Again, you should try this on a test blog first so you can see where the icons will appear before adding them to your regular blog (it is always best to try things on a test blog first).

If you do have the automatic read more function installed, paste the above code <b:if cond='data:blog.pageType == "item"'><data:post.body/> <--HERE--> </b:if>

The icons should only appear on your post pages so you will have to save your template before you can see the icons.