Sleek Social Media Sharing buttons with Css3 Tool tips

I'm not going to eat your head by giving brief introduction to this widget and I will judge the rating of this widget in a single word saying 'Mind Blowing'. The live demo of this widget is already available at the bottom of my blog posts and kindly take a minute to share my blog posts with your social friends if you found any of my blog posts real helpful.

.................................................................................................................................................

Sleek Social Media sharing widget with Css3 Tool tip effect on hover

.................................................................................................................................................

1. Go to Blogger dashboard --> Template --> Edit Html (Tick Expand widget template option).

2. Find for ]]></b:skin> tag and place the following peace of code just above it.

/* Social Media Sharer widget by http://Bloggertricks.biz */
ul.BTbiz-social {
list-style:none;
display:inline-block;
margin:10px auto;
padding:2px;
}
ul. BTbiz -social li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul. BTbiz -social li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul. BTbiz -social 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. BTbiz -social li.TBI-facebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjApYo8GeMPoXqSV5F9dSrgdrQpzXcNfgEaxF3JKlt_iMBm8V6pyMiQLgFUKEr7andEtQ3-ra3M_ap9J3sAqWg99Q96ieV3ZUHe5BaBQZbly-q1rzcUb4VJvLCr53dhR6bq8ZoL6cofDKc/s50/facebook.png);
}
ul. BTbiz -social li.TBI-twitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKf23cdgz2o31C-2C9lB1Nnh-CmqQ48Rny5PGkdtDWd-J3actU8lRcyuUW8VuD7wCmFwryPk4sZJnoOUCGQEH6a9r7aBfRCsDcHET83ax-GaBE0-HdC2B6ryGmJJ13v_jriCh0tQRbMVA/s50/twitter.png);
}
ul. BTbiz -social li.TBI-googleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5xL1iI-MANcwAheT2cN7eOAMpzKjvmxaNt3HHzTykjsUQKSuANfQNrEWJ9J1Qlb1eE276poEPxqzas8-134b9WuwR3ncft0TNElotqidtBfu4_boH-YwSZ-cRVIs0eNZBZxpKF9w1CnI/s50/google%252B.png);
}
ul li. BTbiz -pinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8WOwnzYPPN6sTUpQBUkADrUtzWDQE5NDiRCzA8u1mhkmOd1mZnCMY85HPCPdOyCkEouavi55frpIhH9Up_JqqPGAXPAd8SkkED6BosUjzs7okH3BTEohLak2mcAbaDT9ZDCYJ6rwxyGU/s50/pinterest.png);
}
ul. BTbiz -social li.TBI-stumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNetqFqnZpWRTSuA3K3hPFveyk4eH7_XI3ClimnsuQReZc8sO9uGG6ixN1EdAfJEn5ZR4vdunbpK0ZYHZeoUwu5efbj73KKj66yU6BIwbLi3Rlja1_9vtwHa3wZnXcSe7ycnyojl2mWmo/s50/stumbleupon.png);
}
ul. BTbiz -social li.TBI-delicious {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz1A3tNYSaBXKY_BC7WwASRDZ2YB9ME7KEipJQAX0ryGeAfdSyXs8Wr7lktQL3IGCJvG6MF3Ba8h9K_oARX2NLhNBCGv08xxgSPrI772yI_RYBb_9Akksn3du8OuIjiB_qzdNTz6pr39c/s50/delicious.png);
}
ul. BTbiz -social li.TBI-linkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh1EmKiEZkAK7EurzLXD4FR49j59xP2j2Uxw0_XF1LHoigdFOdUhWSmlRd0Eirq3HaeDWvLHjqNPdhEIQtvXfXQawLgtkz7uHqWoFw_R884SrGmViRgs_4gsqh6Xk4pRIjvTCfSRLJd8w/s50/linkedin.png);
}
ul. BTbiz -social li.TBI-reddit {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXFXigIlbW6I8zPimnuuBwB1rMFAnDNBT06sV9tsk53U2UAvupSVkc65WgdbocaOSFChvksTmnNCRPlCwS9YpQ5sGm1lY-U-UqsrsPgxyEY3uTJ8QTy88vBZJ6Giv0-FrhyphenhyphenfH92wZlkrw/s50/reddit.png);
}
ul. BTbiz -social li.TBI-technorati {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsyU73J8r1s0z7pXQrgRvddrUk-PSzqhahln4Dd9ep7iXj_yw_zNNJGFnqTADOuMwltxgMvgd1tChvTXOXYtvd22ckYOlOIXWskNXC_EI05pgjkEx6mdquPtq8D9ILBRWYYKa0_ablNIM/s1600/technorati.png);
}
# BTbiz -cssanimation:hover li {
opacity:0.2;
}
# BTbiz -cssanimation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
padding:2px;
}
# BTbiz -cssanimation li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
# BTbiz -cssanimation li:hover {
opacity:1;
}
# BTbiz -cssanimation li:hover a strong {
opacity:1;
top:-10px;
}
/* Social Media sharer widget by http://Bloggertricks.biz */

.................................................................................................................................................

Sleek Social media sharer widget code

.................................................................................................................................................

3. Now find for <data:post.body/> and place the following peace of code just below it.

<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;'>You Like It!? Then kindly share with your Friends.</div>
 <ul class='BTBIZ-social' id='BTBIZ-cssanimation'>
 <li class='BTBIZ-facebook'>
 <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'>Facebook</a>
 </li>
 <li class='BTBIZ-twitter'>
 <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'>Twitter</a>
 </li>
 <li class='BTBIZ-googleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'>Google+</a>
 </li>
 <li class='BTBIZ-pinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute ('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'>Pinterest</a>
 </li>
 <li class='BTBIZ-stumbleupon'>
 <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'>StumbleUpon</a>
 </li>
 <li class='BTBIZ-delicious'>
 <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'>Delicious</a>
 </li>
 <li class='BTBIZ-linkedin'>
 <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'>LinkedIn</a>
 </li>
<li class='BTBIZ-reddit'>
 <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow'>Reddit</a>
 </li>
 <li class='BTBIZ-technorati'>
 <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' target='_blank'>Technorati</a>
 </li>
 </ul>
 </b:if>

Note:-

If you find more than 1 appearance of <data:post.body/> tag, add the above peace of code just below the first appearance of it.

4. Save the Template.

Blogger Hacker

Sleek Social Media Sharing buttons with Css3 Tool tips

Related product you might see:

Post a Comment

Category Products

Popular post