Well People Love to Share the Images to Social Networking and Image Clipping Sites Such as Facebook,Twitter,Pinterest,Ehow Spark And Manymore.so many Blogs have a focus on Images,Then how about having the bookmarking icons appear on the actual images you have on your blog ?
So in this post I'll Show You How to add social bookmarking icons from AddThis to your images, the icons will only appear when readers hover over the image and they appear with an overlay.So let's Have a Demo of it Now.
Live Preview :.
Before:.
After:.
So Now Let's Start Adding the Widget :.
Step 1: In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed > Tick The Expand Widget Templates Box .
Step2: Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code.
Step 3. Copy and Paste the following code Directly Above / Before </head></head>
<script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
services_overlay:'facebook,twitter,print,pinterest,google_plusone_share,more'
}
</script>
Now Adding Class To Images You Want Bookmarking Buttons On:.
Now we need to add a tag to images we want the buttons on.
OK if your uploading your images directly onto Blogger posts we have an easy way to add the class.The code below is how the html for an image looks when uploaded to Blogger.
Important - This is when you upload the image in compose mode.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_IkuEOot1d5vuva1IJQSWMNKPZOK5JR9gdE4C_lbdjgUwARg8-t5IWUY9pD3RbIjgTsTIMLlbxldeOOkOJfj9c_eCGmxnO6iAFc7k46rfl8iUNMeFVxKbXTifNFIG8Z7SUTr7tJgbkZeZ/s1600/asdasdasd.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_IkuEOot1d5vuva1IJQSWMNKPZOK5JR9gdE4C_lbdjgUwARg8-t5IWUY9pD3RbIjgTsTIMLlbxldeOOkOJfj9c_eCGmxnO6iAFc7k46rfl8iUNMeFVxKbXTifNFIG8Z7SUTr7tJgbkZeZ/s1600/asdasdasd.png" /></a></div>
You can Find the highlighted div class="separator" So we change this to div class="addthis_shareable" like below :
<div class="addthis_shareable" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_IkuEOot1d5vuva1IJQSWMNKPZOK5JR9gdE4C_lbdjgUwARg8-t5IWUY9pD3RbIjgTsTIMLlbxldeOOkOJfj9c_eCGmxnO6iAFc7k46rfl8iUNMeFVxKbXTifNFIG8Z7SUTr7tJgbkZeZ/s1600/asdasdasd.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_IkuEOot1d5vuva1IJQSWMNKPZOK5JR9gdE4C_lbdjgUwARg8-t5IWUY9pD3RbIjgTsTIMLlbxldeOOkOJfj9c_eCGmxnO6iAFc7k46rfl8iUNMeFVxKbXTifNFIG8Z7SUTr7tJgbkZeZ/s1600/asdasdasd.png" /></a></div>
That's it Now the bookmark buttons will be on images you add this code to.
If you are adding images in html mode or adding externally hosted images "Via Url" your image code will be like this :
If you are adding images in html mode or adding externally hosted images "Via Url" your image code will be like this :
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_IkuEOot1d5vuva1IJQSWMNKPZOK5JR9gdE4C_lbdjgUwARg8-t5IWUY9pD3RbIjgTsTIMLlbxldeOOkOJfj9c_eCGmxnO6iAFc7k46rfl8iUNMeFVxKbXTifNFIG8Z7SUTr7tJgbkZeZ/s1600/asdasdasd.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_IkuEOot1d5vuva1IJQSWMNKPZOK5JR9gdE4C_lbdjgUwARg8-t5IWUY9pD3RbIjgTsTIMLlbxldeOOkOJfj9c_eCGmxnO6iAFc7k46rfl8iUNMeFVxKbXTifNFIG8Z7SUTr7tJgbkZeZ/s1600/asdasdasd.png" /></a>
So now We Will add the class as shown below :
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_IkuEOot1d5vuva1IJQSWMNKPZOK5JR9gdE4C_lbdjgUwARg8-t5IWUY9pD3RbIjgTsTIMLlbxldeOOkOJfj9c_eCGmxnO6iAFc7k46rfl8iUNMeFVxKbXTifNFIG8Z7SUTr7tJgbkZeZ/s1600/asdasdasd.png"><img class="addthis_shareable" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_IkuEOot1d5vuva1IJQSWMNKPZOK5JR9gdE4C_lbdjgUwARg8-t5IWUY9pD3RbIjgTsTIMLlbxldeOOkOJfj9c_eCGmxnO6iAFc7k46rfl8iUNMeFVxKbXTifNFIG8Z7SUTr7tJgbkZeZ/s1600/asdasdasd.png" /></a>
So That's it Now You will Have Bookmarking Icons Ready to Share On Your Images.
Enjoy, Happy Blogging !
0 comments:
Post a Comment