Mashable like Share Buttons using Socialite and Sharrre

Mashable share buttons

Mashable-like Share Buttons Widget. This widget mimics the design and functionality of the social media buttons of Mashable.com . It uses Sharrre jQuery plugin for getting the counts for various social Networks and Socialite for asynchronously loading the buttons. The Sharrre plugin has been modified a bit to return values inside a data- attribute . Also unlike Mashable , a single hover event triggers all the buttons to be loaded so that the user doesn’t have to hover over each button to make them load.

Download Demo

HTML

<ul class="social" >
        <li>
            <a class="social-stub twitter socialite twitter-share" data-shares="..." data-via="YourHandle" data-text="Google" data-url="http://www.google.com"    data-count="horizontal" rel="nofollow" target="_blank">&nbsp;&nbsp;Tweet</a>
        </li>
        <li>
            <a class="social-stub googlepluss socialite googleplus-one" data-size="medium" data-href="http://www.google.com/" data-url="http://www.google.com/" data-shares="..."  rel="nofollow" target="_blank">+1</a>
        </li>
        <li>
            <a class="social-stub facebook socialite facebook-like" data-shares="..." data-href="http://www.google.com/" data-url="http://www.google.com/" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">Like</a>
        </li>
        <li>
            <a class="social-stub linkedin socialite linkedin-share" data-shares="..."  data-url="http://www.google.com/" data-counter="right" rel="nofollow" target="_blank">&nbsp;&nbsp;Share</a>
        </li>
     
    </ul><br/>

A bit overcrowded with classes but required for both plugins to work. Also the data-url attribute would be required for Google+ and Facebook for them to load the buttons for specific page. Also &nbsp; is used to separate the Text in the button from the background. data-shares attribute is where the value of count is returned.

CSS

.social { display: block; list-style: none; padding: 0;  }
.social > li { display: block; margin: 0; padding: 10px; float: left; }
.social .socialite-loaded { background: none !important; }
.social-stub.googlepluss {
background: white url('http://2.bp.blogspot.com/-AK-r9xVSKkg/UDUSxcYWX3I/AAAAAAAAHRY/BFC9-uzWRsU/s1600/white_googleplus.png') 0 bottom no-repeat;
background: url('http://2.bp.blogspot.com/-AK-r9xVSKkg/UDUSxcYWX3I/AAAAAAAAHRY/BFC9-uzWRsU/s1600/white_googleplus.png') 0 bottom no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fff),color-stop(100%,#f0f0f0));
color: #db583b;
text-shadow: white -1px 1px;
border-color: #e3e3e3;
font-family: arial,sans-serif;
font-weight: bold;
font-size: 13px;
}
.social-stub.linkedin {
color: #666;
text-shadow: white -1px 1px;
background: #fefefe url('http://3.bp.blogspot.com/-lrtvd9XTno8/UDWukOcXjPI/AAAAAAAAHSM/-KQWSFF5ZRI/s1600/linkedinss.png') 0 -1px no-repeat;
background: url('http://3.bp.blogspot.com/-lrtvd9XTno8/UDWukOcXjPI/AAAAAAAAHSM/-KQWSFF5ZRI/s1600/linkedinss.png') 0 -1px no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fefefe),color-stop(100%,#ededec));
border-color: #dbe3ef;
} 
.social-stub.twitter {
color: #3e8399!important;
text-shadow: white -1px 1px;
background: #f6fafd url('http://1.bp.blogspot.com/-8FY8zm2A7DM/UDUSwgIwZFI/AAAAAAAAHRQ/A8WaC4m8BYE/s1600/blue_twitter_bird.png') -2px center no-repeat;
background: url('http://1.bp.blogspot.com/-8FY8zm2A7DM/UDUSwgIwZFI/AAAAAAAAHRQ/A8WaC4m8BYE/s1600/blue_twitter_bird.png') -2px center no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#f6fafd),color-stop(100%,#dbecf2));
border-color: #c8e2eb;
}
.social-stub.facebook {
background: #edf1f7 url('http://2.bp.blogspot.com/-FidAw97vfNE/UDUSwKCMzpI/AAAAAAAAHRM/R7uUq2uogPk/s1600/blue_facebook.png') -4px center no-repeat;
color: #4a68a2;
background: url('http://2.bp.blogspot.com/-FidAw97vfNE/UDUSwKCMzpI/AAAAAAAAHRM/R7uUq2uogPk/s1600/blue_facebook.png') -4px center no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#edf1f7),color-stop(100%,#dbe3ef));
border-color: #cad6e7;
}
ul.social li:nth-child(n+2) > a {margin-left: 47px;}
.social-stub {
width: 61px;
height: 23px;
display: inline-block;
border: 1px solid black;
position: relative;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
text-decoration: none!important;
transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
background-position: left center;
background-repeat: no-repeat;
font-size: 11px;
font-family: Tahoma,Geneva,sans-serif;
line-height: 24px;
text-align: center;
} 
.social-stub::before {
top: -2px;
bottom: auto;
height: 20px;
width: 34px;
left: 100%;
margin-left: 6px;
line-height: 20px;
content: attr(data-shares);
display: inline;
padding:1px 5px;
border: 1px solid #E2E3E4;
position: absolute;
top: -1px;
left: 61px;
height:19px;
width: auto;
white-space: nowrap;
color: #777;
z-index: 10;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
-ms-border-bottom-left-radius: 2px;
-o-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-right-radius: 2px;
-ms-border-bottom-right-radius: 2px;
-o-border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
font-family: arial,sans-serif;
font-size: 12px!important;
text-align: center;
text-indent: 0;
}
.social-stub::after {
content: "";
width: 5px;
height: 9px;
background: url(http://1.bp.blogspot.com/-TJOtb5GjrAk/UDUU0I99zbI/AAAAAAAAHRw/Oyf9lOfPDlM/s1600/bubble-pip.png) left center no-repeat;
position: absolute;
top: 5px;
left: 100%;
margin-left: 2px;
z-index: 15;
}

JavaScript

<script   src="socialite.js" ></script>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script  src="sharrre.js" ></script>
<script>
$(document).ready(function()
 {

  $('.social').one('mouseenter', function()
  {
   Socialite.load($(this)[0]);
  });

 });

$('.twitter').sharrre({
  share: {
    twitter: true
  },
  enableHover: false,
  enableTracking: true,
  buttons: { twitter: {via: '_JulienH'}},
  click: function(api, options){
    api.simulateClick();
    api.openPopup('twitter');
  }
});
$('.facebook').sharrre({
  share: {
    facebook: true
  },
  enableHover: false,
  enableTracking: true,
  click: function(api, options){
    api.simulateClick();
    api.openPopup('facebook');
  }
});
$('.googlepluss').sharrre({
  share: {
    googlePlus: true
  },
  enableHover: false,
  enableTracking: true,
  click: function(api, options){
    api.simulateClick();
    api.openPopup('googlePlus');
  }
});
$('.linkedin').sharrre({
  share: {
    linkedin: true
  },
  enableHover: false,
  enableTracking: true,
  click: function(api, options){
    api.simulateClick();
    api.openPopup('Linkedin');
  }
});

</script>

The initial JavaScript (Line 4 onwards) loads the buttons on a Mouse Hover event. The rest is configuration for Sharrre plugin. Here one thing to note is that currently as there is no Public API for Google+ so it is not possible to get the +1 count using JavaScript alone. For that Sharrre plugin requires that you put the sharrre.php file in the root of your website. In case you have no server , then no way to get +1 count till the API is released.

For Blogger users

Video Tutorial

Step by Step Guide

1. In the Blogger Dashboard , go to Template > Edit HTML and tick the Expand Widget preview

2. Now search for <div class=’post-header-line-1’/> and add the following HTML after it

<ul class="social" >
        <li>
            <a class="social-stub twitter socialite twitter-share" data-shares="..." data-via="YourTwitterHandle" expr:data-text='data:post.title' expr:data-url='data:post.url' data-count="horizontal"  target="_blank" >&amp;nbsp;&amp;nbsp;Tweet</a>
        </li>
        <li>
            <a class="social-stub googlepluss socialite googleplus-one" data-shares="..." data-size="medium" expr:data-href='data:post.url' expr:data-url='data:post.url' target="_blank">+1</a>
        </li>
        <li>
            <a  class="social-stub facebook socialite facebook-like" data-shares="..."  expr:data-href='data:post.url' expr:data-url='data:post.url' data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" target="_blank">Like</a>
        </li>
        <li>
            <a class="social-stub linkedin socialite linkedin-share"  data-shares="..."  expr:data-url='data:post.url' data-counter="right" target="_blank">&amp;nbsp;&amp;nbsp;Share</a>
        </li>
    </ul>

Note: Insert two <br/> after this code

3. Now search for ]]></b:skin> tag and add the following CSS just before it

.social { display: block; list-style: none; padding: 0;  }
.social > li { display: block; margin: 0; padding: 10px; float: left; }
.social .socialite-loaded { background: none !important; }
.social-stub.googlepluss {
background: white url('http://2.bp.blogspot.com/-AK-r9xVSKkg/UDUSxcYWX3I/AAAAAAAAHRY/BFC9-uzWRsU/s1600/white_googleplus.png') 0 bottom no-repeat;
background: url('http://2.bp.blogspot.com/-AK-r9xVSKkg/UDUSxcYWX3I/AAAAAAAAHRY/BFC9-uzWRsU/s1600/white_googleplus.png') 0 bottom no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fff),color-stop(100%,#f0f0f0));
color: #db583b;
text-shadow: white -1px 1px;
border-color: #e3e3e3;
font-family: arial,sans-serif;
font-weight: bold;
font-size: 13px;
}
.social-stub.linkedin {
color: #666;
text-shadow: white -1px 1px;
background: #fefefe url('http://3.bp.blogspot.com/-lrtvd9XTno8/UDWukOcXjPI/AAAAAAAAHSM/-KQWSFF5ZRI/s1600/linkedinss.png') 0 -1px no-repeat;
background: url('http://3.bp.blogspot.com/-lrtvd9XTno8/UDWukOcXjPI/AAAAAAAAHSM/-KQWSFF5ZRI/s1600/linkedinss.png') 0 -1px no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fefefe),color-stop(100%,#ededec));
border-color: #dbe3ef;
} 
.social-stub.twitter {
color: #3e8399!important;
text-shadow: white -1px 1px;
background: #f6fafd url('http://1.bp.blogspot.com/-8FY8zm2A7DM/UDUSwgIwZFI/AAAAAAAAHRQ/A8WaC4m8BYE/s1600/blue_twitter_bird.png') -2px center no-repeat;
background: url('http://1.bp.blogspot.com/-8FY8zm2A7DM/UDUSwgIwZFI/AAAAAAAAHRQ/A8WaC4m8BYE/s1600/blue_twitter_bird.png') -2px center no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#f6fafd),color-stop(100%,#dbecf2));
border-color: #c8e2eb;
}
.social-stub.facebook {
background: #edf1f7 url('http://2.bp.blogspot.com/-FidAw97vfNE/UDUSwKCMzpI/AAAAAAAAHRM/R7uUq2uogPk/s1600/blue_facebook.png') -4px center no-repeat;
color: #4a68a2;
background: url('http://2.bp.blogspot.com/-FidAw97vfNE/UDUSwKCMzpI/AAAAAAAAHRM/R7uUq2uogPk/s1600/blue_facebook.png') -4px center no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#edf1f7),color-stop(100%,#dbe3ef));
border-color: #cad6e7;
}
ul.social li:nth-child(n+2) > a {margin-left: 47px;}
.social-stub {
width: 61px;
height: 23px;
display: inline-block;
border: 1px solid black;
position: relative;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
text-decoration: none!important;
transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
background-position: left center;
background-repeat: no-repeat;
font-size: 11px;
font-family: Tahoma,Geneva,sans-serif;
line-height: 24px;
text-align: center;
} 
.social-stub::before {
top: -2px;
bottom: auto;
height: 20px;
width: 34px;
left: 100%;
margin-left: 6px;
line-height: 20px;
content: attr(data-shares);
display: inline;
padding:1px 5px;
border: 1px solid #E2E3E4;
position: absolute;
top: -1px;
left: 61px;
height:19px;
width: auto;
white-space: nowrap;
color: #777;
z-index: 10;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
-ms-border-bottom-left-radius: 2px;
-o-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-right-radius: 2px;
-ms-border-bottom-right-radius: 2px;
-o-border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
font-family: arial,sans-serif;
font-size: 12px!important;
text-align: center;
text-indent: 0;
}
.social-stub::after {
content: "";
width: 5px;
height: 9px;
background: url(http://1.bp.blogspot.com/-TJOtb5GjrAk/UDUU0I99zbI/AAAAAAAAHRw/Oyf9lOfPDlM/s1600/bubble-pip.png) left center no-repeat;
position: absolute;
top: 5px;
left: 100%;
margin-left: 2px;
z-index: 15;
}

4. Lastly Search for </body> and paste the following code just before it.

<script src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('b'+e(c)+'b','g'),k[c]);return p}(';(4($,g,h,i){l j='28',2d={2R:'28',Q:{K:D,C:D,x:D,G:D,p:D,H:D,I:D,A:D},26:0,1e:'',19:'',3:h.2N.1k,w:h.19,1u:'28.2Y',z:{},1p:0,1s:r,2Z:r,30:r,23:D,22:4(){},34:4(){},1P:4(){},2o:4(){},8:{K:{3:'',17:D,1l:'35',11:'38-3y',2c:''},C:{3:'',17:D,T:'1E',Z:'3V',F:'',1y:'D',2u:'D',2q:'',1A:'',11:'3D'},x:{3:'',17:D,z:'39',2f:'',15:'',1I:'',11:'38'},G:{3:'',17:D,O:'41'},p:{3:'',17:D,1l:'35'},H:{3:'',17:D,Z:'1'},I:{3:'',17:D,24:''},A:{3:'',1B:'',1r:'',Z:'39'}}},1o={K:"",C:"P://4B.C.o/?1W={3}&1z=?",x:"P://3W.3Z.x.o/1/40/z.3e?3={3}&1z=?",G:"P://46.G.o/2.0/4a.4c?4e={3}&O=1c&1z=?",p:'P://4V.p.o/51/3e/3q/m?3={3}&1z=?',H:"",I:"P://1g.I.o/3E/z/Q?3N=3O&3={3}&1z=?",A:""},3a={K:4(b){l c=b.6.8.K;$(b.q).W('.8').Y('<n L="S 4i"><n L="g-1D" m-1l="'+c.1l+'" m-1k="'+(c.3!==''?c.3:b.6.3)+'" m-2c="'+c.2c+'"></n></n>');g.4T={11:b.6.8.K.11};l d=0;9(y 36==='E'&&d==0){d=1;(4(){l a=h.1b('N');a.O='w/1c';a.1m=r;a.16='//3Y.32.o/X/1D.X';l s=h.1d('N')[0];s.1a.18(a,s)})()}J{36.1D.4d()}},C:4(c){l e=c.6.8.C;$(c.q).W('.8').Y('<n 1W="1L-4m"></n><n L="S C"><n L="1L-1E" m-1k="'+(e.3!==''?e.3:c.6.3)+'" m-1y="'+e.1y+'" m-Z="'+e.Z+'" m-F="'+e.F+'" m-4n-2u="'+e.2u+'" m-T="'+e.T+'" m-2q="'+e.2q+'" m-1A="'+e.1A+'" m-15="'+e.15+'"></n></n>');l f=0;9(y 1f==='E'&&f==0){f=1;(4(d,s,a){l b,2g=d.1d(s)[0];9(d.4Y(a)){1w}b=d.1b(s);b.1W=a;b.16='//55.C.5d/'+e.11+'/3g.X#3l=1';2g.1a.18(b,2g)}(h,'N','C-3m'))}J{1f.3n.3o()}},x:4(b){l c=b.6.8.x;$(b.q).W('.8').Y('<n L="S x"><a 1k="1C://x.o/Q" L="x-Q-S" m-3="'+(c.3!==''?c.3:b.6.3)+'" m-z="'+c.z+'" m-w="'+b.6.w+'" m-15="'+c.15+'" m-2f="'+c.2f+'" m-1I="'+c.1I+'" m-11="'+c.11+'">3u</a></n>');l d=0;9(y 2n==='E'&&d==0){d=1;(4(){l a=h.1b('N');a.O='w/1c';a.1m=r;a.16='//1R.x.o/1V.X';l s=h.1d('N')[0];s.1a.18(a,s)})()}J{$.3F({3:'//1R.x.o/1V.X',3G:'N',3I:r})}},G:4(a){l b=a.6.8.G;$(a.q).W('.8').Y('<n L="S G"><a L="3J '+b.O+'" 3K="3L 3M" 1k="P://G.o/2X?3='+U((b.3!==''?b.3:a.6.3))+'"></a></n>');l c=0;9(y 3P==='E'&&c==0){c=1;(4(){l s=h.1b('2W'),1Z=h.1d('2W')[0];s.O='w/1c';s.1m=r;s.16='//1V.G.o/8.X';1Z.1a.18(s,1Z)})()}},p:4(a){9(a.6.8.p.1l=='3X'){l b='F:20;',21='B:2S;F:20;1A-1l:42;1q-B:2S;',25='B:2P;1q-B:2P;27-5n:1K;'}J{l b='F:4h;',21='2a:4j;2b:0 1K;B:1x;F:4u;1q-B:1x;',25='2a:4v;B:1x;1q-B:1x;'}l c=a.1s(a.6.z.p);9(y c==="E"){c=0}$(a.q).W('.8').Y('<n L="S p"><n 1M="'+b+'1A:4C 4G,4I,4J-4L;4N:4P;1N:#4U;2K:4X-3f;2a:2J;B:1x;1q-B:52;27:0;2b:0;w-53:0;54-2h:57;">'+'<n 1M="'+21+'2I-1N:#2G;27-3h:3i;3j:3k;w-2h:2F;1S:2C 2B #3p;1S-2A:1K;">'+c+'</n>'+'<n 1M="'+25+'2K:3f;2b:0;w-2h:2F;w-3r:2J;F:20;2I-1N:#3s;1S:2C 2B #3t;1S-2A:1K;1N:#2G;">'+'<2y 16="P://1g.p.o/3v/2y/p.3w.3x" B="10" F="10" 3z="3A" /> 3B</n></n></n>');$(a.q).W('.p').3C('1P',4(){a.2x('p')})},H:4(b){l c=b.6.8.H;$(b.q).W('.8').Y('<n L="S H"><2T:2t Z="'+c.Z+'" 2N="'+(c.3!==''?c.3:b.6.3)+'"></2T:2t></n>');l d=0;9(y 1Q==='E'&&d==0){d=1;(4(){l a=h.1b('N');a.O='w/1c';a.1m=r;a.16='//1R.H.o/1/1V.X';l s=h.1d('N')[0];s.1a.18(a,s)})();s=g.3H(4(){9(y 1Q!=='E'){1Q.2w();2s(s)}},2r)}J{1Q.2w()}},I:4(b){l c=b.6.8.I;$(b.q).W('.8').Y('<n L="S I"><n O="2p/Q" m-3="'+(c.3!==''?c.3:b.6.3)+'" m-24="'+c.24+'"></N></n>');l d=0;9(y g.2z==='E'&&d==0){d=1;(4(){l a=h.1b('N');a.O='w/1c';a.1m=r;a.16='//1R.I.o/2p.X';l s=h.1d('N')[0];s.1a.18(a,s)})()}J{g.2z.1U()}},A:4(b){l c=b.6.8.A;$(b.q).W('.8').Y('<n L="S A"><a 1k="P://A.o/1T/2m/S/?3='+(c.3!==''?c.3:b.6.3)+'&1B='+c.1B+'&1r='+c.1r+'" L="1T-3Q-S" z-Z="'+c.Z+'">3R 3S</a></n>');(4(){l a=h.1b('N');a.O='w/1c';a.1m=r;a.16='//3T.A.o/X/3U.X';l s=h.1d('N')[0];s.1a.18(a,s)})()}},2D={K:4(){},C:4(){1L=g.2E(4(){9(y 1f!=='E'){1f.2k.2j('2H.2m',4(a){1h.1i(['1j','C','1E',a])});1f.2k.2j('2H.43',4(a){1h.1i(['1j','C','44',a])});1f.2k.2j('45.1y',4(a){1h.1i(['1j','C','1y',a])});2s(1L)}},2L)},x:4(){2M=g.2E(4(){9(y 2n!=='E'){2n.48.49('1J',4(a){9(a){1h.1i(['1j','x','1J'])}});2s(2M)}},2L)},G:4(){},p:4(){},H:4(){},I:4(){4 4b(){1h.1i(['1j','I','Q'])}},A:4(){}},2O={K:4(a){g.14("1C://1D.32.o/2Q/+1/4f?4g="+a.8.K.11+"&3="+U((a.8.K.3!==''?a.8.K.3:a.3)),"","13=0, 1H=0, F=2v, B=2r")},C:4(a){g.14("P://1g.C.o/4k.2Y?u="+U((a.8.C.3!==''?a.8.C.3:a.3))+"&t="+a.w+"","","13=0, 1H=0, F=2v, B=2r")},x:4(a){g.14("1C://x.o/4l/1J?w="+U(a.w)+"&3="+U((a.8.x.3!==''?a.8.x.3:a.3))+(a.8.x.15!==''?'&15='+a.8.x.15:''),"","13=0, 1H=0, F=2U, B=2V")},G:4(a){g.14("P://G.o/4o/4p/2X?3="+U((a.8.G.3!==''?a.8.G.3:a.3))+"&19="+a.w+"&1I=r&1M=r","","13=0, 1H=0, F=2U, B=2V")},p:4(a){g.14('P://1g.p.o/4q?v=5&4r&4s=4t&3='+U((a.8.p.3!==''?a.8.p.3:a.3))+'&19='+a.w,'p','13=1F,F=1n,B=1n')},H:4(a){g.14('P://1g.H.o/2t/?3='+U((a.8.p.3!==''?a.8.p.3:a.3)),'H','13=1F,F=1n,B=1n')},I:4(a){g.14('1C://1g.I.o/4w/Q?3='+U((a.8.p.3!==''?a.8.p.3:a.3))+'&4x=&4y=r','I','13=1F,F=1n,B=1n')},A:4(a){g.14('P://A.o/1T/2m/S/?3='+U((a.8.A.3!==''?a.8.A.3:a.3))+'&1B='+U(a.8.A.1B)+'&1r='+a.8.A.1r,'A','13=1F,F=4z,B=4A')}};4 R(a,b){7.q=a;7.6=$.4D(r,{},2d,b);7.6.Q=b.Q;7.4E=2d;7.4F=j;7.1U()};R.V.1U=4(){l c=7;9(7.6.1u!==''){1o.K=7.6.1u+'?3={3}&O=K';1o.H=7.6.1u+'?3={3}&O=H';1o.A=7.6.1u+'?3={3}&O=A'}$(7.q).4H(7.6.2R);9(y $(7.q).m('19')!=='E'){7.6.19=$(7.q).31('m-19')}9(y $(7.q).m('3')!=='E'){7.6.3=$(7.q).m('3')}9(y $(7.q).m('w')!=='E'){7.6.w=$(7.q).m('w')}$.1t(7.6.Q,4(a,b){9(b===r){c.6.26++}});9(c.6.30===r){$.1t(7.6.Q,4(a,b){9(b===r){4K{c.33(a)}4M(e){}}})}J{7.1X();7.6.2o(7,7.6)}$(7.q).22(4(){9($(7).W('.8').4O===0&&c.6.2Z===r){c.1X()}c.6.22(c,c.6)},4(){c.6.34(c,c.6)});$(7.q).1P(4(){c.6.1P(c,c.6);1w D})};R.V.1X=4(){l c=7;$(7.q).Y('<n L="8"></n>');$.1t(c.6.Q,4(a,b){9(b==r){3a[a](c);9(c.6.23===r){2D[a]()}}})};R.V.33=4(c){l d=7,z=0,3=1o[c].1v('{3}',U(7.6.3));9(7.6.8[c].17===r&&7.6.8[c].3!==''){3=1o[c].1v('{3}',7.6.8[c].3)}9(3!=''){$.4Q(3,4(a){9(y a.z!=="E"){l b=a.z+'';b=b.1v('4R4S','');z+=1G(b,10)}J 9(y a.37!=="E"){z+=1G(a.37,10)}J 9(y a.2e!=="E"){z+=1G(a.2e,10)}J 9(y a[0]!=="E"){z+=1G(a[0].4W,10)}J 9(y a[0]!=="E"){}d.6.z[c]=z;d.6.1p+=z;d.2i();d.1O()}).4Z(4(){d.6.z[c]=0;d.1O()})}J{d.2i();d.6.z[c]=0;d.1O()}};R.V.1O=4(){l a=0;50(e 2p 7.6.z){a++}9(a===7.6.26){7.6.2o(7,7.6)}};R.V.2i=4(){l a=7.6.1p,1e=7.6.1e;9(7.6.1s===r){a=7.1s(a)}9(1e!==''){1e=1e.1v('{1p}',a);$(7.q).29(1e)}J{$(7.q).31('m-2e',a)}};R.V.1s=4(a){9(a>=3b){a=(a/3b).3c(2)+"M"}J 9(a>=3d){a=(a/3d).3c(1)+"k"}1w a};R.V.2x=4(a){2O[a](7.6);9(7.6.23===r){l b={K:{12:'56',T:'+1'},C:{12:'C',T:'1E'},x:{12:'x',T:'1J'},G:{12:'G',T:'1Y'},p:{12:'p',T:'1Y'},H:{12:'H',T:'1Y'},I:{12:'I',T:'Q'},A:{12:'A',T:'1T'}};1h.1i(['1j',b[a].12,b[a].T])}};R.V.58=4(){l a=$(7.q).29();$(7.q).29(a.1v(7.6.1p,7.6.1p+1))};R.V.59=4(a,b){9(a!==''){7.6.3=a}9(b!==''){7.6.w=b}};$.5a[j]=4(b){l c=5b;9(b===i||y b==='5c'){1w 7.1t(4(){9(!$.m(7,'2l'+j)){$.m(7,'2l'+j,5e R(7,b))}})}J 9(y b==='5f'&&b[0]!=='2Q'&&b!=='1U'){1w 7.1t(4(){l a=$.m(7,'2l'+j);9(a 5g R&&y a[b]==='4'){a[b].5h(a,5i.V.5j.5k(c,1))}})}}})(5l,5m,47);',62,334,'|||url|function||options|this|buttons|if||||||||||||var|data|div|com|delicious|element|true|||||text|twitter|typeof|count|pinterest|height|facebook|false|undefined|width|digg|stumbleupon|linkedin|else|googlePlus|class||script|type|http|share|Plugin|button|action|encodeURIComponent|prototype|find|js|append|layout||lang|site|toolbar|open|via|src|urlCount|insertBefore|title|parentNode|createElement|javascript|getElementsByTagName|template|FB|www|_gaq|push|_trackSocial|href|size|async|550|urlJson|total|line|description|shorterTotal|each|urlCurl|replace|return|20px|send|callback|font|media|https|plusone|like|no|parseInt|status|related|tweet|3px|fb|style|color|rendererPerso|click|STMBLPN|platform|border|pin|init|widgets|id|loadButtons|add|s1|50px|cssCount|hover|enableTracking|counter|cssShare|shareTotal|margin|sharrre|html|float|padding|annotation|defaults|shares|hashtags|fjs|align|renderer|subscribe|Event|plugin_|create|twttr|render|in|colorscheme|500|clearInterval|badge|faces|900|processWidgets|openPopup|img|IN|radius|solid|1px|tracking|setInterval|center|fff|edge|background|none|display|1000|tw|location|popup|18px|_|className|35px|su|650|360|SCRIPT|submit|php|enableHover|enableCounter|attr|google|getSocialJson|hide|medium|gapi|likes|en|horizontal|loadButton|1e6|toFixed|1e3|json|block|all|bottom|5px|overflow|hidden|xfbml|jssdk|XFBML|parse|ccc|urlinfo|decoration|7EACEE|40679C|Tweet|static|small|gif|US|alt|Delicious|Add|on|en_US|countserv|ajax|dataType|setTimeout|cache|DiggThisButton|rel|nofollow|external|format|jsonp|__DBW|it|Pin|It|assets|pinit|button_count|cdn|tall|apis|api|urls|DiggCompact|15px|remove|unlike|message|services|document|events|bind|story|LinkedInShare|getInfo|go|links|confirm|hl|93px|googleplus|right|sharer|intent|root|show|tools|diggthis|save|noui|jump|close|26px|left|cws|token|isFramed|700|300|graph|12px|extend|_defaults|_name|Arial|addClass|Helvetica|sans|try|serif|catch|cursor|length|pointer|getJSON|u00c2|u00a0|___gcfg|666666|feeds|total_posts|inline|getElementById|error|for|v2|normal|indent|vertical|connect|Google|baseline|simulateClick|update|fn|arguments|object|net|new|string|instanceof|apply|Array|slice|call|jQuery|window|top'.split('|'),0,{}))
//]]>
</script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function()
 {

  $('.social').one('mouseenter', function()
  {
   Socialite.load($(this)[0]);
  });

 });

$('.twitter').sharrre({
  share: {
    twitter: true
  },
  enableHover: false,
  enableTracking: true,
  buttons: { twitter: {via: '_YourTwitterHandle'}},
  click: function(api, options){
    api.simulateClick();
    api.openPopup('twitter');
  }
});
$('.facebook').sharrre({
  share: {
    facebook: true
  },
  enableHover: false,
  enableTracking: true,
  click: function(api, options){
    api.simulateClick();
    api.openPopup('facebook');
  }
});
$('.googlepluss').sharrre({
  share: {
    googlePlus: true
  },
  enableHover: false,
  enableTracking: true,
  click: function(api, options){
    api.simulateClick();
    api.openPopup('googlePlus');
  }
});
$('.linkedin').sharrre({
  share: {
    linkedin: true
  },
  enableHover: false,
  enableTracking: true,
  click: function(api, options){
    api.simulateClick();
    api.openPopup('Linkedin');
  }
});
//]]>
</script>

5. Check the Preview for errors and Save your template

Note: As I mentioned before it is currently not possible to display the +1 count with JavaScript alone. Whenever a Public API will be released for Google+ , I will update this tutorial. Feel free to share your suggestions for improving this widget. .abcde::before {background:url(‘http://4.bp.blogspot.com/-CPew7PV7Zr0/UDZwXiDJdoI/AAAAAAAAHS0/iMd_NO9xgx4/s1600/down_arrow.png’) center center no-repeat !important;}

Download Demo

20 Great Resources for Blogger Users

20 great resources for blogger users

If you just getting started with Blogger platform , these are some great blogs to include in your reading list. Each one of them is full of unique tutorials and pro tips that can keep you hooked for days together. Every blog in the list has a different focus , with some focussing on Tips and Tricks while other writing about Widget Creation and Tutorials. Nonetheless each resource is full of quality stuff that will help you with various aspects Blogger platform




1. Spice Up Your Blog

spice up your blog





Has one of the biggest collection of Tutorials , Tips and Widgets. Established in mid-2009 , it has been going strong since then with updates being posted on a weekly or daily basis.

2. Way2Blogging

way 2 blogging





Best resource for Widgets and Templates. Updates are arbitrary in nature but each and every one of them is of highest quality

3. Blogger Plugins

blogger widgets





One of the Oldest blog dedicated to Blogger known for its Blogger API widgets and In-depth Tutorials.

4. Blogger Sentral

blogger sentral





It has some of the best tutorials related to integrating various services into Blogger. Also known for its simplicity and directness .

5. Blogger Buster

blogger buster





The oldest resource dedicated to Blogger with the best tutorials , tips and templates. Founded in late 2006 its been updated since then on a regular basis.

6. Blogger Items

blogger items




New to Blogger but known for its unique and awesome Widgets which can’t be found anywhere else on the internet.

7. The Real Blogger Status

the real blogger status





Keeps you up to date with all the latest happening in the Blogger Forum and Blogger as a whole. Updated on a daily basis


8. Simplex Design

simplex design





A source for Blogger tutorials and Tips

9. Mayura4Ever

mayura 4 ever





Relatively new but covers up that with its in-depth tutorial and simplicity

10. My Blogger Tricks

my blogger tricks





Most Active among all , its updated daily and is full of Tutorials , tips and Tricks for Blogger as well as Smart money making techniques

11. Abu Farhan

abu farhan





Its one of the earliest resources for Blogger, even though its not updated much now still the tutorials available in it are useful till today

12. Blogger Xpertise

blogger xpertise





Fairly new resource but the tutorials and tips are covered in it are downright awesome and useful to say the least

13. 54Blogger

54 blogger





A mix of Blogger Tutorials and Web Design Tips. Each tutorial provides a new insight and has freshness to it. Not updated much these days.

14. Blogger Bin

blogger bin





New on the block , but the variety and quality of tutorials and tips is really professional.

15. Nymphont

nymfont





Updated arbitrarily but the Templates created by them are a class apart

16. Helper Blogger

helper for blogger





Just 9 months old but the tutorials and tips are really great


17. Southern Speakers

southern speakers





One of the biggest resource for Blogger Dynamic View tutorials and tricks

18. My Blogger Lab

my blogger lab





Creates amazing widgets for Blogger as well as occasional tips and tricks related to blogging

19. Bloggerzbible

bloggerz bible





Creates templates which have unmatched quality and also shares Tips and Tutorials

20. Stylify Your Blog ( us !)

stylify Your blog




Hope you found these blogs useful. There are so many quality resources out there , that I might have missed some , so feel free to share them in the comments below so that I can expand this list .

Random Post Widget for Blogger

Random Post Widget for Blogger blogs. A simple way to display arbitrary posts from your blog’s archives. This widget comes with loads of customizable options which can be easily configured using the Widget Generator found later. This is inspired from Aneesh Joseph’s Random Post Gadget using the Blogger API. That gadget failed unexpectedly sometimes due very large iFrame URLs and the browser’s incapability to render them. So I tweaked and converted it into a purely json based widget with no chance of that kind of failure occurring

Demo

Note :
There is some problem with GoogleCode as of now which might have rendered the widget useless. To solve this problem , Open up the HTML/JavaScript widget and replace the following line

<script style='text/javascript' src='https://stylifyyourblog1.googlecode.com/svn/trunk/random.js'></script>

Change it with

<script style='text/javascript' >
//<![CDATA[
var postTitleOriginal,  myLink, myDiv, myImage;
var    main;

function getPost(json) {
var s;
    var entry = json.feed.entry[0];
    var postTitle = entry.title.$t;
    postTitleOriginal = postTitle;
    if (isNaN(titleLength) || titleLength == 0) {
        postTitle = '';
    }
    else if (postTitle.length > titleLength) postTitle = postTitle.substring(0, titleLength) + "...";
    var postUrl;
    for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
            var commentText = entry.link[k].title;
            var commentUrl = entry.link[k].href;
        }
        if (entry.link[k].rel == 'alternate') {
            postUrl = entry.link[k].href;
            break;
        }
    }
    if (showThumbs == true) {
        var thumbUrl = "";
        try {
            thumbUrl = entry.media$thumbnail.url;
            if(imgDim=="80"||imgDim=="85"||imgDim=="90"||imgDim=="95"||imgDim=="100") thumbUrl = thumbUrl.replace("/s72-c/","/s104-c/");
        } catch (error) {
            if ("content" in entry) s = entry.content.$t; else s="";
            if (thumbUrl == "" && mediaThumbsOnly == false) {
                 regex = /http://www.youtube(-nocookie){0,1}.com/(v){0,1}(embed){0,1}/(([^"&?' ]*))/;
                videoIds = s.match(regex);
                if (videoIds != null) {
                    videoId = videoIds[4];
                }
                if (videoIds != null && videoId != null) thumbUrl = "http://img.youtube.com/vi/" + videoId + "/2.jpg"
            }
            if (thumbUrl == "" && mediaThumbsOnly == false) {
                a = s.indexOf("<img");
                b = s.indexOf("src="", a);
                c = s.indexOf(""", b + 5);
                d = s.substr(b + 5, c - b - 5);
                if ((a != -1) && (b != -1) && (c != -1) && (d != "")) thumbUrl = d;

            }

        }
        if (thumbUrl == "" && showNoImage == true) thumbUrl = 'http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png';
    } //end ifposthumbs
    if (showPostDate == true) {
        var postdate = entry.published.$t;
        var cdyear = postdate.substring(0, 4);
        var cdmonth = postdate.substring(5, 7);
        var cdday = postdate.substring(8, 10);
        var monthnames = new Array();
        monthnames[1] = "Jan";
        monthnames[2] = "Feb";
        monthnames[3] = "Mar";
        monthnames[4] = "Apr";
        monthnames[5] = "May";
        monthnames[6] = "Jun";
        monthnames[7] = "Jul";
        monthnames[8] = "Aug";
        monthnames[9] = "Sep";
        monthnames[10] = "Oct";
        monthnames[11] = "Nov";
        monthnames[12] = "Dec";
    } //end if date
    code = "";
        main = document.getElementById('stylify_random');
        myDiv = document.createElement('div');
        myDiv.setAttribute("class", "stylify_item_title");
         myDiv.style.clear="both";
    myDiv.style.marginTop="4px";
        myLink = createLink(postUrl,"_top",postTitleOriginal)
       
        if(postTitle != '')myDiv.appendChild(myLink);
        main.appendChild(myDiv);if(postTitle != '')myLink.innerHTML = postTitle;





    if (showThumbs == true && thumbUrl != "") {
        myImage = document.createElement('img');
        myImage.style.border = "3px solid transparent";
        myImage.style.margin = "5px";
myImage.style.boxShadow = "0 0 8px rgba(0, 0, 0, 0.3)";

        myImage.setAttribute("src", thumbUrl);
        myImage.style.cssFloat=imgFloat;
        myImage.style.styleFloat=imgFloat;
        //myImage.setAttribute("alt", postTitleOriginal);
        myImage.setAttribute("width", imgDim);
        //myImage.setAttribute("align", imgFloat);
        myImage.setAttribute("height", imgDim);
        myLink = document.createElement('a');
        myLink.setAttribute("href", postUrl+"?utm_source=blog&utm_medium=gadget&utm_campaign=stylify_random");
        myLink.setAttribute("target", "_top");
        myLink.setAttribute("title", postTitleOriginal);
        myLink.appendChild(myImage);

        myDiv = document.createElement('div');
        myDiv.setAttribute("class", "stylify_item_thumb");
        myDiv.appendChild(myLink);
        main.appendChild(myDiv);
    }




    try {
        if ("content" in entry) {
            var postContent = entry.content.$t;
        }
        else if ("summary" in entry) {
            var postContent = entry.summary.$t;
        }
        else var postContent = "";
        var re = /<S[^>]*>/g;
        postContent = postContent.replace(re, "");


        if (showSummary == true) {
            myDiv = createDiv("stylify_item_summary");
           
                if (postContent.length < summaryLength) {myDiv.innerHTML=postContent;}
            else {
                postContent = postContent.substring(0, summaryLength);
                var quoteEnd = postContent.lastIndexOf(" ");
                postContent = postContent.substring(0, quoteEnd);
                myDiv.innerHTML=postContent + '...';
            }

            main.appendChild(myDiv);
        }
    } //end try
    catch (error) {}

    myDiv =  createDiv("stylify_item_meta");
    myDiv.style.clear="both";
    myDiv.style.marginBottom="4px";

    var flag = 0;
    if (showPostDate == true) {
        myDiv.appendChild(document.createTextNode(monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear));
        flag = 1;
    }

    if (showCommentCount == true) {
        if (flag == 1) {
            myDiv.appendChild(document.createTextNode(" | "));
        }
        if (commentText == '1 Comments') commentText = '1 Comment';
        if (commentText == '0 Comments') commentText = 'No Comments';
        var myLink = createLink(commentUrl,"_top",commentText + " on " + postTitleOriginal)
        myDiv.appendChild(myLink);
        myLink.innerHTML=commentText;
        flag = 1;;
    }

    if (showReadMore == true) {
        if (flag == 1) {
            myDiv.appendChild(document.createTextNode(" | "));
        }
        var myLink = createLink(postUrl,"_top",postTitleOriginal)
        myDiv.appendChild(myLink);
        myLink.innerHTML = readMore+" &raquo;";
        flag = 1;;
    }



    if (flag == 1 || showSummary || postTitle != "") main.appendChild(myDiv);
    gadgets.window.adjustHeight();

}

function getRandom(json) {
 var feedUrl = '/feeds/posts/default';
    if (mediaThumbsOnly||!showThumbs) feedUrl = feedUrl.replace("posts/default", "posts/summary");
    totalPosts = parseInt(json.feed.openSearch$totalResults.$t);
    var rand = [];
    if (numberOfPosts > totalPosts) numberOfPosts = totalPosts;
    if (numberOfPosts > 15) numberOfPosts = 15;
    while (rand.length < numberOfPosts) {
        var randomNumber = Math.ceil(Math.random() * totalPosts);
        var found = false;
        for (var i = 0; i < rand.length; i++) {
            if (rand[i] == randomNumber) {
                found = true;
                break;
            }
        }
        if (!found) rand[rand.length] = randomNumber;
    }
    var head = document.getElementsByTagName("head")[0] || document.documentElement;

    for (var i = 0; i < rand.length; i++) {

        script = document.createElement("script");
        script.src = feedUrl + "?start-index=" + rand[i] + "&max-results=1&alt=json-in-script&callback=getPost";
        script.charSet = "utf-8";
        head.appendChild(script);
    }

       

}
function createDiv(className)
{
var myDiv = document.createElement('div');
myDiv.setAttribute("class", className);

return myDiv;
}


function createLink(href,target,title)
{

var myLink = document.createElement('a');
if(href.substring(href.length-13,href.length)=="#comment-form")
href= href.substring(0,href.length-13)+"?utm_source=blog&utm_medium=gadget&utm_campaign=stylify_random"+"#comment-form";
else if(href.indexOf("?utm_source=")==-1) href=href+"?utm_source=blog&utm_medium=gadget&utm_campaign=stylify_random";
myLink.setAttribute("href", href);
        myLink.setAttribute("target", target);
        myLink.setAttribute("title", title);
       

return myLink;
}

//]]>

</script>

Features

  • Easy to customize
  • Cross-browser Support
  • Configurable number of displayed Posts
  • Enable or Disable Image from post
  • Default Fallback Image for Imageless Posts
  • Control over Summary length
  • Displays Date and Comment link under Summary
  • Changeable Read More Link’s Text
  • Widget Generator

    Change the settings as per your needs and click the Add Widget to My Blog button

    Widget Title

    Widget Title:

    Customize Widget

    Blog url

    Number of posts :
    Maximum title Length : char
    Show Thumbnail :
    Show Default Thumbnail :(When no image)
    Thumbnail Dimension : px
    Float Thumbnail to :
    Left
    Right
    None

    Thumbnail Margin :
    5px Margin
    No Margin

    Show summary :
    Summary size : char
    Show post date :
    Show Comment Number :
    Show Read more Link :
    Read More Text :

    Sorting

    #content-wrapper {
    width: 96%;
    margin: 0 auto;
    padding: 10px;
    background-color: #ffffff;
    border-top: 0;
    }

    #content-wrapper h2 {
    margin: 1.6em 0 .5em;
    padding: 4px 5px;
    background-color: #ffd595;
    font-size: 100%;
    color: #333333;
    }

    #content-wrapper .instructions {
    font-size: 90%;
    text-align: left;
    }

    .post input {
    padding: 9px;
    border: solid 1px #E5E5E5;
    outline: 0;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    width: 100px;
    background: #FFFFFF url(”) left top repeat-x;
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    }
    .a_demo_four {
    width:auto !important;
    padding-right:20px !important ;
    text-align:center !important ;
    font-weight:bold !important ;
    border: 1px !important ;
    background-color: #3bb3e0 !important;
    font-family: ‘Open Sans’, sans-serif !important;
    font-size: 12px !important;
    text-decoration: none !important;
    color: #fff !important;
    position: relative !important;
    padding: 10px 20px !important;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229))) !important;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -o-border-radius: 5px !important;
    border-radius: 5px !important;
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
    }

    input[type=checkbox] {
    display: inline-block !important;
    font-size: 15px !important;
    line-height: 1em !important;
    margin: 0 0.25em 0 10px !important;
    padding: 0 !important;
    width: 1.25em !important;
    height: 1.25em !important;
    -webkit-border-radius: 0.25em !important;
    vertical-align: text-top !important;
    }

    eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!”.replace(/^/,String)){while(c–)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return’w+’};c=1};while(c–)if(k[c])p=p.replace(new RegExp(‘b’+e(c)+’b’,’g’),k[c]);return p}(‘6 25=””;I 2h(){6 a=3.4(“K”)[0].2;6 a=3.4(“K”)[0].2;6 b;9(3.4(“2j”)[0].8)b=”20″;m b=”R”;9(a.C(0,7)==”l://”)a=a.C(7,a.y);9(a[a.y-1]==”/”)a=a.C(0,a.y-1);6 c=3.4(“10”)[0].2;6 d=3.4(“H”)[0].8;6 e=3.4(“Q”)[0].8;6 f=3.4(“U”)[0].2;6 g=3.4(“1T”)[0].8;6 h=3.24(“28”)[0];h.2=”\26 27 O 2b\n”;h.2=h.2+”nn”;h.2=h.2+”6 1t = “+c+”;n”;9(d){h.2=h.2+”6 T = j;n”}m{h.2=h.2+”6 T = v;n”};9(e){h.2=h.2+”6 V = j;n”;h.2=h.2+”6 1y = “+f+”;n”}m{h.2=h.2+”6 V = v;n”};h.2=h.2+”6 1z = “+3.4(“w”)[0].2+”;n”;h.2=h.2+”6 1B = “+3.4(“X”)[0].8+”;n”;h.2=h.2+”6 1D = “+3.4(“p”)[0].8+”;n”;9(3.4(“p”)[0].8){h.2=h.2+”6 1F = “+3.4(“Z”)[0].8+”;n”;h.2=h.2+”6 1H = “+3.4(“D”)[0].2+”;n”;h.2=h.2+”6 1J = ‘”+3.4(“11″)[0].2+”‘;n”;h.2=h.2+”6 1K = “+3.4(“12″)[0].2+”;n”;9(b=”R”)s=j;m s=1N;h.2=h.2+”6 s = “+s+”;n”}h.2=h.2+”6 1O = “+3.4(“z”)[0].8+”;n”;9(3.4(“z”)[0].8)h.2=h.2+”6 1Q = ‘”+3.4(“15″)[0].2+”‘;n”;a=”l://”+a+”/A/B/”;9(a==”l:///A/B/”)a=”/A/B/”;h.2=h.2+”n”;h.2=h.2+”n”;6 i=/^-?d+$/;9(i.q(3.4(“w”)[0].2)&&i.q(c)){9((3.4(“p”)[0].8&&!i.q(3.4(“D”)[0].2))||(e&&!i.q(f)))1a(“1b! 1c 1d 1e 1f 1g 1h. 1i 1j.”);m 3.2c[“2d”].2e()}m 1a(“1b! 1c 1d 1e 1f 1g 1h. 1i 1j.”)}I 2f(){3.4(“2g.P”)[0].2=”M N”;3.4(“10″)[0].2=”5”;3.4(“H”)[0].8=j;3.4(“p”)[0].8=j;3.4(“X”)[0].8=j;3.4(“z”)[0].8=j;3.4(“Q”)[0].8=j;3.4(“U”)[0].2=”2i”;3.4(“Z”)[0].8=v;3.4(“D”)[0].2=”W”;3.4(“11″)[0].2=”2k”;3.4(“12″)[0].2=”5”;3.4(“w”)[0].2=”W”;3.4(“15″)[0].2=”1u”}’,62,146,’||value|document|getElementsByName||var||checked|if||||||||||true|script|http|else||style|ishowthumbnail|test|com|mediaThumbsOnly|div|src|false|ititlechars|text|length|ishowreadmore|feeds|posts|substring|iimgdim|utm_src|STYLIFY_random|0px|ishowdate|function|img|iblogurl|alt|Random|Posts|Blogger|title|ishowsummary|summary|javascript|showPostDate|inumchars|showSummary|100|ishowcomment|id|idefault|inumposts|ifloat|imargin|small|target|ireadmore|_blank|href|www|stylifyyourblog|alert|Error|Some|Numeric|Fields|have|incorrect|values|Correct|it|none|stylify_random|https|stylifyyourblog1|googlecode|svn|trunk|random|js|numberOfPosts|More|padding|1px|clear|summaryLength|titleLength|19px|showCommentCount|both|showThumbs|decoration|showNoImage|class|imgDim|stylify_footer|imgFloat|myMargin|img1|blogblog|fale|showReadMore|blank|readMore|gif|stylify_random_link|sort|max|results|json|in|callback|getRandom|default|with|Thumbnails|for|getElementsByTagName|options|Powered|By|textarea|blogger|widgets|Gadgets|forms|myform|submit|defaultvalues|widget|submitter|200|ifullfeed|left|border’.split(‘|’),0,{}))

    Some Tips

  • To make it look even more engaging to your readers, you can label it as “Posts being Viewed Currently” . It will make your readers believe that other people are viewing these posts and will drive more traffic to those posts.
  • After adding the widget you can simply change the settings from the Layout Tab itself or you can create another widget from the above Widget Generator and add it to your blog again. Make sure to delete the previous widget in that case.
  • If you Liked this Widget, Please Share it with fellow Blogger users.

    Please leave your opinions and suggestions so that we can make this widget even better. Feel free to share any problem you face while using it so that we can solve it at the earliest

    Lazy Loading Floating Share Bar Widget for Blogger

    Lazy Loading Floating share bar Presenting the Lazy Loading Floating Social Sharing Bar Widget for Blogger. It provides easy sharing options to your readers without the disadvantage of slow page load times attached with these buttons. The widget uses Socialite to asynchronously load all the scripts and styles related to the buttons as and when the user hovers over the widget. The widget comes in mainly two versions , one with small buttons and the other with large buttons

    Socialite Powered Floating Share Buttons

    Demo

    Simply select the version that suits you and add it to your blog using the buttons below

    Small Buttons Left-aligned Right-aligned
    On All Pages <style type=”text/css” >
    //<![CDATA[
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */

    #syb-social-load { margin: 0 0 0.625em 0; font-weight: bold; padding: 5px; }

    #syb-social {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; left:20px;top:200px; display: block; list-style: none; }
    #syb-social li {clear: both; text-align: center; display: block; margin: 0; padding: 10px 3px 0px 6px !important; }
    #syb-social .socialite { display: block; position: relative; width: 55px !important; height: 30px; background: url(‘http://3.bp.blogspot.com/-lGVQZowcc2k/UCeUCQ3eqoI/AAAAAAAAHH4/BV8ILPyDIGY/s1600/custom-default.png’) 0 0 no-repeat; }
    #syb-social .socialite-loaded {width: 100px !important; background: none; }

    #syb-social .twitter-share { background-position: 0 0; }
    #syb-social .googleplus-one { background-position: 0 -45px; }
    #syb-social .facebook-like { background-position: 0 -90px; }
    #syb-social .linkedin-share { background-position: 0 -135px; }
    #syb-social .pinterest-pinit { background-position: 0 -175px; }
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>
    <ul id="syb-social" class="cf">
    <li >
    <a href="http://twitter.com/share" class="socialite twitter-share" data-count="horizontal" data-via="YourTwitterHandle" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Twitter</span></a>

    </li>
    <li>
    <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="medium" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Google+</span>
    </a>
    </li>
    <li>
    <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Facebook</span>
    </a>
    </li>
    <li>
    <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="right" rel="nofollow" target="_blank">
    <span class="vhidden">Share on LinkedIn</span>
    </a>
    </li>
    <li>
    <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="horizontal">
    <span class="vhidden">Pin It!</span>
    </a>
    </li>
    </ul>

    <script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>

    <script type=’text/javascript’>
    //<![CDATA[

    // add pinterest extension
    (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("’+c+’")})();’)},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);

    var element ;
    element = document.getElementById(‘syb-social’);
    element.onmouseover = function () {
    Socialite.load();
    };
    //]]>
    </script>

    <style type=”text/css” >
    //<![CDATA[
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */

    #syb-social-load { margin: 0 0 0.625em 0; font-weight: bold; padding: 5px; }

    #syb-social {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; right:20px;top:200px; display: block; list-style: none; }
    #syb-social li {clear: both; text-align: center; display: block; margin: 0; padding: 10px 3px 0px 6px !important; }
    #syb-social .socialite { display: block; position: relative; width: 55px !important; height: 30px; background: url(‘http://3.bp.blogspot.com/-lGVQZowcc2k/UCeUCQ3eqoI/AAAAAAAAHH4/BV8ILPyDIGY/s1600/custom-default.png’) 0 0 no-repeat; }
    #syb-social .socialite-loaded {width: 100px !important; background: none; }

    #syb-social .twitter-share { background-position: 0 0; }
    #syb-social .googleplus-one { background-position: 0 -45px; }
    #syb-social .facebook-like { background-position: 0 -90px; }
    #syb-social .linkedin-share { background-position: 0 -135px; }
    #syb-social .pinterest-pinit { background-position: 0 -175px; }
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>
    <ul id="syb-social" class="cf">
    <li >
    <a href="http://twitter.com/share" class="socialite twitter-share" data-count="horizontal" data-via="YourTwitterHandle" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Twitter</span></a>

    </li>
    <li>
    <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="medium" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Google+</span>
    </a>
    </li>
    <li>
    <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Facebook</span>
    </a>
    </li>
    <li>
    <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="right" rel="nofollow" target="_blank">
    <span class="vhidden">Share on LinkedIn</span>
    </a>
    </li>
    <li>
    <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="horizontal">
    <span class="vhidden">Pin It!</span>
    </a>
    </li>
    </ul>

    <script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>

    <script type=’text/javascript’>
    //<![CDATA[

    // add pinterest extension
    (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("’+c+’")})();’)},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);

    var element ;
    element = document.getElementById(‘syb-social’);
    element.onmouseover = function () {
    Socialite.load();
    };
    //]]>
    </script>

    On Post Pages <style type=”text/css” >
    //<![CDATA[
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */

    #syb-social-load { margin: 0 0 0.625em 0; font-weight: bold; padding: 5px; }

    #syb-social {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; left:20px;top:200px; display: block; list-style: none; }
    #syb-social li {clear: both; text-align: center; display: block; margin: 0; padding: 10px 3px 0px 6px !important; }
    #syb-social .socialite { display: block; position: relative; width: 55px !important; height: 30px; background: url(‘http://3.bp.blogspot.com/-lGVQZowcc2k/UCeUCQ3eqoI/AAAAAAAAHH4/BV8ILPyDIGY/s1600/custom-default.png’) 0 0 no-repeat; }
    #syb-social .socialite-loaded {width: 100px !important; background: none; }

    #syb-social .twitter-share { background-position: 0 0; }
    #syb-social .googleplus-one { background-position: 0 -45px; }
    #syb-social .facebook-like { background-position: 0 -90px; }
    #syb-social .linkedin-share { background-position: 0 -135px; }
    #syb-social .pinterest-pinit { background-position: 0 -175px; }
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>
    <ul id="syb-social" class="cf">
    <li >
    <a href="http://twitter.com/share" class="socialite twitter-share" data-count="horizontal" data-via="YourTwitterHandle" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Twitter</span></a>

    </li>
    <li>
    <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="medium" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Google+</span>
    </a>
    </li>
    <li>
    <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Facebook</span>
    </a>
    </li>
    <li>
    <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="right" rel="nofollow" target="_blank">
    <span class="vhidden">Share on LinkedIn</span>
    </a>
    </li>
    <li>
    <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="horizontal">
    <span class="vhidden">Pin It!</span>
    </a>
    </li>
    </ul>

    <script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>

    <script type=’text/javascript’>
    //<![CDATA[

    // add pinterest extension
    (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("’+c+’")})();’)},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);

    var element ;
    element = document.getElementById(‘syb-social’);
    element.onmouseover = function () {
    Socialite.load();
    };
    //]]>
    </script>

    <style type=”text/css” >
    //<![CDATA[
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */

    #syb-social-load { margin: 0 0 0.625em 0; font-weight: bold; padding: 5px; }

    #syb-social {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; right:20px;top:200px; display: block; list-style: none; }
    #syb-social li {clear: both; text-align: center; display: block; margin: 0; padding: 10px 3px 0px 6px !important; }
    #syb-social .socialite { display: block; position: relative; width: 55px !important; height: 30px; background: url(‘http://3.bp.blogspot.com/-lGVQZowcc2k/UCeUCQ3eqoI/AAAAAAAAHH4/BV8ILPyDIGY/s1600/custom-default.png’) 0 0 no-repeat; }
    #syb-social .socialite-loaded {width: 100px !important; background: none; }

    #syb-social .twitter-share { background-position: 0 0; }
    #syb-social .googleplus-one { background-position: 0 -45px; }
    #syb-social .facebook-like { background-position: 0 -90px; }
    #syb-social .linkedin-share { background-position: 0 -135px; }
    #syb-social .pinterest-pinit { background-position: 0 -175px; }
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>
    <ul id="syb-social" class="cf">
    <li >
    <a href="http://twitter.com/share" class="socialite twitter-share" data-count="horizontal" data-via="YourTwitterHandle" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Twitter</span></a>

    </li>
    <li>
    <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="medium" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Google+</span>
    </a>
    </li>
    <li>
    <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Facebook</span>
    </a>
    </li>
    <li>
    <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="right" rel="nofollow" target="_blank">
    <span class="vhidden">Share on LinkedIn</span>
    </a>
    </li>
    <li>
    <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="horizontal">
    <span class="vhidden">Pin It!</span>
    </a>
    </li>
    </ul>

    <script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>

    <script type=’text/javascript’>
    //<![CDATA[

    // add pinterest extension
    (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("’+c+’")})();’)},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);

    var element ;
    element = document.getElementById(‘syb-social’);
    element.onmouseover = function () {
    Socialite.load();
    };
    //]]>
    </script>

    Not on Pages (/p) <style type=”text/css” >
    //<![CDATA[
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */

    #syb-social-load { margin: 0 0 0.625em 0; font-weight: bold; padding: 5px; }

    #syb-social {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; left:20px;top:200px; display: block; list-style: none; }
    #syb-social li {clear: both; text-align: center; display: block; margin: 0; padding: 10px 3px 0px 6px !important; }
    #syb-social .socialite { display: block; position: relative; width: 55px !important; height: 30px; background: url(‘http://3.bp.blogspot.com/-lGVQZowcc2k/UCeUCQ3eqoI/AAAAAAAAHH4/BV8ILPyDIGY/s1600/custom-default.png’) 0 0 no-repeat; }
    #syb-social .socialite-loaded {width: 100px !important; background: none; }

    #syb-social .twitter-share { background-position: 0 0; }
    #syb-social .googleplus-one { background-position: 0 -45px; }
    #syb-social .facebook-like { background-position: 0 -90px; }
    #syb-social .linkedin-share { background-position: 0 -135px; }
    #syb-social .pinterest-pinit { background-position: 0 -175px; }
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>
    <ul id="syb-social" class="cf">
    <li >
    <a href="http://twitter.com/share" class="socialite twitter-share" data-count="horizontal" data-via="YourTwitterHandle" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Twitter</span></a>

    </li>
    <li>
    <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="medium" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Google+</span>
    </a>
    </li>
    <li>
    <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Facebook</span>
    </a>
    </li>
    <li>
    <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="right" rel="nofollow" target="_blank">
    <span class="vhidden">Share on LinkedIn</span>
    </a>
    </li>
    <li>
    <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="horizontal">
    <span class="vhidden">Pin It!</span>
    </a>
    </li>
    </ul>

    <script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>

    <script type=’text/javascript’>
    //<![CDATA[

    // add pinterest extension
    (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("’+c+’")})();’)},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);

    var element ;
    element = document.getElementById(‘syb-social’);
    element.onmouseover = function () {
    Socialite.load();
    };
    //]]>
    </script>

    <style type=”text/css” >
    //<![CDATA[
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */

    #syb-social-load { margin: 0 0 0.625em 0; font-weight: bold; padding: 5px; }

    #syb-social {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; right:20px;top:200px; display: block; list-style: none; }
    #syb-social li {clear: both; text-align: center; display: block; margin: 0; padding: 10px 3px 0px 6px !important; }
    #syb-social .socialite { display: block; position: relative; width: 55px !important; height: 30px; background: url(‘http://3.bp.blogspot.com/-lGVQZowcc2k/UCeUCQ3eqoI/AAAAAAAAHH4/BV8ILPyDIGY/s1600/custom-default.png’) 0 0 no-repeat; }
    #syb-social .socialite-loaded {width: 100px !important; background: none; }

    #syb-social .twitter-share { background-position: 0 0; }
    #syb-social .googleplus-one { background-position: 0 -45px; }
    #syb-social .facebook-like { background-position: 0 -90px; }
    #syb-social .linkedin-share { background-position: 0 -135px; }
    #syb-social .pinterest-pinit { background-position: 0 -175px; }
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>
    <ul id="syb-social" class="cf">
    <li >
    <a href="http://twitter.com/share" class="socialite twitter-share" data-count="horizontal" data-via="YourTwitterHandle" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Twitter</span></a>

    </li>
    <li>
    <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="medium" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Google+</span>
    </a>
    </li>
    <li>
    <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Facebook</span>
    </a>
    </li>
    <li>
    <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="right" rel="nofollow" target="_blank">
    <span class="vhidden">Share on LinkedIn</span>
    </a>
    </li>
    <li>
    <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="horizontal">
    <span class="vhidden">Pin It!</span>
    </a>
    </li>
    </ul>

    <script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>

    <script type=’text/javascript’>
    //<![CDATA[

    // add pinterest extension
    (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("’+c+’")})();’)},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);

    var element ;
    element = document.getElementById(‘syb-social’);
    element.onmouseover = function () {
    Socialite.load();
    };
    //]]>
    </script>

    Large Buttons Left-aligned Right-aligned
    On All Pages <style type=”text/css” >
    //<![CDATA[
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */

    #sybSocial {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; left:20px;top:200px;}
    #sybSocial > li { display: block; margin: 0; padding: 10px; }
    #sybSocial .socialite { display: block; position: relative; background: url(‘http://4.bp.blogspot.com/-w1rWniV6RO0/UCeUEh3hl4I/AAAAAAAAHIA/3xuG-HPLmpc/s1600/social-sprite.png’) 0 0 no-repeat; }
    #sybSocial .socialite-loaded { background: none !important; }

    #sybSocial .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
    #sybSocial .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
    #sybSocial .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
    #sybSocial .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }
    #sybSocial .stumbleupon { width: 50px; height: 65px; background-position: -295px 0; }
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

    <ul id="sybSocial" class="cf">
    <li>
    <a href="http://twitter.com/share" class="socialite twitter-share" data-via="YourTwitterHandle" data-count="vertical" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Twitter</span>
    </a>
    </li>
    <li>
    <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="tall" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Google+</span>
    </a>
    </li>
    <li>
    <center> <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Facebook</span>
    </a></center>
    </li>
    <li>
    <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="top" rel="nofollow" target="_blank">
    <span class="vhidden">Share on LinkedIn</span>
    </a>
    </li>
    <li><center>
    <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="vertical">
    <span class="vhidden">Pin It!</span>
    </a>
    </center></li>
    </ul>

    <script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>

    <script type=’text/javascript’>
    //<![CDATA[

    // add pinterest extension
    (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("’+c+’")})();’)},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);

    var element ;
    element = document.getElementById(‘sybSocial’);
    element.onmouseover = function () {
    Socialite.load();
    };
    //]]>
    </script>

    <style type=”text/css” >
    //<![CDATA[
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */

    #sybSocial {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; right:20px;top:200px;}
    #sybSocial > li { display: block; margin: 0; padding: 10px; }
    #sybSocial .socialite { display: block; position: relative; background: url(‘http://4.bp.blogspot.com/-w1rWniV6RO0/UCeUEh3hl4I/AAAAAAAAHIA/3xuG-HPLmpc/s1600/social-sprite.png’) 0 0 no-repeat; }
    #sybSocial .socialite-loaded { background: none !important; }

    #sybSocial .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
    #sybSocial .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
    #sybSocial .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
    #sybSocial .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }
    #sybSocial .stumbleupon { width: 50px; height: 65px; background-position: -295px 0; }
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

    <ul id="sybSocial" class="cf">
    <li>
    <a href="http://twitter.com/share" class="socialite twitter-share" data-via="YourTwitterHandle" data-count="vertical" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Twitter</span>
    </a>
    </li>
    <li>
    <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="tall" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Google+</span>
    </a>
    </li>
    <li>
    <center> <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Facebook</span>
    </a></center>
    </li>
    <li>
    <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="top" rel="nofollow" target="_blank">
    <span class="vhidden">Share on LinkedIn</span>
    </a>
    </li>
    <li><center>
    <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="vertical">
    <span class="vhidden">Pin It!</span>
    </a>
    </center></li>
    </ul>

    <script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>

    <script type=’text/javascript’>
    //<![CDATA[

    // add pinterest extension
    (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("’+c+’")})();’)},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);

    var element ;
    element = document.getElementById(‘sybSocial’);
    element.onmouseover = function () {
    Socialite.load();
    };
    //]]>
    </script>

    On Post Pages <style type=”text/css” >
    //<![CDATA[
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */

    #sybSocial {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; left:20px;top:200px;}
    #sybSocial > li { display: block; margin: 0; padding: 10px; }
    #sybSocial .socialite { display: block; position: relative; background: url(‘http://4.bp.blogspot.com/-w1rWniV6RO0/UCeUEh3hl4I/AAAAAAAAHIA/3xuG-HPLmpc/s1600/social-sprite.png’) 0 0 no-repeat; }
    #sybSocial .socialite-loaded { background: none !important; }

    #sybSocial .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
    #sybSocial .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
    #sybSocial .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
    #sybSocial .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }
    #sybSocial .stumbleupon { width: 50px; height: 65px; background-position: -295px 0; }
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

    <ul id="sybSocial" class="cf">
    <li>
    <a href="http://twitter.com/share" class="socialite twitter-share" data-via="YourTwitterHandle" data-count="vertical" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Twitter</span>
    </a>
    </li>
    <li>
    <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="tall" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Google+</span>
    </a>
    </li>
    <li>
    <center> <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Facebook</span>
    </a></center>
    </li>
    <li>
    <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="top" rel="nofollow" target="_blank">
    <span class="vhidden">Share on LinkedIn</span>
    </a>
    </li>
    <li><center>
    <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="vertical">
    <span class="vhidden">Pin It!</span>
    </a>
    </center></li>
    </ul>

    <script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>

    <script type=’text/javascript’>
    //<![CDATA[

    // add pinterest extension
    (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("’+c+’")})();’)},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);

    var element ;
    element = document.getElementById(‘sybSocial’);
    element.onmouseover = function () {
    Socialite.load();
    };
    //]]>
    </script>

    <style type=”text/css” >
    //<![CDATA[
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */

    #sybSocial {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; right:20px;top:200px;}
    #sybSocial > li { display: block; margin: 0; padding: 10px; }
    #sybSocial .socialite { display: block; position: relative; background: url(‘http://4.bp.blogspot.com/-w1rWniV6RO0/UCeUEh3hl4I/AAAAAAAAHIA/3xuG-HPLmpc/s1600/social-sprite.png’) 0 0 no-repeat; }
    #sybSocial .socialite-loaded { background: none !important; }

    #sybSocial .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
    #sybSocial .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
    #sybSocial .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
    #sybSocial .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }
    #sybSocial .stumbleupon { width: 50px; height: 65px; background-position: -295px 0; }
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

    <ul id="sybSocial" class="cf">
    <li>
    <a href="http://twitter.com/share" class="socialite twitter-share" data-via="YourTwitterHandle" data-count="vertical" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Twitter</span>
    </a>
    </li>
    <li>
    <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="tall" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Google+</span>
    </a>
    </li>
    <li>
    <center> <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Facebook</span>
    </a></center>
    </li>
    <li>
    <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="top" rel="nofollow" target="_blank">
    <span class="vhidden">Share on LinkedIn</span>
    </a>
    </li>
    <li><center>
    <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="vertical">
    <span class="vhidden">Pin It!</span>
    </a>
    </center></li>
    </ul>

    <script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>

    <script type=’text/javascript’>
    //<![CDATA[

    // add pinterest extension
    (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("’+c+’")})();’)},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);

    var element ;
    element = document.getElementById(‘sybSocial’);
    element.onmouseover = function () {
    Socialite.load();
    };
    //]]>
    </script>

    Not on Pages (/p) <style type=”text/css” >
    //<![CDATA[
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */

    #sybSocial {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; left:20px;top:200px;}
    #sybSocial > li { display: block; margin: 0; padding: 10px; }
    #sybSocial .socialite { display: block; position: relative; background: url(‘http://4.bp.blogspot.com/-w1rWniV6RO0/UCeUEh3hl4I/AAAAAAAAHIA/3xuG-HPLmpc/s1600/social-sprite.png’) 0 0 no-repeat; }
    #sybSocial .socialite-loaded { background: none !important; }

    #sybSocial .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
    #sybSocial .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
    #sybSocial .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
    #sybSocial .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }
    #sybSocial .stumbleupon { width: 50px; height: 65px; background-position: -295px 0; }
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>
    <ul id="sybSocial" class="cf">
    <li>
    <a href="http://twitter.com/share" class="socialite twitter-share" data-via="YourTwitterHandle" data-count="vertical" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Twitter</span>
    </a>
    </li>
    <li>
    <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="tall" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Google+</span>
    </a>
    </li>
    <li>
    <center> <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Facebook</span>
    </a></center>
    </li>
    <li>
    <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="top" rel="nofollow" target="_blank">
    <span class="vhidden">Share on LinkedIn</span>
    </a>
    </li>
    <li><center>
    <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="vertical">
    <span class="vhidden">Pin It!</span>
    </a>
    </center></li>
    </ul>

    <script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>

    <script type=’text/javascript’>
    //<![CDATA[

    // add pinterest extension
    (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("’+c+’")})();’)},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);

    var element ;
    element = document.getElementById(‘sybSocial’);
    element.onmouseover = function () {
    Socialite.load();
    };
    //]]>
    </script>

    <style type=”text/css” >
    //<![CDATA[
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */

    #sybSocial {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; right:20px;top:200px;}
    #sybSocial > li { display: block; margin: 0; padding: 10px; }
    #sybSocial .socialite { display: block; position: relative; background: url(‘http://4.bp.blogspot.com/-w1rWniV6RO0/UCeUEh3hl4I/AAAAAAAAHIA/3xuG-HPLmpc/s1600/social-sprite.png’) 0 0 no-repeat; }
    #sybSocial .socialite-loaded { background: none !important; }

    #sybSocial .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
    #sybSocial .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
    #sybSocial .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
    #sybSocial .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }
    #sybSocial .stumbleupon { width: 50px; height: 65px; background-position: -295px 0; }
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

    <ul id="sybSocial" class="cf">
    <li>
    <a href="http://twitter.com/share" class="socialite twitter-share" data-via="YourTwitterHandle" data-count="vertical" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Twitter</span>
    </a>
    </li>
    <li>
    <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="tall" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Google+</span>
    </a>
    </li>
    <li>
    <center> <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
    <span class="vhidden">Share on Facebook</span>
    </a></center>
    </li>
    <li>
    <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="top" rel="nofollow" target="_blank">
    <span class="vhidden">Share on LinkedIn</span>
    </a>
    </li>
    <li><center>
    <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="vertical">
    <span class="vhidden">Pin It!</span>
    </a>
    </center></li>
    </ul>

    <script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>

    <script type=’text/javascript’>
    //<![CDATA[

    // add pinterest extension
    (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("’+c+’")})();’)},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);

    var element ;
    element = document.getElementById(‘sybSocial’);
    element.onmouseover = function () {
    Socialite.load();
    };
    //]]>
    </script>

    In case you want to add the code manually
    1. Go to Blogger Dashboard , in Layout > Click Add a Gadget > HTML/JavaScript
    2. Now paste the following code from below that suits your choice
    Small Buttons Right Aligned

    <style type="text/css" >
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
    
    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */
    
    #syb-social-load { margin: 0 0 0.625em 0; font-weight: bold; padding: 5px; }
    
    #syb-social {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; right:20px;top:200px; display: block; list-style: none;  }
    #syb-social li {clear: both; text-align: center; display: block; margin: 0; padding: 10px 3px 0px 6px !important; }
    #syb-social .socialite { display: block; position: relative; width: 55px !important; height: 30px; background: url('http://3.bp.blogspot.com/-lGVQZowcc2k/UCeUCQ3eqoI/AAAAAAAAHH4/BV8ILPyDIGY/s1600/custom-default.png') 0 0 no-repeat; }
    #syb-social .socialite-loaded {width: 100px !important; background: none; }
    
    #syb-social .twitter-share { background-position: 0 0; }
    #syb-social .googleplus-one { background-position: 0 -45px; }
    #syb-social .facebook-like { background-position: 0 -90px; }
    #syb-social .linkedin-share { background-position: 0 -135px; }
    #syb-social .pinterest-pinit { background-position: 0 -175px; }
    </style>
    <a href="http://www.stylifyyourblog.com" alt="Blogger Tutorials" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>
    <ul id="syb-social" class="cf">
          <li  >
                <a href="http://twitter.com/share" class="socialite twitter-share" data-count="horizontal" data-via="YourTwitterHandle" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Twitter</span></a>
                
            </li>
            <li>
                <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="medium"  rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Google+</span>
                </a>
            </li>
            <li>
                <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Facebook</span>
                </a>
            </li>
            <li>
                <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share"  data-counter="right" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on LinkedIn</span>
                </a>
            </li>
            <li>
                <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="horizontal">
                    <span class="vhidden">Pin It!</span>
                </a>
            </li>
        </ul>
    
    <script type="text/javascript"  src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>
    
    
    <script type='text/javascript'>
    //<![CDATA[
    
            // add pinterest extension
            (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("'+c+'")})();')},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);
    
    var element ;
    element = document.getElementById('syb-social');
    element.onmouseover = function () {
        Socialite.load();
    };
    //]]>
    </script>

    Small Buttons Left Aligned

    <style type="text/css" >
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
    
    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */
    
    #syb-social-load { margin: 0 0 0.625em 0; font-weight: bold; padding: 5px; }
    
    #syb-social {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; left:20px;top:200px; display: block; list-style: none;  }
    #syb-social li {clear: both; text-align: center; display: block; margin: 0; padding: 10px 3px 0px 6px !important; }
    #syb-social .socialite { display: block; position: relative; width: 55px !important; height: 30px; background: url('http://3.bp.blogspot.com/-lGVQZowcc2k/UCeUCQ3eqoI/AAAAAAAAHH4/BV8ILPyDIGY/s1600/custom-default.png') 0 0 no-repeat; }
    #syb-social .socialite-loaded {width: 100px !important; background: none; }
    
    #syb-social .twitter-share { background-position: 0 0; }
    #syb-social .googleplus-one { background-position: 0 -45px; }
    #syb-social .facebook-like { background-position: 0 -90px; }
    #syb-social .linkedin-share { background-position: 0 -135px; }
    #syb-social .pinterest-pinit { background-position: 0 -175px; }
    </style>
    <a href="http://www.stylifyyourblog.com" alt="Blogger Tutorials" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>
    <ul id="syb-social" class="cf">
          <li  >
                <a href="http://twitter.com/share" class="socialite twitter-share" data-count="horizontal" data-via="YourTwitterHandle" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Twitter</span></a>
                
            </li>
            <li>
                <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="medium"  rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Google+</span>
                </a>
            </li>
            <li>
                <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Facebook</span>
                </a>
            </li>
            <li>
                <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share"  data-counter="right" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on LinkedIn</span>
                </a>
            </li>
            <li>
                <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="horizontal">
                    <span class="vhidden">Pin It!</span>
                </a>
            </li>
        </ul>
    
    <script type="text/javascript"  src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>
    
    
    <script type='text/javascript'>
    //<![CDATA[
    
            // add pinterest extension
            (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("'+c+'")})();')},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);
    
    var element ;
    element = document.getElementById('syb-social');
    element.onmouseover = function () {
        Socialite.load();
    };
    //]]>
    </script>

    Large Buttons Right Aligned

    <style type="text/css" >
    //<![CDATA[
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
    
    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */
    
    #sybSocial {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; right:20px;top:200px;}
    #sybSocial > li { display: block; margin: 0; padding: 10px;  }
    #sybSocial .socialite { display: block; position: relative; background: url('http://4.bp.blogspot.com/-w1rWniV6RO0/UCeUEh3hl4I/AAAAAAAAHIA/3xuG-HPLmpc/s1600/social-sprite.png') 0 0 no-repeat; }
    #sybSocial .socialite-loaded { background: none !important; }
    
    #sybSocial .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
    #sybSocial .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
    #sybSocial .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
    #sybSocial .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }
    #sybSocial .stumbleupon { width: 50px; height: 65px; background-position: -295px 0; }
    //]]>
    </style>
    <a href="http://www.stylifyyourblog.com" alt="Blogger Tutorials" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>
    
    <ul id="sybSocial" class="cf">
        <li>
                <a href="http://twitter.com/share" class="socialite twitter-share" data-via="YourTwitterHandle" data-count="vertical" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Twitter</span>
                </a>
            </li>
            <li>
                <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="tall" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Google+</span>
                </a>
            </li>
            <li>
                  <center>  <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Facebook</span>
                </a></center>
            </li>
            <li>
                <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="top" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on LinkedIn</span>
                </a>
            </li>
            <li><center>
                <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="vertical">
                    <span class="vhidden">Pin It!</span>
                </a>
            </center></li>
        </ul>
    
    
    <script type="text/javascript"  src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>
    
    
    <script type='text/javascript'>
    //<![CDATA[
    
            // add pinterest extension
            (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("'+c+'")})();')},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);
    
    var element ;
    element = document.getElementById('sybSocial');
    element.onmouseover = function () {
        Socialite.load();
    };
    //]]>
    </script>

    Large Buttons Left Aligned

    <style type="text/css" >
    //<![CDATA[
    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
    
    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */
    
    #sybSocial {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
    background-color: white; display: block; list-style: none; padding: 0; position:fixed; left:20px;top:200px;}
    #sybSocial > li { display: block; margin: 0; padding: 10px;  }
    #sybSocial .socialite { display: block; position: relative; background: url('http://4.bp.blogspot.com/-w1rWniV6RO0/UCeUEh3hl4I/AAAAAAAAHIA/3xuG-HPLmpc/s1600/social-sprite.png') 0 0 no-repeat; }
    #sybSocial .socialite-loaded { background: none !important; }
    
    #sybSocial .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
    #sybSocial .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
    #sybSocial .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
    #sybSocial .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }
    #sybSocial .stumbleupon { width: 50px; height: 65px; background-position: -295px 0; }
    //]]>
    </style>
    <a href="http://www.stylifyyourblog.com" alt="Blogger Tutorials" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>
    
    <ul id="sybSocial" class="cf">
        <li>
                <a href="http://twitter.com/share" class="socialite twitter-share" data-via="YourTwitterHandle" data-count="vertical" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Twitter</span>
                </a>
            </li>
            <li>
                <a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="tall" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Google+</span>
                </a>
            </li>
            <li>
                  <center>  <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Facebook</span>
                </a></center>
            </li>
            <li>
                <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="top" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on LinkedIn</span>
                </a>
            </li>
            <li><center>
                <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="vertical">
                    <span class="vhidden">Pin It!</span>
                </a>
            </center></li>
        </ul>
    
    
    <script type="text/javascript"  src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>
    
    
    <script type='text/javascript'>
    //<![CDATA[
    
            // add pinterest extension
            (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("'+c+'")})();')},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);
    
    var element ;
    element = document.getElementById('sybSocial');
    element.onmouseover = function () {
        Socialite.load();
    };
    //]]>
    </script>

    Note: For selectively displaying the widgets refer to Side Floating Share Buttons Post
    3. Save the Widget

    Hope this helps you in improving page load times and at the same time increasing sharing . In case you face any problem , feel free to ask

    Lazy Loading Social Share Buttons in Blogger using Socialite

    Every Social Network’s share buttons effect page load speed and size badly. Asynchronously loading the resources is one way to get around this problem. The lazy loading buttons I shared previously had a problem which only allowed single instance per page. Socialite addresses that issue and is much more versatile than the previous script. It has all the awesome features and still manages to keep its size under 5KB. Lets get started and see how to integrate it into your Blogger blog

    OnScroll Demo

    Socialite’s Features


  • No dependencies on any other JavaScript library or framework  
  • Loads external resources related to the buttons only when needed
  • Less than 5KB when compressed
  • More accessible and styleable defaults/fallbacks
  • Support for Twitter, Google+, Facebook and LinkedIn
  • Extensible with other social networks 
  • Mimics native implementation when activated
  • Supported in all browsers
  • Video Tutorial

    How to integrate into Blogger


    1. In the Blogger Dashboard , go to Template > Edit HTML and Tick the Expand Widget Preview option

    2. Now search for ]]></b:skin> tag and add the following CSS just before it

    .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
    
    /*
    .socialite-instance { display: none; opacity: 0; }
    .socialite-loaded .socialite-button { display: block; opacity: 1; }
    .socialite-button iframe { max-width: 100%; max-height: 100%; }
    */
    
    #social { display: block; list-style: none; padding: 0; margin-left: 205px;position:absolute; }
    #social > li { display: block; margin: 0; padding: 10px; float: left; }
    #social .socialite { display: block; position: relative; background: url('http://4.bp.blogspot.com/-w1rWniV6RO0/UCeUEh3hl4I/AAAAAAAAHIA/3xuG-HPLmpc/s1600/social-sprite.png') 0 0 no-repeat; }
    #social .socialite-loaded { background: none !important; }
    
    #social .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
    #social .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
    #social .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
    #social .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }
    #social .stumbleupon { width: 50px; height: 65px; background-position: -295px 0; }
    
    
    #social2-load { margin: 0 0 0.625em 0; font-weight: bold; padding: 5px; }
    
    #social2 { display: block; list-style: none; padding: 10px; margin: 10px; }
    #social2 > li { display: block; margin: 0;float:left; }
    #social2 .socialite { display: block; position: relative; width: 150px; height: 30px; background: url('http://3.bp.blogspot.com/-lGVQZowcc2k/UCeUCQ3eqoI/AAAAAAAAHH4/BV8ILPyDIGY/s1600/custom-default.png') 0 0 no-repeat; }
    #social2 .socialite-loaded { background: none; }
    
    #social2 .twitter-share { background-position: 0 0; }
    #social2 .googleplus-one { background-position: 0 -45px; }
    #social2 .facebook-like { background-position: 0 -90px; }
    #social2 .linkedin-share { background-position: 0 -135px; }
    #social2 .pinterest-pinit { background-position: 0 -175px; }

    Note : In case you can’t find or its commented out then add the CSS in a style tag just before the </head> tag

    3. Now Search for </body> and paste the following code just before it.

    <script type="text/javascript"  src="http://socialitejs.com/socialite.js" ></script>
    <script type='text/javascript'>
    //<![CDATA[
    
            // add pinterest extension
            (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("'+c+'")})();')},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);
    
    window.onscroll = function () {
        Socialite.load();
    };
    //]]>
    </script>

    4. Now you have a option that where you want them to appear . Here we will be displaying them just under the Post Title. Search for <div class=’post-header’/> or <div class=’post-header’> and add the following code just below it.

    For Small Buttons

     <ul id="social2" class="cf">
            <li>
                <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;' class="socialite twitter-share" expr:data-text='data:post.title' expr:data-url='data:post.url' data-count="horizontal" data-via="YourTwitterHandle" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Twitter</span>
                </a>
            </li>
            <li>
                <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;' class="socialite googleplus-one" data-size="medium" expr:data-href='data:post.url' rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Google+</span>
                </a>
            </li>
            <li>
                <a class="socialite facebook-like" expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;' expr:data-href='data:post.url' data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Facebook</span>
                </a>
            </li>
            <li>
                <a expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url  + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippet' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;' class="socialite linkedin-share" expr:data-url='data:post.url' data-counter="right" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on LinkedIn</span>
                </a>
            </li>
            <li>
                <a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url  + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + data:post.thumbnailUrl' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;' class="socialite pinterest-pinit" data-count-layout="horizontal">
                    <span class="vhidden">Pin It!</span>
                </a>
            </li>
        </ul>

    For Large Buttons

    <ul id="social" class="cf">
            <li>
                <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;'  class="socialite twitter-share" data-via="YourTwitterHandle" expr:data-text='data:post.title' expr:data-url='data:post.url' data-count="vertical" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Twitter</span>
                </a>
            </li>
            <li>
                <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;'  class="socialite googleplus-one" data-size="tall" expr:data-href='data:post.url' rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Google+</span>
                </a>
            </li>
            <li>
                <a class="socialite facebook-like" expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;' expr:data-href='data:post.url' data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on Facebook</span>
                </a>
            </li>
            <li>
                <a expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url  + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippet' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;' class="socialite linkedin-share" expr:data-url='data:post.url' data-counter="top" rel="nofollow" target="_blank">
                    <span class="vhidden">Share on LinkedIn</span>
                </a>
            </li>
            <li>
                <a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url  + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + data:post.thumbnailUrl' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;'  class="socialite pinterest-pinit" data-count-layout="vertical">
                    <span class="vhidden">Pin It!</span>
                </a>
            </li>
        </ul>

    5. Save Your Template and Socialite will do the rest !

    Options


    The best part about it is that nearly everything in it can be customized or changed if needed. We will be discussing about how to add other networks to it

    Adding another Social Network

    If you observed in the above code , The code for Pinterest had to be added separately as it is not included in the Socialite.js file . Similarly other networks can be added like Buffer , Spotify , Github , etc. Download all the code related to the extensions from GitHub and then you can add them as you wish

    The effects on Page Load Speed and Page Size
    From the start I have been saying that the Page Speed and Size are most effected by the Normal Social Sharing buttons. Now lets see by how much

    Without SocialiteDownload PDF of Report

    With SocialiteDownload PDF of Report

    As you see there is gain of around 0.4 seconds only but the page size reduction is around a whooping 280KB ! You can check these two yourself using GTmetrix

    This tutorial was sans jQuery so as to maximize the benefit on Page Size. You can use it to have more advanced control over the loading of the resources. I will be doing another tutorial about that soon.

    Now about these Social Sharing buttons , there has been a debate going on the internet that these buttons are useless and act as partial advertising for the networks. Would love to hear your opinion about this issue . Also feel free to ask if you face any problem implementing these in your blog

    Installing IntenseDebate Comments in Blogger

    Intense Debate for BloggerIntenseDebate is feature-rich comment system which can be used in place of the default Blogger commenting system. The Blogger’s commenting system is improving by the day with features like Threaded Comments being introduced but still it lacks some features that are inherent in many other commenting systems available across the net. In this tutorial we will seeing how to install Intense Debate on your blog and then some options that can be customized. Also we will be seeing how to enable IntenseDebate Comments on the Mobile Version of the blog

    Demo

    Video Tutorial


    Steps by Step Guide
    1. Go to https://intensedebate.com/home  and either Sign Up if you are new or Login if you already have a account.

    Intense Debate Home Page

    2. Once logged in you will be in the Dashboard , Here in the Menu above , select Sites option and then select Add blog/site option

    Add New Site in Intense Debate

    3. Now enter the URL of your blog and proceed further

    Enter URL of website for intense debate

    4.  Here you will be asked to upload the template of your blog. To do so you will need  Go to Template tab in your blog , there in the Upper Right corner you will see a Backup/Restore option , in it there will be option to download the template . Now coming back to the IntenseDebate site , upload the downloaded copy and proceed further

    Upload template to intense debate
    download template from blogger

    5. Now you will be presented with the code which you have to put inplace of the current template . To do that go to Templates > Edit HTML and then paste all code their and Save

    copy whole template from blogger

    Blogger Edit HTML

    6. This will install IntenseDebate Comments and you will start seeing them inplace of the default commenting system

    Options

    To checkout the various options available , in the Dashboard ,select your blog’s name from the Sites Dropdown Menu
    select your site from dashboard

    Comments Settings

    It contains all the options related to type of login that you allow , like the Facebook login , Twitter login ,etc . Also there are options for enabling Subscribing to the comments , threaded comments , voting on each comments , etc.

    comment settings for Intensedebate comments

    Layout Settings

    This contains options for changing the Thumbnail size of pictures and basic styling of the Reply button
    Layout settings IntenseDebate comments

    Plugins
    This is one of the biggest reason why people shift to Intense Debate . It allows installing custom plugins in the Commenting system itself. The most used one is the Comment Luv plugin . Other plugins  like ReTweet button for each comment and PollDaddy polls are also available.

    Plugin menu intensedebate

    Enabling it on Mobile Device
    After installing IntenseDebate I witnessed that the Mobile version of the blog still showed the Blogger commenting system . To overcome this I came with a simple solution. Go to Template > Click the Gears Icon under the Mobile View of the Blog and in the template select the Custom option . This is will enable IntenseDebate on mobile devices as well

    Mobile Demo

    mobile template select for blogger new dashboard
    Hope this tutorial helps you in installing Intense Debate on Blogger , If you are using a highly customized template then these steps might fail to work , In that case I would be glad to help you setting it up on your blog .

    Five CSS3 Breadcrumb Designs

    breadcrumb designs showcaseBreadcrumbs are an alternative navigation. Not only do they act as a visual aid to inform the reader about their position in the blog’s hierarchy but also give a more structured feel. The previous post was about how to integrate Breadcrumbs into Blogger and this one is a showcase of 5 designs which you can use in place of the default design provided before. All of these designs use CSS3 extensively with no use of images anywhere. Each of them is beautifully styled and should integrate well with your blog’s current design.

    Before You get Started
    Make sure that you already have Breadcrumbs in your blog. In case you haven’t put them , follow this tutorial first before proceeding further. Also if you putting them now , then don’t include any CSS mentioned in the steps .

    Make sure remove all the CSS related to the Breadcrumbs from your blog

    We will be using a common HTML structure for all these design , it is something like

     <div class='breadcrumbs' >
    <a class='first' href='#' ><span>Home</span></a>
    <a href='#' ><span>CSS3</span></a>
    <a href='#' ><span>Widgets</span></a>
    </div>
    

    Now lets get started , just add the CSS in your template manually or add it directly using the One-Click button

    Design I

    breadcrumb designed in css3

    Demo

    This is the image-less version of the default style.
    The credit goes to Jake Rocheleau

    Add it directly

    <style type=”text/css” >
    //<![CDATA[
    .breadcrumbs{list-style:none;margin:0}
    .breadcrumbs a:last-child{border-right-width:1px!important;border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px}
    .breadcrumbs a{color:#666;display:block;float:left;font-size:12px;position:relative;text-decoration:none;border:1px solid #D9D9D9;border-right-width:0;background-image:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1,endColorstr=#f5f5f5);-ms-filter:”progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)”;background-repeat:no-repeat;background-position:100% 0;z-index:1;padding:7px 16px 7px 19px}
    .breadcrumbs a:hover{border-top-color:#c4c4c4;border-bottom-color:#c4c4c4;background-image:0 45% #f8f8f8 73%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8,endColorstr=#f1f1f1);-ms-filter:”progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1)”;color:#333;-moz-box-shadow:0 2px 2px #e8e8e8;-webkit-box-shadow:0 2px 2px #e8e8e8;box-shadow:0 2px 2px #e8e8e8}
    .first,.first:hover{z-index:30!important;border-top-left-radius:5px;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px}
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

    Or Add it manually

    CSS

    .breadcrumbs{list-style:none;margin:0}
    .breadcrumbs a:last-child{border-right-width:1px!important;border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px}
    .breadcrumbs a{color:#666;display:block;float:left;font-size:12px;position:relative;text-decoration:none;border:1px solid #D9D9D9;border-right-width:0;background-image:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1,endColorstr=#f5f5f5);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)";background-repeat:no-repeat;background-position:100% 0;z-index:1;padding:7px 16px 7px 19px}
    .breadcrumbs a:hover{border-top-color:#c4c4c4;border-bottom-color:#c4c4c4;background-image:0 45% #f8f8f8 73%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8,endColorstr=#f1f1f1);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1)";color:#333;-moz-box-shadow:0 2px 2px #e8e8e8;-webkit-box-shadow:0 2px 2px #e8e8e8;box-shadow:0 2px 2px #e8e8e8}
    .first,.first:hover{z-index:30!important;border-top-left-radius:5px;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px}
    

    Design II

    breadcrumb in css3

    Demo

    The inspiration for this came from a Dribbble shot by Maleika E. A.

    Add it directly

    <style type=”text/css” >
    //<![CDATA[
    .breadcrumbs{list-style:none;margin:0}
    .breadcrumbs a{text-decoration:none;color:#444;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:0 100px 100px 0;-webkit-border-radius:0 100px 100px 0;border-radius:0 100px 100px 0;margin:0 -16px 0 0;padding:10px 22px 10px 30px}
    .breadcrumbs a:nth-child(odd){border:1px solid #BFC0B0;box-shadow:4px 0 6px 0 #999A8A;background-image:linear-gradient(tobottomright,#BFC0B00%,#CECFC1100%)}
    .breadcrumbs a:nth-child(even){color:#FFF;border:1px solid #999A8A;box-shadow:4px 0 6px 0 #BFC0B0;background-image:linear-gradient(tobottomright,#999A8A0%,#A5A895100%)}
    .breadcrumbs a:nth-child(even):hover{color:#333}
    .breadcrumbs a:nth-child(odd):hover{color:#FFF}
    .first,.first:hover{z-index:30!important}
    .breadcrumbs a:nth-child(2){z-index:29!important}
    .breadcrumbs a:last-child{box-shadow:4px 0 6px 0 transparent!important}
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

    Or Add it manually

    CSS

    .breadcrumbs{list-style:none;margin:0}
    .breadcrumbs a{text-decoration:none;color:#444;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:0 100px 100px 0;-webkit-border-radius:0 100px 100px 0;border-radius:0 100px 100px 0;margin:0 -16px 0 0;padding:10px 22px 10px 30px}
    .breadcrumbs a:nth-child(odd){border:1px solid #BFC0B0;box-shadow:4px 0 6px 0 #999A8A;background-image:linear-gradient(tobottomright,#BFC0B00%,#CECFC1100%)}
    .breadcrumbs a:nth-child(even){color:#FFF;border:1px solid #999A8A;box-shadow:4px 0 6px 0 #BFC0B0;background-image:linear-gradient(tobottomright,#999A8A0%,#A5A895100%)}
    .breadcrumbs a:nth-child(even):hover{color:#333}
    .breadcrumbs a:nth-child(odd):hover{color:#FFF}
    .first,.first:hover{z-index:30!important}
    .breadcrumbs a:nth-child(2){z-index:29!important}
    .breadcrumbs a:last-child{box-shadow:4px 0 6px 0 transparent!important}
    

    Design III

    breadcrumb

    Demo

    All thanks to Showcaze for this

    Add it directly

    <style type=”text/css” >
    //<![CDATA[
    .breadcrumbs{zoom:1;line-height:40px;height:40px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px #CCC solid;-webkit-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-ms-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-o-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);letter-spacing:2px;margin:0;padding:0}
    .breadcrumbs:before,.breadcrumbs:after{display:table;content:””;zoom:1}
    .breadcrumbs:after{clear:both}
    .breadcrumbs a{color:#999}
    .breadcrumbs > a{position:relative;height:40px;overflow:hidden;float:left;padding:0 40px 0 20px}
    .breadcrumbs > a:after{content:”;position:absolute;right:8px;top:-1px;height:40px;width:40px;border-right:3px rgba(0,0,0,0.1) solid;border-bottom:3px rgba(0,0,0,0.1) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
    .breadcrumbs > a:before{content:”;position:absolute;right:11px;top:0;height:40px;width:40px;border-right:1px rgba(0,0,0,0.2) solid;border-bottom:1px rgba(0,0,0,0.2) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
    .breadcrumbs a :last-child{color:#333}
    .breadcrumbs > a:last-child span:before,.breadcrumbs > a:last-child span:after{display:none}
    .breadcrumbs a:hover{text-decoration:none!important}
    .breadcrumbs span:hover{color:#666}
    .breadcrumbs > a:hover:after{border-color:rgba(0,0,0,0.2)}
    .breadcrumbs > a:hover:before{border-color:rgba(0,0,0,0.3)}
    .breadcrumbs span{margin-top:1px;color:#999}
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

    Or Add it manually

    CSS

    .breadcrumbs{zoom:1;line-height:40px;height:40px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px #CCC solid;-webkit-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-ms-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-o-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);letter-spacing:2px;margin:0;padding:0}
    .breadcrumbs:before,.breadcrumbs:after{display:table;content:"";zoom:1}
    .breadcrumbs:after{clear:both}
    .breadcrumbs a{color:#999}
    .breadcrumbs > a{position:relative;height:40px;overflow:hidden;float:left;padding:0 40px 0 20px}
    .breadcrumbs > a:after{content:'';position:absolute;right:8px;top:-1px;height:40px;width:40px;border-right:3px rgba(0,0,0,0.1) solid;border-bottom:3px rgba(0,0,0,0.1) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
    .breadcrumbs > a:before{content:'';position:absolute;right:11px;top:0;height:40px;width:40px;border-right:1px rgba(0,0,0,0.2) solid;border-bottom:1px rgba(0,0,0,0.2) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
    .breadcrumbs a :last-child{color:#333}
    .breadcrumbs > a:last-child span:before,.breadcrumbs > a:last-child span:after{display:none}
    .breadcrumbs a:hover{text-decoration:none!important}
    .breadcrumbs span:hover{color:#666}
    .breadcrumbs > a:hover:after{border-color:rgba(0,0,0,0.2)}
    .breadcrumbs > a:hover:before{border-color:rgba(0,0,0,0.3)}
    .breadcrumbs span{margin-top:1px;color:#999}
    

    Want to get these updates straight to your Inbox , Then Subscribe !

    Design IV

    breadcrumb designed css3

    Demo

    Partly designed by me

    Add it directly

    <style type=”text/css” >
    //<![CDATA[
    .breadcrumbs{list-style:none;margin:0}
    .breadcrumbs a span::after{background:#DDD;content:””;height:2.5em;margin-top:-1.25em;position:absolute;right:-1em;top:50%;width:2.5em;z-index:-1;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-moz-border-radius:.4em;-webkit-border-radius:.4em;border-radius:.4em}
    .breadcrumbs a{text-decoration:none;color:#444;background:#DDD;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:.4em 0 0 .4em;-webkit-border-radius:.4em 0 0 .4em;border-radius:.4em 0 0 .4em;margin:0 2em 0 0;padding:.7em 1em .7em 2em}
    .breadcrumbs a:hover,.breadcrumbs a:hover > span:after{background:#f1f1f1;color:#333}
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

    Or Add it manually

    CSS

    .breadcrumbs{list-style:none;margin:0}
    .breadcrumbs a span::after{background:#DDD;content:"";height:2.5em;margin-top:-1.25em;position:absolute;right:-1em;top:50%;width:2.5em;z-index:-1;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-moz-border-radius:.4em;-webkit-border-radius:.4em;border-radius:.4em}
    .breadcrumbs a{text-decoration:none;color:#444;background:#DDD;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:.4em 0 0 .4em;-webkit-border-radius:.4em 0 0 .4em;border-radius:.4em 0 0 .4em;margin:0 2em 0 0;padding:.7em 1em .7em 2em}
    .breadcrumbs a:hover,.breadcrumbs a:hover > span:after{background:#f1f1f1;color:#333}
    

    Design V

    breadcrumb design css3

    Demo

    Again special thanks to Showcaze for this awesome design

    Add it directly

    <style type=”text/css” >
    //<![CDATA[
    .breadcrumbs{list-style:none;height:36px;line-height:36px;padding-left:36px;margin:0}
    .breadcrumbs > a{position:relative;float:left;margin-left:-36px;-moz-border-radius:18px;-webkit-border-radius:18px;-ms-border-radius:18px;-o-border-radius:18px;border-radius:18px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-ms-box-shadow:0 0 5px rgba(0,0,0,0.5);-o-box-shadow:0 0 5px rgba(0,0,0,0.5);box-shadow:0 0 5px rgba(0,0,0,0.5)}
    .breadcrumbs> a:before{content:”;position:absolute;z-index:-1;left:-6px;top:-6px;width:100%;height:100%;background:#D5D5D5;-moz-border-radius:22px;-webkit-border-radius:22px;-ms-border-radius:22px;-o-border-radius:22px;border-radius:22px;border:1px #C5C5C5 solid;padding:5px}
    .breadcrumbs > a > span{color:#666;float:left;padding:0 46px 0 40px}
    .breadcrumbs a{list-style:none}
    .breadcrumbs a::before,.breadcrumbs a::after,.breadcrumbs a span::before,.breadcrumbs a span::after{content:””;position:absolute;top:50%;left:0;display:none}
    .breadcrumbs a span::before,.breadcrumbs a span::after{background:transparent;margin:-8px 0 0}
    .breadcrumbs > a:last-child > span{color:#333;padding:0 46px 0 60px}
    .breadcrumbs > a:hover,.breadcrumbs > a:last-child{background-color:#EEE;background-image:linear-gradient(tobottom,#EEE,#DDD)}
    .breadcrumbs > a:hover > span{color:#FFF;padding:0 66px 0 60px}
    .breadcrumbs > a:last-child:hover > span{padding:0 46px 0 60px}
    .first,.first:hover{z-index:30!important}
    .breadcrumbs a:nth-child(2){z-index:31!important}
    .breadcrumbs a:nth-child(3){z-index:32!important}
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

    Or Add it manually

    CSS

    .breadcrumbs{list-style:none;height:36px;line-height:36px;padding-left:36px;margin:0}
    .breadcrumbs > a{position:relative;float:left;margin-left:-36px;-moz-border-radius:18px;-webkit-border-radius:18px;-ms-border-radius:18px;-o-border-radius:18px;border-radius:18px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-ms-box-shadow:0 0 5px rgba(0,0,0,0.5);-o-box-shadow:0 0 5px rgba(0,0,0,0.5);box-shadow:0 0 5px rgba(0,0,0,0.5)}
    .breadcrumbs> a:before{content:'';position:absolute;z-index:-1;left:-6px;top:-6px;width:100%;height:100%;background:#D5D5D5;-moz-border-radius:22px;-webkit-border-radius:22px;-ms-border-radius:22px;-o-border-radius:22px;border-radius:22px;border:1px #C5C5C5 solid;padding:5px}
    .breadcrumbs > a > span{color:#666;float:left;padding:0 46px 0 40px}
    .breadcrumbs a{list-style:none}
    .breadcrumbs a::before,.breadcrumbs a::after,.breadcrumbs a span::before,.breadcrumbs a span::after{content:"";position:absolute;top:50%;left:0;display:none}
    .breadcrumbs a span::before,.breadcrumbs a span::after{background:transparent;margin:-8px 0 0}
    .breadcrumbs > a:last-child > span{color:#333;padding:0 46px 0 60px}
    .breadcrumbs > a:hover,.breadcrumbs > a:last-child{background-color:#EEE;background-image:linear-gradient(tobottom,#EEE,#DDD)}
    .breadcrumbs > a:hover > span{color:#FFF;padding:0 66px 0 60px}
    .breadcrumbs > a:last-child:hover > span{padding:0 46px 0 60px}
    .first,.first:hover{z-index:30!important}
    .breadcrumbs a:nth-child(2){z-index:31!important}
    .breadcrumbs a:nth-child(3){z-index:32!important}
    

    Do you have any other designs to add to these ? Feel free to add them via the comments , I will surely do a another post about them. Lastly if you are having any kind of problems then feel free to express them below

    Also the new Forum is up so don’t forget to check it out

    Breadcrumbs for Blogger

    breadcrumbs bloggerBreadcrumbs are navigational elements that are used to display the depth at which a user currently is in a website. Normally they are present near the top preferably just above post heading or the main heading of a page. In Blogger there are no real sub-directories for which you can show a hierarchical path so we will be using Labels as workaround. We will also be discussing how to display single or multiple Labels in Breadcrumbs and how you make them appear in Google Search Results using Microdata specification


    Demo


    Video Tutorial


    Step by Step Guide


    1.
    Go to Template > Edit HTML and tick the Expand Widget Preview Option


    2.
     Now search for <div class=’blog-posts hfeed’> and add the following code after it

    <b:if cond='data:blog.homepageUrl != data:blog.url'> 
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
          <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>  
          <a expr:href='data:blog.url'> <span itemprop='title'><data:blog.pageName/></span> </a>
        </div>
     <b:else/>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:loop values='data:posts' var='post'>
           <b:if cond='data:post.labels'>
             <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
               <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a> 
               <b:loop values='data:post.labels' var='label'>
                <b:if cond='data:label.isLast == &quot;true&quot;'>
                 <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a> 
                 </b:if>
               </b:loop>
              </div>
             <b:else/>
              <div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
               <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a> 
               <a href='#'><span> Unlabelled</span></a>
             </div>
           </b:if>
         </b:loop>
       <b:else/>
        <b:if cond='data:blog.pageType == &quot;archive&quot;'>
          <div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
           <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>  
           <a expr:href='data:blog.url'><span>Archives for <data:blog.pageName/></span></a>
          </div>
       <b:else/>
        <b:if cond='data:blog.pageType == &quot;index&quot;'>
          <b:if cond='data:blog.pageName == &quot;&quot;'>
          <b:else/>
           <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
            <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
            <a expr:href='data:blog.url'><span itemprop='title'>Posts filed under <data:blog.pageName/></span></a>
           </div>
         </b:if>
        </b:if>
       </b:if>
      </b:if>
     </b:if>
    </b:if>

    You might find multiple instances of the term to be searched , add the code only under that , where you can see this code –> <b:includable id=’main’ var=’top’>


    3.
    Now search for ]]></b:skin> and add the following CSS just before it

    .breadcrumbs {
    list-style: none;
    margin: 0;
    }
    .breadcrumbs  a {
    color: #666;
    display: inline-block;
    font-size: 12px;
    margin-left: -15px;
    padding: 7px 17px 11px 25px;
    position: relative;
    text-decoration: none;
    vertical-align: top;
    background-image: url('http://2.bp.blogspot.com/-h7gddS-r9vg/UB5M7efPcMI/AAAAAAAAHBo/hGj9ljonUvM/s1600/hc_yarnlett_global.png');
    background-repeat: no-repeat;
    background-position: 100% 0;
    z-index: 1;
    }
    .breadcrumbs  a:hover   {
    background-position: 100% -48px;
    color: #333;
    }
    .first , .first:hover {z-index: 30 !important;}
    .first span {
    background-image: url('http://2.bp.blogspot.com/-h7gddS-r9vg/UB5M7efPcMI/AAAAAAAAHBo/hGj9ljonUvM/s1600/hc_yarnlett_global.png');
    margin-left: -26px;
    padding: 7px 6px 11px 10px;
    z-index: 12 !important;}
    .breadcrumbs a:nth-child(2) {z-index:29 !important;}
    .breadcrumbs a span:hover {
    background-position: 0 -48px;
    color: #333;
    }


    4.
    Save Your Template and Now the Breadcrumbs are going to start appearing in your Post Pages , Label Pages , Archive Pages as well as the Static Pages

    Some Options

    Display Single or Multiple Labels

    The above code just shows the Last assigned Label of the post as the breadcrumb, If you want to show all the Labels as Breadcrumbs then Remove the highlighted Lines in Step 2 (Number 14 and 16) and add the following CSS

    .breadcrumbs a:nth-child(3) {z-index:28 !important;}
    .breadcrumbs a:nth-child(4) {z-index:27 !important;}
    .breadcrumbs a:nth-child(5) {z-index:26 !important;}
    .breadcrumbs a:nth-child(6) {z-index:25 !important;}
    .breadcrumbs a:nth-child(7) {z-index:24 !important;}
    .breadcrumbs a:nth-child(8) {z-index:23 !important;}
    .breadcrumbs a:nth-child(9) {z-index:22 !important;}
    .breadcrumbs a:nth-child(10) {z-index:21 !important;}
    .breadcrumbs a:nth-child(11) {z-index:20 !important;}
    .breadcrumbs a:nth-child(12) {z-index:19 !important;}
    .breadcrumbs a:nth-child(13) {z-index:18 !important;}

    In my experience displaying multiple Labels in Breadcrumbs cost me the Authorship in Google Search. So I suggest using a Single Label only . If you want to use Multiple Labels then I suggest to remove the Microdata specification from it so that there is no risk involved. I don’t at all want you to lose your Google Authorship. I will be doing a detailed post about it soon.

     
    What is responsible for making them appear in the Google

    This is due to Microdata specification used in code. It uses simple HTML tags and attributes to assign descriptive names to items and properties. Google understands it ,interprets them and show them in the serch results

    Design

    The design this widget uses is the design being used by Google Support currently. It is simple and aesthetic. I will be sharing some more Breadcrumb designs in the days to come.
    Who Wrote this Code
    This code was originally written by Hoctro , then modified by BloggerPlugins to include the RDFa specification and some other improvements. I have replaced the RDFa Specification by the Microdata Specification as it more expressive and easier to understand . Also some minor changes have been done to the if-else ladder and a completely different design is used.

    In case there is some problem while implementing it or using it then feel free to ask in the comments

    Blogger Label Widget Style #3 and #4

    Tag Cloud design

    Tag Clouds are used to display all the categories or labels present in a blog. The inherent design of this widget in Blogger is very minimal and has a lot of space for creativity. In this post we will be showcasing two Label Widget designs which you can easily integrate within your blog. Both these use :after and :before selectors to manipulate the tag’s design at the edges. Also CSS3 Gradients and Box-Shadow properties are also used to give it more sophisticated and peppy look . Lets get started then

    Just a Second
    Before you get started make sure that your Blog has the Label Widget present already and set the Display option to Cloud . After you have done this then only proceed to the next

    Also Don’t forget to checkout the Design #1 and Design #2 of the Label Styles.

    Design #3

    Label tag cloud design blogger

    Demo

    To add using One Click Installer Method

    <style type=”text/css”>
    /*<![CDATA[*/
    .label-size{
    margin:0;
    padding:0;
    position:relative;
    }
    .label-size a{
    float:left;
    height:24px;
    line-height:24px;
    position:relative;
    font-size:12px;
    margin-bottom: 9px;
    margin-left:20px;
    padding:0 10px 0 12px;
    background:#0089e0;
    color:#fff;
    text-decoration:none;
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    border-bottom-right-radius:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-right-radius:4px;
    border-top-right-radius:4px;
    }
    .label-size a:before{
    content:””;
    float:left;
    position:absolute;
    top:0;
    left:-12px;
    width:0;
    height:0;
    border-color:transparent #0089e0 transparent transparent;
    border-style:solid;
    border-width:12px 12px 12px 0;
    }
    .label-size a:after{
    content:””;
    position:absolute;
    top:10px;
    left:0;
    float:left;
    width:4px;
    height:4px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    background:#fff;
    -moz-box-shadow:-1px -1px 2px #004977;
    -webkit-box-shadow:-1px -1px 2px #004977;
    box-shadow:-1px -1px 2px #004977;
    }

    .label-size a:hover{background:#555;}
    .label-size a:hover:before{border-color:transparent #555 transparent transparent;}
    /*]]>*/
    </style>
    <a href=”http://www.stylifyyourblog.com” title=”Stylify Your Blog” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

    Or just add the following CSS in your Blog(preferably before the ]]></b:skin> tag in the Edit HTML of the Template)

    .label-size{
     margin:0;
     padding:0;
     position:relative;
     } 
     .label-size a{
     float:left;
     height:24px;
     line-height:24px;
     position:relative;
     font-size:12px;
     margin-bottom: 9px;
     margin-left:20px;
     padding:0 10px 0 12px;
     background:#0089e0;
     color:#fff;
     text-decoration:none;
     -moz-border-radius-bottomright:4px;
     -webkit-border-bottom-right-radius:4px; 
     border-bottom-right-radius:4px;
     -moz-border-radius-topright:4px;
     -webkit-border-top-right-radius:4px; 
     border-top-right-radius:4px; 
     } 
    .label-size a:before{
     content:"";
     float:left;
     position:absolute;
     top:0;
     left:-12px;
     width:0;
     height:0;
     border-color:transparent #0089e0 transparent transparent;
     border-style:solid;
     border-width:12px 12px 12px 0;  
     } 
    .label-size a:after{
     content:"";
     position:absolute;
     top:10px;
     left:0;
     float:left;
     width:4px;
     height:4px;
     -moz-border-radius:2px;
     -webkit-border-radius:2px;
     border-radius:2px;
     background:#fff;
     -moz-box-shadow:-1px -1px 2px #004977;
     -webkit-box-shadow:-1px -1px 2px #004977;
     box-shadow:-1px -1px 2px #004977;
     }  
    
    .label-size a:hover{background:#555;} 
    .label-size a:hover:before{border-color:transparent #555 transparent transparent;}

    Want to get these updates straight to your Inbox , Then Subscribe !

    Design #4

    Label tag design for blog

    Demo

    To add using One Click Installer Method

    <style type=”text/css”>
    /*<![CDATA[*/

    .label-size a {
    display: inline-block;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    padding: 4px 7px;
    font-family: ‘Helvetica Neue’, helvetica, sans-serif;
    font-size: 12px;
    line-height: 14px;
    height: 14px;
    vertical-align: middle;
    margin-bottom: 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    }

    .label-size a {
    color: #996633;
    border: 1px solid #DDA13C;

    background: rgb(238,177,75);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
    background: -webkit-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -o-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -ms-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#eeb14b’, endColorstr=’#cc912d’,GradientType=0 );
    }

    .label-size a:before {
    content: ‘2022’;
    color: #FFFFFF;
    margin-right: 4px;
    font-size: 15px;
    line-height: 13px;
    height: 13px;
    vertical-align: text-top;

    text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
    }

    .label-size a:hover {
    text-decoration: none;

    background: rgb(240,183,86);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
    background: -webkit-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -o-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -ms-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f0b756′, endColorstr=’#d6a044′,GradientType=0 );
    }
    /*]]>*/
    </style>
    <a href=”http://www.stylifyyourblog.com” title=”Stylify Your Blog” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

    Or just add the following CSS in your Blog(preferably before the ]]></b:skin> tag in the Edit HTML of the Template)

    .label-size a {
        display: inline-block;
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
        padding: 4px 7px;
        font-family: 'Helvetica Neue', helvetica, sans-serif;
        font-size: 12px;
        line-height: 14px;
        height: 14px;
        vertical-align: middle;
        margin-bottom: 6px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        
        -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
        -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    }
    
    
    .label-size a {
        color: #996633;
        border: 1px solid #DDA13C;
        
        background: rgb(238,177,75);
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top,  rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
        background: -webkit-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
        background: -o-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
        background: -ms-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
        background: linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 );
    }
    
    .label-size a:before  {
        content: '2022';
        color: #FFFFFF;
        margin-right: 4px;
        font-size: 15px;
        line-height: 13px;
        height: 13px;
        vertical-align: text-top;
        
        text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
    }
    
    .label-size a:hover {
        text-decoration: none;
        
        background: rgb(240,183,86);
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top,  rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
        background: -webkit-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
        background: -o-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
        background: -ms-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
        background: linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 );
    } 

    The credit goes to Fublo Blog for designing such great Tag designs , I have made them usable for Blogger Users

    There are more Label designs that I will be sharing in the coming days , so stay tuned