Black Smith Social Bookmarking Widget with CSS3
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-
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/AVvXsEjT0yYM0N3z5UoI0XOOnmB-FBKPkqvOKNg8I0gPfN9uQLo8xRUFlB6bvBhDEhhK_H1elG52afaowscOZ5YaeXB8iB-SQLkvxe-abBzHi8Fw5q9uc4OHCFCtjMFynhb9W-hSQAN3QoOKrH1z/s320/BS+Black+facebook.png);
}
ul.bssocial li.bstwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MdUA3VDbLHViPaqlzgIbzmTaEpzHghemnl0nhdbLqLSgC4Gk3VBxk4u9Up21x47vbLhN9PYISSjwz3R6j-eaHH_EY9r-x4fgrEyVTZ95YZLGAg7bpc3GB0T0Fn_m1Rk44sJ4xex8V0O7/s320/BS+Black+twitter.png);
}
ul.bssocial li.bsredit {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5ywZycah29GzowR5qemmyuQULZExzMPnmyOTBEdAu9I3bU22kzqrVjORHs-DiaOBRY-j-67l6dHfIki4CGiTA_ahj8ROOF-SGLUKCbXrJimX2V-II63bUupIsP8w0eujmmSPUpgLmPBAO/s320/BS+Black+reditt.png);
}
ul li.bstechnorati {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgczhFUekncc63XPoSkzhtyMMyKIsC65t6uscBUXWoKPdUsQ4opPGM801IgYXCZTiwIAg4I18yFpzV3BIvGBl0Ex6CIt5XkntRgpvZpaDuf_HlnWg36JDAGFwhNusSlq8FClN60cgEQU9sX/s320/BS+Black+technorati.png);
}
ul.bssocial li.bsstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX-3ibpgpu7BZpD4QQ3PVF1jqTjWR280lwY_dkYxe0UfNJRKDjoWhu4vZsQVOvdXya4Te36oguKTC2aVyP5quz22BA8WM9vaU2PSlJeg0G4E_DrVhxy9IHneC4N3tDqhxxpU3MdiSlIE_z/s320/BS+Black+stumbleupon.png);
}
ul.bssocial li.bsdig {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC8FrskOd6SO3Ea3TAqPvNeLePrGddxbm9FIr88INpBASvksd4zwYid7O_pvSfoiT_h1u0K3KQdnUlXcow1BjzWISbc1PnMBDMhpnkKUHSvk0iSpxBntBEqYXPcY35VJ-YMRRDvMhDUj0Z/s320/BS+Black+digg.png);
}
ul.bssocial li.bslinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiByzuW-3nUeIaQ8mZZSggezTDZ5Gn_fc1y3oHPJl947tRxE98-x0q02uMSxK2qRuZ8nkLj4WX-8WXcXdrMHoGt8Wg3QvD5HM2M1F-jIVWd_fy3erqKdvLkn-CWku3UThBHIPcLbZZmBUbV/s320/BS+Black+linkedin.png);
}
ul.bssocial li.bsdelicious {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh04xuu3MGLh5E_ZKJ6VQydXr1RthA_E3FJdvkbddibN7yzdESL0xnreRCw26qF2C7f-AuvkOkyn58HpbcWZAPfTWldS_5whitY94FVsxsFBU17DmJ_MgKFBl7mXeK1veEVyQX_LRKUMYni/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 == "item"'>
<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='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a>
</li>
<li class='bstwitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='bsredit'>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>
</li>
<li class='bstechnorati'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>
</li>
<li class='bsstumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='bsdig'>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='bslinkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
<li class='bsdelicious'>
<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + 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.
2 comments