Social Bookmarking Widget For Blogger Using CSS3

There are many social bookmarking widget for blogger. Social bookmarking is used for share a blog post into many social networks with a single click. This widget is very attractive and have awesome design. This code is made of with CSS3 coding so it is fast loading and have most popular platform. It is perfect for all blogger templates. Hope you like and will install it into blog.

Live Demo

Also Read : Add a Mirror Flap Social Bookmarking Widget

Login to your blogger dashboard.
Template >> Edit HTML
Find ]]></b:skin> in your template by pressing Ctrl+F
Paste the below code just after/above ]]></b:skin>

<style>
ul.tbtsocial {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.tbtsocial li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.tbtsocial li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.tbtsocial 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.tbtsocial li.tbtfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzklEEPI0uz2pbOqtPXvucLWW8gWg136msdBtsF8o8v-uWneeWbPctNYpPPI0gWxV60-CcgbGAWqr-oFJi80fRCpeJc8PsmbpEnSUlfOSVsy1zY85Eqg0tVc8aSb8M9Ry8dNLN3D8C_Hez/s1600/TBT+Black+facebook.png);
}
ul.tbtsocial li.tbttwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz2_-ldsNu_HJloNCOXtXIgKIfa10BuRXx471KoqAxrvCX0OvIxAhoEaSLaRa1bT7SrD_KIz0HMlOrXRdtkmMIHjCIlxh-poLTO-i1Dsna1MEd7sVx_HQ21GZoaaUKqzxiyLj4k76SCwTC/s1600/TBT+Black+twitter.png);
}
ul.tbtsocial li.tbtredit {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwETLY2bNn0ruLlSCvt-oJcAeU7NWGCBZHepL-BFindS0YogFHWCHwGmzCDbE-Vk2u5TzapZuF8xhop7NRgOfYXxBkxK8y8eYWZeMaurWcNxGaC67X1QJS-vcTqJ9Fqh7Zl5tsgLeIWnDN/s1600/TBT+Black+reditt.png);
}
ul li.tbttechnorati {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI8TCedFYGQJt21FHmVTDzdPgb_eCzRWVqqdMycuWIfhlkNLWnK63XU3ypT8xfrMnZLbv2_oy-ogc3CDx16UtFcLJR1h2aU64iaiVk6RktLi2VU32bJ6deye9X5_nAgAKso9Ey25sgTvmC/s1600/TBT+Black+technorati.png);
}
ul.tbtsocial li.tbtstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpMl1T_jrkuOR6K0pHP_2egPJcRHbjG7zhsme1HdwV7fhFtwJhNjKJPqp878bepPdFLx4yF5_9evJDQIB2xgoq7rR6-7vVDECtEkxraFxN6uX5y6v56ByK1HHTr2t1HdUwMnOMHCw_tfRs/s1600/TBT+Black+stumbleupon.png);
}
ul.tbtsocial li.tbtdig {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8CTdvmFQfn8vhyphenhyphenTUYcQVh8RVb2lli4ZD8cvwTct39GgXMSBRY1p2sMPWB66rTYkih8_MT3yp6iKQpZtbGzQZfUmNX0sWegwGZC-IAfZ2MT74mWW7l95xmQrKpd8dioAtCcdoK-7Dyci69/s1600/TBT+Black+digg.png);
}
ul.tbtsocial li.tbtlinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUh8CPoPib9K3AKigJGCDZNYush8N4tHhrFXqSgRyKHX5uUipDDedwrv-dAQbtT1Bv-nT56KY4U3sBsdQ8JW5pYqC19SNmDJU8_wh_MLosgtt-jTBZsKBsH1S5Wqgd_aqAymLw7R9kMXsM/s1600/TBT+Black+linkedin.png);
}
ul.tbtsocial li.tbtdelicious {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih7ywepFsUbN8Uiz5K6ROCi8_2SRLk3v8QCPKokJ1hNET3hZFnwQSFIKXMacstc-4QkZLk6oULpn1kUkUcgAQ8sfaJ17qWoMDg5Wwm6RYm7BoDk40L8qZC4m8OEqea0-w7cOfEWTjdAW4D/s1600/TBT+Black+delicious.png);
}
#tbtcssanimation:hover li {
opacity:0.2;
}
#tbtcssanimation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#tbtcssanimation li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#tbtcssanimation li:hover {
opacity:1;
}
#tbtcssanimation li:hover a strong {
opacity:1;
top:-10px;
}
</style>

Again find <data:post.body/> in template by pressing Ctrl+F
Paste the below code just 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='tbtsocial' id='tbtcssanimation'>
<li class='tbtfacebook'>
<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='tbttwitter'>
<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='tbtredit'>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>
</li>
<li class='tbttechnorati'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>
</li>
<li class='tbtstumbleupon'>
<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='tbtdig'>
<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='tbtlinkedin'>
<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='tbtdelicious'>
<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>

Now hit save button and you done it.

If you face any problem about this post please leave a comment below.

Blogger Tips And Tricks

Social Bookmarking Widget For Blogger Using CSS3

Tidak ada komentar:

Adsense

Popular Post