Black Smith Social Bookmarking Widget with CSS3

Social Bookmarking widget for sharing your widget to various social sharing widget.  This social bookmarking widget is very attractive and sleek design. I have added the code with total CSS3 coding so it is fast loading and added most popular sharing platform. I have named it Black Smith because the social icon's release name was black smith. Black icon always perfect for most blogger templates. Hope you would like it and install it into your blog.  Adding this widget is very easy, just follow the below easy steps-

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin>  by pressing  Ctrl + F

Step 4 Paste the below code  Before/above ]]></b:skin> 

<style>
/* Black Smith Social Sharing Widget by www.bloggerspice.com */
ul.bssocial {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.bssocial li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.bssocial li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.bssocial li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.bssocial li.bsfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2OtfuE1GQvsFwcloqaO7kqgv7fwXvddu4BnK3d9O0vscFFajEMV9-_qVDaxb992WLGwPrzC0ic-nuvZQ3O_3WEMSSxaH_VKdGn5i__nTXUYZgPK0KtLRrvkm1bdqS1kuffT-3SySxW9m0/s320/BS+Black+facebook.png);
}
ul.bssocial li.bstwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiao_OV_51EqWi331-z5e45q2L4CE1K_xJTZ4Pq6_s2NjXOdrKMTXfXZZdUjFPbNJHChX_RypSAkTeVtwkzKZbUXqL1o2zDH7c_bwqLbNawDJHZ2UDQoqTcrdQx9yG-Ak5WfG2Hznt6PZ9t/s320/BS+Black+twitter.png);
}
ul.bssocial li.bsredit {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigvnJbXrUSRYcDN7H62F2Esp6EhOAQAjYlQPKqkLoxaOCYXHY-odQnSFDiBO_RNyGhdVRGWrBZ6ZKzbF0WXXfz_neNTogPz7dTguvurE2CS4RFiOrTIaTkoQ3l4HiLpeR0rcRhlUOX1JBU/s320/BS+Black+reditt.png);
}
ul li.bstechnorati {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ut2Fz6daPyLXDDfOCW5JJ3wx5AqmPnLhGBUg_89fXce7R9q0RgvZwZFDzFA_-DaVY4A4gH5aiGeRS0zMV8EtW6RPJige0U-eFKAaGnUm6c4UqP3mloBEWAKwwkwObgik7h4MpcjSLEVl/s320/BS+Black+technorati.png);
}
ul.bssocial li.bsstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZiL7SFOWveiDLX-zqtctd0n29Dds4uz99pjAGhYlt7cDLPPo0ccHd7Mi_vZWWWegpqrXuM-DQ7fEC6-Ex9TL8Fn2ow__OsPPP55Y8njKiocLagSBoieTVnkFCsSp0wLK8cwsGYdvtUh2I/s320/BS+Black+stumbleupon.png);
}
ul.bssocial li.bsdig {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguPAMuftw3okaqpsTxFoPghNjHCiVIc5_4exsoHVVYdqWmteHHtpoINqJW4Btx2gV9hJWLiiPUbfqq-7YrcrUXT4tBdzZi8TBJhwBZZ7QaQH4nNIMJQQepIMWkvnOElkNq1jm-Bn1HBu1Z/s320/BS+Black+digg.png);
}
ul.bssocial li.bslinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-hTqL5MPfEoHyIUDbehmTdXDvsGJTlHSxUaX47ROYGobXf3Wd4BLrSKeZ7yCs-UJKVwEG67UOASsWf4A3d8juJ4QUiHaxnTXniyDVhMnkXdX5kqXxUVpGOt7LinUgGwn9S7Hn8-eHOqSO/s320/BS+Black+linkedin.png);
}
ul.bssocial li.bsdelicious {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNjlBPZHJRd77moU0sKeJmvPrtfaquzyXIiv3W-gqvxIEdcxp5RiRJEhkq2y7b6FXdAtI8fOl4FbJqtAxTvqLXmioUuwawKIoxIrZMTVxAMSWpktqE0nljUiFbhDjL-JTxubquC27DUpwa/s320/BS+Black+delicious.png);
}
#bscssanimation:hover li {
opacity:0.2;
}
#bscssanimation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#bscssanimation li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#bscssanimation li:hover {
opacity:1;
}
#bscssanimation li:hover a strong {
opacity:1;
top:-10px;
}
/* Black Smith Social Sharing Widget by www.bloggerspice.com */
</style>

Step 5 Now again Find this code <data:post.body/>  by pressing  Ctrl + F 

Step 6 Paste the below code  below/after  <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Like the Post? Do share with your Friends.</b></div>
    <ul class='bssocial' id='bscssanimation'>
    <li class='bsfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='bstwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='bsredit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>
    </li>
    <li class='bstechnorati'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>
    </li>
    <li class='bsstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='bsdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='bslinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
<li class='bsdelicious'>
    <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>
    </li>
    </li>
    </ul>
    </b:if>

Step 7 Now hit the save button.

If you face any problem kindly leave a comment below. I will reply as soon as possible.