Monday, December 16, 2013

Share Bar - A New Stylish Css3 Share Bar for blogger

Hey Friends,
After My Previous Post ,
I'm back here with a basic, yet effective widget for all bloggers here.
In This post i'll make your blog more ready for Social Media Sites. This is all about adding a awesome sharebar with most actively used buttons in it. So why waiting more, Let's add this fast. All you need to do is to sit on your chair and focus on the tutorial ;)


Share Bar  - A New Stylish Css3 Share Bar for blogger


 Note: You need to keep a full backup of your template before adding changes to it.

Step 1:Visit your Blogger Dashboard and select the blog, Now Go to the edit template section. Now you just need to find ]]></b:skin> and add the following css code just before it.
/****** Styling Initials ******/
.mbtshare { 
border: 1px solid #D3D3D3; 
width: 585px; 
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
-ms-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out; 
transition: all 0.5s ease-in-out; 
} 
/****** Mouse Hover Effect ******/
.mbtshare:hover { 
-moz-box-shadow: 1px 1px 2px #CCC inset; 
-webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1); 
box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1); 
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
-ms-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out; 
transition: all 0.5s ease-in-out; 
} 

Step 2: Now you just need to find <div class='post-header-line-1'> and add the following HTML code just after it.
<b:if cond="data:blog.pageType == &quot;item&quot;">
<div class='mbtshare'>
<span class="st_fblike_hcount" displaytext="Facebook Like"></span>
<span class="st_plusone_hcount" displaytext="Google +1"></span>
<span class="st_pinterest_hcount" displaytext="Pinterest"></span>
<span class="st_twitter_hcount" displaytext="Tweet"></span>
<span class="st_stumbleupon_hcount" displaytext="StumbleUpon"></span>
<span class="st_digg_hcount" displaytext="Digg"></span>
<div>
</b:if>

Great Then, You Are Now Done, Just The Last step. So Here we Go.

Step 3: This is the last step, So in this you need to add Sharethis script in your blog, To Do this, just simply find </head> and add the following snippet before it.
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>

Now You are Done, If you have enjoyed this post please take a few minutes to share this post ! And Comments are appreciated !

Share Bar - A New Stylish Css3 Share Bar for blogger Rating: 4.5 Diposkan Oleh: mohamed lamdoune