Black Smith Social Bookmarking Widget with CSS3

Black Smith Social Bookmarking Widget with CSS3

Comments: 3
data:blog.title
social sharing widget

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(http://1.bp.blogspot.com/-dhbW9mA7gus/UasUFsoBj1I/AAAAAAAADR0/hH7NhxaQjRo/s320/BS+Black+facebook.png);
}
ul.bssocial li.bstwitter {
background-image:url(http://1.bp.blogspot.com/-foRgVi7BSCQ/UasUHix6JGI/AAAAAAAADSo/VmDegJmp3bA/s320/BS+Black+twitter.png);
}
ul.bssocial li.bsredit {
background-image:url(http://2.bp.blogspot.com/-A6Xj5bvz_gI/UasUGwCeDlI/AAAAAAAADSQ/ibp1LI1dn4I/s320/BS+Black+reditt.png);
}
ul li.bstechnorati {
background-image: url(http://4.bp.blogspot.com/-AeYKZI7csr8/UasUHbz-keI/AAAAAAAADSg/W6et0yKHRUE/s320/BS+Black+technorati.png);
}
ul.bssocial li.bsstumbleupon {
background-image:url(http://3.bp.blogspot.com/-I_XDslhij-I/UasUGzlxWQI/AAAAAAAADSU/F-Bkfp4YvwE/s320/BS+Black+stumbleupon.png);
}
ul.bssocial li.bsdig {
background-image:url(http://1.bp.blogspot.com/-YvPAJlhGlb0/UasUF5SJY6I/AAAAAAAADR8/U862d2T-LLo/s320/BS+Black+digg.png);
}
ul.bssocial li.bslinkedin {
background-image:url(http://3.bp.blogspot.com/-3UFBbRGm9NQ/UasUGrVMjRI/AAAAAAAADSI/2wDnt6Er-vM/s320/BS+Black+linkedin.png);
}
ul.bssocial li.bsdelicious {
background-image:url(http://4.bp.blogspot.com/-NMNlldMGFjg/UasUFof6r_I/AAAAAAAADR4/Dr8o2ML1kcU/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. 

Speak Your Mind

great widget bro i like it..

www.mybloggingclub.blogspot.com

Cheating Bro..You Just Customize My Sharing Buttons !!

There are huge blogger who are copying my widget over the net. And you are telling me that I am cheating? You just started blogging recently And I am blogging since 2010. So If you think I have cheated with your then tell me who is the original author (artist) of this social media icons and who is the legal distributor of this? If can say then I will believe u. 8-)

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *