Black Smith Social Bookmarking Widget with CSS3

Black Smith Social Bookmarking Widget with CSS3

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. 
Black Smith Social Bookmarking Widget with CSS3
4 Stars stars - "Black Smith Social Bookmarking Widget with CSS3 " Social Bookmarking widget for sharing your widget to various social sharing widget.  This soci...

Post a Comment

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 Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *