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.
Go to Blogger dashboard –> Template –> Edit Html (Tick Expand widget template option).
Find for ]]></b:skin> tag and place the following peace of code just above it.
/* www.sayyadgraphic1.blogspot.com */
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/AVvXsEhCTklnbtYRia_f5RP0ZmjnqusLc8PSjyMPjAuWH09A8e0yb1f5UGbjE4OQp_Whz07ZFPG54IAyhUYgHk1se_M62VO4KJ-d2ABPPtW4eTg5UByeWa7x81wzKcTQbgrd1W_aaw6xRg2c8VE/s50/facebook.png);}ul. BTbiz -social li.TBI-twitter {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjZErPFIbldjsW8DDuomfO8HUKz98nnE-_ozuW8vZwl7YTK2nc1Y1soQf8Z8ZXftqbwBTUiYyar6qNqeAyoZDPTP94B-uPUpaNzlzoM8ocT3IbMQI_diPRRtAAtq4MkbZ60c3nSqL4K2U/s50/twitter.png);}ul. BTbiz -social li.TBI-googleplus {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb8g5qWeZY-XJerljjfZOt74heRMv8IG0bfrkfEPJbaSJHjWRWeccyGiUeeXYsSIfbEUrXOgvyfrVRQvg20wAhGtm2oT7lUERP5Ypt7f4DUlogxjSdg5Xb0g3Q4DCJOuGxZVK5uF2ZboE/s50/google%252B.png);}ul li. BTbiz -pinterest {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCwQppR9glcVvu-w_8zrJ8E4INp6Cq4aENYWp9U1tCtGDEKwDLC87TMA55SOJLLe4ZORE3jVEkhoRKey2ASsKYBomr9zDLuuzCJkbvj7QlvjDv1p2TtXIWkkuewpsXk7lZNDxc0uj60Qo/s50/pinterest.png);}ul. BTbiz -social li.TBI-stumbleupon {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgph3iBKto9LXMF3mNGANRKTmAekBlUXyQT8w5OHvF1H1HL1jKe687FVttfwb8_ivfxpRzZ8yVrwWRwAUBeH5LnOFbMBeqobTyCSjF7-L2sl_fcXOnWRHytUP92t4ok_N_8Ss6Pm4AbUV8/s50/stumbleupon.png);}ul. BTbiz -social li.TBI-delicious {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHHu6hWjgNC35BH8W-DH1GioPGrURXw2vzuRqQUnr3fjs_hH4QuqBpp6l8G85d6MB3Q9-tWidldKgjIqL3SrM45tn2VAvXnRrRyyB7Oyi9BruVd4Ak2sYJ29dhnMdKwqhxcVUweC5m-vg/s50/delicious.png);}ul. BTbiz -social li.TBI-linkedin {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy7Bf9tmpE655n049GsMWVjG_L-XxJE7COgWmDWHecx9WfUh7QCl3ry32MHGR8BWgcOD6V9vzmKwOmx3yX102buz5x7H0y5W7-7J47gn9du8kLr3cvk1vF-EGTlN0WR_nwb9Yu-PAJ4Es/s50/linkedin.png);}ul. BTbiz -social li.TBI-reddit {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxqomVylXtl8lcc9wxRCwHkUKoC0yv3XbpMXVdaEV1AGUumZRclKI-yn48dWg1-pJc5Zt96thujTAHalGS_Kgp-CngKWhgYH50Fyk4pOmRFwLCaTtLmF7UcTtk-Y8lwN7j0RQ_yX4dQfs/s50/reddit.png);}ul. BTbiz -social li.TBI-technorati {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDVKVedTuwQ6wpaVsxY3SkEZZ9R2t-CAtqFpCFJe4e1yPHDDqdO2xgOrg_U7Dv3udZ9CGzE2Q6lTzr8fK7mMdbTeoZsqmZVFp5ROFysUmEqG3T66pSk1AHeT1S1D8kwhF5MReaVPiphSQ/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;}
Sleek Social media sharer widget code
Now find for <data:post.body/> and place the following peace of code just below it.
/*www.sayyadgraphic1.blogspot.com*/<b:if cond=’data:blog.pageType == "item"’><div style=’font-size: 22px;’><b>You Like It!? Then kindly share with your Friends.</b></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’><strong>Facebook</strong></a> </li> <li class=’BTBIZ-twitter’> <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=’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’><strong>Google+</strong></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’><strong>Pinterest</strong></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’><strong>StumbleUpon</strong></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’><strong>Delicious</strong></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’><strong>LinkedIn</strong></a> </li><li class=’BTBIZ-reddit’> <a expr:href=’"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ‘ rel=’nofollow’><strong>Reddit</strong></a> </li> <li class=’BTBIZ-technorati’> <a expr:href=’"http://technorati.com/faves?add=" + data:post.url ‘ rel=’nofollow’ target=’_blank’><strong>Technorati</strong></a> </li> </ul> </b:if>
4. Save the Template.
As this is a social media sharer widget, there is no part of adding your social media profile links here. I reminded this because few bloggers previously asked Me about adding their social media profile links in a sharer widget. This widget buttons shares the blog post which the user is sharing from.
