Best Social Sharing Tool Box With Share Post Count Below Every Blog Post

In this tutorial i will show you how to Add Cool Shareaholic Sharing Icon below every article in blogger and which also tell how many time post is share on Social Media or Social Sites.

Best Social Sharing Tool Box With Share Post Count Below Every Blog Post

Now i am going to tell how to Add this on your blog posts. If you have already adding Social Sharing Widget/Gadget on blogger then remove it and replace with this widget because it is very simple show able and also occupies less space comparatively to other sharing widgets. It is a tool tips with Hover Effect means when some one place mouse on these icons its rises and also shows the sharing number of posts on social websites.

WordPress Best | Easy Plugins Installation List For SEO And Make Professional Wesbite After Blogger
Add | Changes Labels Or Tags With CSS Button Beautiful Color With Hover Effect
Add 6 Best | Beautiful | Cool Looking Social Bookmarking Sharing Buttons Widget | Gadget On Blogger Blogspot

How To Add Shareaholic Sharing Icon on Blogger:

Follow my below tutorial and do same as my posts tell.

Go to Blogger.com.

Go to Template.

Click On Edit HTML.

Press Ctrl+F in HTML Body Box.

When search box is appear in right to corner then paste below code/tag in it and press enter.

]]></b:skin>

When you find this above code then copy below coding and paste it just above/before ]]></b:skin> tag.

div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}

Shareaholic

Shareaholic

Now find another code in your template for adding Social Icons on below post or Footer of your blogger blogspot.

<div class='post-footer'>

When you find this code line then copy below given code and paste below this above code.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='shr_class shareaholic-show-on-load'> </div> <script type='text/javascript'> var SHRSB_Settings = {&quot;shr_class&quot;:{&quot;src&quot;:&quot;http://www.shareaholic.com/media/css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39&quot;,&quot;apikey&quot;:&quot;6ffe2cbf142c45bd4cd03b01ec46b8658&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;google&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;twitter_template&quot;:&quot;Some fancy post title - http://goo.gl/dbqlx via @trickofblogging&quot;}}; </script> <script type='text/javascript'> (function() { var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true; sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;; var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s); })(); </script><a href='http://trickofblogging.blogspot.com/' target='_blank'>Social Bookmarking Gadget</a></b:if>

Replace Red Highlighted Color my twitter page with your Twitter page by replacing name.
Now Save your template.
Click on view blog.
And you have done.

If you feel any problem about this widget or other gadgets for adding in your blog then submit your comment and get a beautiful and helpful answer.

Related Articles:

How To Add | Put | Insert | Copyright Warning Message In Blogger Post To Prevent Content

Add | Put HTML Color Code Generator Tool To Your Blogger With Easy Tricks

Add Manually CSS Jqeury Drop Down Menu By Replace/Remove Pages On Blogger

Add | Put | Embed Three Or Four Column Footer Widget/Gadget In Blogger Blogspot

Add Facebook Like Box Widget/Gadget On Blogger By Facebook Developer Plugin

Add | Make About Us Page Widget | Gadget On Your Blog Footer Or Sidebar

Create | Make | Add | Set 404 Error Page In Blogger Blogspot Easily

Add | Put Best Style Subscribe Box Widget/Gadget For Blogger Sidebar

How Remove Photos/Images Border In Simple Or Awesome Inc Templates Blogger

This tutorial is how remove, change, delete border or outline around images or photos in blog post with Simple and Awesome Templates in blogger.com. Best trick to manage blog images border line easily to make changes in Templates. If you are using old interface blog template or custom template then i have already write a post about it if you want to do this then check the link in this you can manage older interface blogger template easily with adding code in blogger HTML coding.



How I Remove Or Change Blogger Post Image Border In Blogspot .


I have two main points or steps to removing or changing images borders in the blog post in Simple Templates. First method is how to remove the image border using Template Designer and next is how to remove the photo, pictures, images border line manually by changing the HTML code in the blogger templates.

Trick No#1 Remove Picture/Photos/Images Border line using Template Designer:

How Remove Photos/Images Border In Simple Or Awesome Inc Templates Blogger 1

Go to Blogger.com.
Go Template.
Click On the Customize Orange Highlighted Button.
Go to Advanced and click to Advanced link.
Go to Images and click here.

How Remove Photos/Images Border In Simple Or Awesome Inc Templates Blogger 2

Now you can see three color box.

• Background Color.
• Border Color.
• Caption Text Color.

Where you can see the white arrow head click here to transparent the background of blog template.

When you click here you can see white box write with Transparent Tick it.

Now go to Border Color and also transparent it by checking the box.

Now next box is Caption Text Color if you give the pictures caption for better SEO for this you can manage the color of the caption text but it is normally black.
Click Apply to Blog to save your template changes.
Click to view blog and check out any post your blog post image border is disappear.

How Easliy/Simple To Manage Page Layout In Blogger Blogspot
How Easily Delete/Remove/Get Rid Blogger Blog Tricks In Blogspot
Simple | Easy Tutorial For Transfer Blogspot To Website 

Trick No#2 Changes Or Remove Images Border Outline By Changing HTML Code Manually:

 

In this trick you can just replace one code to make these changes and your all blog post pictures or images border is disappear and which you post in future then this also work in these post.

Go to Blogger.com.
Go to Template.
Click To Edit HTML. if you have not aware new interface of Blogger HTML then click this link and read about more for make easily changes in your template also. How I Can Handle New Interface Of Blogger HTML Editor
First Get Back up your Blogger Template.
Find the code which is given below to find this code easily press Ctrl+F in between coding box.
Paste below code in it and press enter and your code is highlighted.

 <Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="#cccccc"/>

When you find the above code then replace it with below code perfectly to make better changes otherwise your template give Error after wrong pasting code.

<Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="transparent"/>

I will transparent the border of your blog post images. Now save your changes of blog template and view your blog post to see images border no longer. I have some beautiful and helpful article for make blog better in Search Engine. Lot of tricks about making money, getting backlinks, different types of widgets, Facebook Button, Facebook Page, Twitter Updates Widget, Blogger SEO Tutorial and many many more.

Related Articles:

Hot And Latest Seo Tips For Blogger 
How To Make Website Like My Blogger Tricks To Get Best Alexa Rank
How To Added Meta Tag In Your Blogger For Better Optimization
Now Ready To Increase Google Page Ranking And Alexa Ranking
Other Tips To Make Money
Easy | Best | Simple Tricks To Make Money From Youtube | Chitika
How I Can Get Approval From Google Adsense My Blog Or Website
How I Can Use Webmaster Tools Properly For Blogger

How I Remove Or Change Blogger Post Image Border In Blogspot

Blogger post image border is big problem remove/delete this images border line or box easily with simple tricks. Some times you see border line with post image in blogger its not good looking this tutorial show you how you can easily change it or remove. If you have good looking blog and you get daily hundred of visitors on your blog then you should make it perfect for looking beautiful. Below paragraph easy tutorial is given on this problems to solve it.

If your are using latest template Like Simple and Awesome Inc Black then read below link tutorial.

How Remove Photos/Images Border In Simple Or Awesome Inc Templates Blogger

When we start blogging then some times we want to remove, delete or changes then image border of a custom blogger template. I will show you how it is easy to make changes to your templates so that you can get rid of useless image borders around all the images which is appear on your all blog posts or images.

Remember this tutorial is for those blogger which are custom templates and the previous blogger templates. But if you are using now new Blogger Templates with New Interface then my above post is about those templates which is new interface. You can easily manage and done this tutorial in 3 minutes.

How You Can Remove/Delete and Get Rid of Image Borders in Blogger Posts:

Now start tutorial with most and very helpful tricks and simple steps.

Go to Blogger.com.
Go to Templates.
Go to Edit HTML.
First Download your template in your computer. By click download template.
Find the following code which i given below in your blogger templates.
Remember that Blogger templates queries varies but this code is only that which you will find on a Blogger Minima Template and most other default Blogger templates.

 .post img {

padding:4px;

border:1px solid $bordercolor;

}

If you can't find this above code in your blogger templates then you should find the below code.

 img{

padding: 4px;

border:1px solid $bordercolor;

}

There are two ways to get rid of the unwanted border image code. You can either:

Remove the following line:

 border:1px solid $bordercolor;

                                                     or
Change it the following:

border:0px;

Click on the Save Template Button. 
Now you have done your work. 

If you want to change the border line of your blog post image then i have post a tutorial about this on next day how to change.

Related Articles:

Now You can Replace Old Style Templates in Blogger in new one

How I Can Remov Or Fix Broken URL For Google Adsense Crawler

How to Remove 404 Errors in Blogger Blogspot

Now Next Step To Add Webmaster Tools And Google Analytics to a Blogger Blog

Social Bookmarking Button Add To Blogger 

Live Traffic Counter Put In Your Blogger Blogspot