Infinite Scrolling in Blogger

infinity Symbol

Infinite Scrolling refers to the ability to continuously load new content on a page without refreshing it which gives an appearance of endlessness. It is used by major sites like Google+ , Facebook and Twitter and pretty successfully at that. The biggest benefit being exposure to more content and faster browsing . We will see how to integrate it into our Blogger blog by using Infinite Ajax Scroll jQuery plugin

Features

1. Faster Loading
2. Content Exposure increase many fold
3. More intuitive for Touch devices
4. Best suited for image-heavy blogs
5. Simplified Navigation
6. Higher user Engagement 

Adding it to your Blog

Across the Whole Blog
It will work on the Home Page , Label Pages , Archive Pages as well as Post Pages ( the previous post will be loaded in full )

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js’></script>
<script type=’text/javascript’>
//<![CDATA[
(function($){‘use strict’;Date.now=Date.now||function(){return+new Date()};$.ias=function(g){var h=$.extend({},$.ias.defaults,g);var i=new $.ias.util();var j=new $.ias.paging(h.scrollContainer);var k=(h.history?new $.ias.history():false);var l=this;function init(){var d;j.onChangePage(function(a,b,c){if(k){k.setPage(a,c)}h.onPageChange.call(this,a,c,b)});reset();if(k&&k.havePage()){stop_scroll();d=k.getPage();i.forceScrollTop(function(){var a;if(d>1){paginateToPage(d);a=get_scroll_threshold(true);$(‘html, body’).scrollTop(a)}else{reset()}})}return l}init();function reset(){hide_pagination();h.scrollContainer.scroll(scroll_handler)}function scroll_handler(){var a,scrThreshold;a=i.getCurrentScrollOffset(h.scrollContainer);scrThreshold=get_scroll_threshold();if(a>=scrThreshold){if(get_current_page()>=h.triggerPageThreshold){stop_scroll();show_trigger(function(){paginate(a)})}else{paginate(a)}}}function stop_scroll(){h.scrollContainer.unbind(‘scroll’,scroll_handler)}function hide_pagination(){$(h.pagination).hide()}function get_scroll_threshold(a){var b,threshold;b=$(h.container).find(h.item).last();if(b.size()===0){return 0}threshold=b.offset().top+b.height();if(!a){threshold+=h.thresholdMargin}return threshold}function paginate(d,e){var f;f=$(h.next).attr(‘href’);if(!f){if(h.noneleft){$(h.container).find(h.item).last().after(h.noneleft)}return stop_scroll()}if(h.beforePageChange&&$.isFunction(h.beforePageChange)){if(h.beforePageChange(d,f)===false){return}}j.pushPages(d,f);stop_scroll();show_loader();loadItems(f,function(a,b){var c=h.onLoadItems.call(this,b),curLastItem;if(c!==false){$(b).hide();curLastItem=$(h.container).find(h.item).last();curLastItem.after(b);$(b).fadeIn()}f=$(h.next,a).attr(‘href’);$(h.pagination).replaceWith($(h.pagination,a));remove_loader();hide_pagination();if(f){reset()}else{stop_scroll()}h.onRenderComplete.call(this,b);if(e){e.call(this)}})}function loadItems(b,c,d){var e=[],container,startTime=Date.now(),diffTime,self;d=d||h.loaderDelay;$.get(b,null,function(a){container=$(h.container,a).eq(0);if(0===container.length){container=$(a).filter(h.container).eq(0)}if(container){container.find(h.item).each(function(){e.push(this)})}if(c){self=this;diffTime=Date.now()-startTime;if(diffTime<d){setTimeout(function(){c.call(self,a,e)},d-diffTime)}else{c.call(self,a,e)}}},’html’)}function paginateToPage(a){var b=get_scroll_threshold(true);if(b>0){paginate(b,function(){stop_scroll();if((j.getCurPageNum(b)+1)<a){paginateToPage(a);$(‘html,body’).animate({‘scrollTop’:b},400,’swing’)}else{$(‘html,body’).animate({‘scrollTop’:b},1000,’swing’);reset()}})}}function get_current_page(){var a=i.getCurrentScrollOffset(h.scrollContainer);return j.getCurPageNum(a)}function get_loader(){var a=$(‘.ias_loader’);if(a.size()===0){a=$(‘<div class="ias_loader">’+h.loader+'</div>’);a.hide()}return a}function show_loader(){var a=get_loader(),el;if(h.customLoaderProc!==false){h.customLoaderProc(a)}else{el=$(h.container).find(h.item).last();el.after(a);a.fadeIn()}}function remove_loader(){var a=get_loader();a.remove()}function get_trigger(a){var b=$(‘.ias_trigger’);if(b.size()===0){b=$(‘<div class="ias_trigger"><a href="#">’+h.trigger+'</a></div>’);b.hide()}$(‘a’,b).off(‘click’).on(‘click’,function(){remove_trigger();a.call();return false});return b}function show_trigger(a){var b=get_trigger(a),el;el=$(h.container).find(h.item).last();el.after(b);b.fadeIn()}function remove_trigger(){var a=get_trigger();a.remove()}};$.ias.defaults={container:’.blog-posts’,scrollContainer:$(window),item:’.post-outer’,pagination:’#blog-pager’,next:’#blog-pager-older-link a’,loader:'<img src="http://1.bp.blogspot.com/-luorIIJzBBo/USnR6gOh-1I/AAAAAAAAJ_c/VEh_iQfKHqE/s1600/loading.gif"/>’,loaderDelay:600,triggerPageThreshold:8,trigger:’Load more Posts’,thresholdMargin:-500,history:true,onPageChange:function(){},beforePageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){ FB.XFBML.parse(); gapi.plusone.go(); twttr.widgets.load(); _gaq.push([‘_trackPageview’]); },customLoaderProc:false};$.ias.util=function(){var c=false;var d=false;var e=this;function init(){$(window).load(function(){c=true})}init();this.forceScrollTop=function(a){$(‘html,body’).scrollTop(0);if(!d){if(!c){setTimeout(function(){e.forceScrollTop(a)},1)}else{a.call();d=true}}};this.getCurrentScrollOffset=function(a){var b,wndHeight;if(a.get(0)===window){b=a.scrollTop()}else{b=a.offset().top}wndHeight=a.height();return b+wndHeight}};$.ias.paging=function(){var c=[[0,document.location.toString()]];var d=function(){};var e=1;var f=new $.ias.util();function init(){$(window).scroll(scroll_handler)}init();function scroll_handler(){var a,curPageNum,curPagebreak,scrOffset,urlPage;a=f.getCurrentScrollOffset($(window));curPageNum=getCurPageNum(a);curPagebreak=getCurPagebreak(a);if(e!==curPageNum){scrOffset=curPagebreak[0];urlPage=curPagebreak[1];d.call({},curPageNum,scrOffset,urlPage)}e=curPageNum}function getCurPageNum(a){for(var i=(c.length-1);i>0;i–){if(a>c[i][0]){return i+1}}return 1}this.getCurPageNum=function(a){a=a||f.getCurrentScrollOffset($(window));return getCurPageNum(a)};function getCurPagebreak(a){for(var i=(c.length-1);i>=0;i–){if(a>c[i][0]){return c[i]}}return null}this.onChangePage=function(a){d=a};this.pushPages=function(a,b){c.push([a,b])}};$.ias.history=function(){var e=false;var f=false;function init(){f=!!(window.history&&history.pushState&&history.replaceState);f=false}init();this.setPage=function(a,b){this.updateState({page:a},”,b)};this.havePage=function(){return(this.getState()!==false)};this.getPage=function(){var a;if(this.havePage()){a=this.getState();return a.page}return 1};this.getState=function(){var a,stateObj,pageNum;if(f){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{a=(window.location.hash.substring(0,7)===’#/page/’);if(a){pageNum=parseInt(window.location.hash.replace(‘#/page/’,”),10);return{page:pageNum}}}return false};this.updateState=function(a,b,c){if(e){this.replaceState(a,b,c)}else{this.pushState(a,b,c)}};this.pushState=function(a,b,c){var d;if(f){history.pushState({ias:a},b,c)}else{d=(a.page>0?’#/page/’+a.page:”);window.location.hash=d}e=true};this.replaceState=function(a,b,c){if(f){history.replaceState({ias:a},b,c)}else{this.pushState(a,b,c)}}}})(jQuery);
//]]>
</script><script>jQuery.ias();</script>
<a href=”http://www.stylifyyourblog.com” alt=”Blogger Templates” >Blogger Templates and Widgets</a>

Only Home Page, Label Pages and Archive Pages

It will not work in the Post Pages

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js’></script>
<script type=’text/javascript’>
//<![CDATA[
(function($){‘use strict’;Date.now=Date.now||function(){return+new Date()};$.ias=function(g){var h=$.extend({},$.ias.defaults,g);var i=new $.ias.util();var j=new $.ias.paging(h.scrollContainer);var k=(h.history?new $.ias.history():false);var l=this;function init(){var d;j.onChangePage(function(a,b,c){if(k){k.setPage(a,c)}h.onPageChange.call(this,a,c,b)});reset();if(k&&k.havePage()){stop_scroll();d=k.getPage();i.forceScrollTop(function(){var a;if(d>1){paginateToPage(d);a=get_scroll_threshold(true);$(‘html, body’).scrollTop(a)}else{reset()}})}return l}init();function reset(){hide_pagination();h.scrollContainer.scroll(scroll_handler)}function scroll_handler(){var a,scrThreshold;a=i.getCurrentScrollOffset(h.scrollContainer);scrThreshold=get_scroll_threshold();if(a>=scrThreshold){if(get_current_page()>=h.triggerPageThreshold){stop_scroll();show_trigger(function(){paginate(a)})}else{paginate(a)}}}function stop_scroll(){h.scrollContainer.unbind(‘scroll’,scroll_handler)}function hide_pagination(){$(h.pagination).hide()}function get_scroll_threshold(a){var b,threshold;b=$(h.container).find(h.item).last();if(b.size()===0){return 0}threshold=b.offset().top+b.height();if(!a){threshold+=h.thresholdMargin}return threshold}function paginate(d,e){var f;f=$(h.next).attr(‘href’);if(!f){if(h.noneleft){$(h.container).find(h.item).last().after(h.noneleft)}return stop_scroll()}if(h.beforePageChange&&$.isFunction(h.beforePageChange)){if(h.beforePageChange(d,f)===false){return}}j.pushPages(d,f);stop_scroll();show_loader();loadItems(f,function(a,b){var c=h.onLoadItems.call(this,b),curLastItem;if(c!==false){$(b).hide();curLastItem=$(h.container).find(h.item).last();curLastItem.after(b);$(b).fadeIn()}f=$(h.next,a).attr(‘href’);$(h.pagination).replaceWith($(h.pagination,a));remove_loader();hide_pagination();if(f){reset()}else{stop_scroll()}h.onRenderComplete.call(this,b);if(e){e.call(this)}})}function loadItems(b,c,d){var e=[],container,startTime=Date.now(),diffTime,self;d=d||h.loaderDelay;$.get(b,null,function(a){container=$(h.container,a).eq(0);if(0===container.length){container=$(a).filter(h.container).eq(0)}if(container){container.find(h.item).each(function(){e.push(this)})}if(c){self=this;diffTime=Date.now()-startTime;if(diffTime<d){setTimeout(function(){c.call(self,a,e)},d-diffTime)}else{c.call(self,a,e)}}},’html’)}function paginateToPage(a){var b=get_scroll_threshold(true);if(b>0){paginate(b,function(){stop_scroll();if((j.getCurPageNum(b)+1)<a){paginateToPage(a);$(‘html,body’).animate({‘scrollTop’:b},400,’swing’)}else{$(‘html,body’).animate({‘scrollTop’:b},1000,’swing’);reset()}})}}function get_current_page(){var a=i.getCurrentScrollOffset(h.scrollContainer);return j.getCurPageNum(a)}function get_loader(){var a=$(‘.ias_loader’);if(a.size()===0){a=$(‘<div class="ias_loader">’+h.loader+'</div>’);a.hide()}return a}function show_loader(){var a=get_loader(),el;if(h.customLoaderProc!==false){h.customLoaderProc(a)}else{el=$(h.container).find(h.item).last();el.after(a);a.fadeIn()}}function remove_loader(){var a=get_loader();a.remove()}function get_trigger(a){var b=$(‘.ias_trigger’);if(b.size()===0){b=$(‘<div class="ias_trigger"><a href="#">’+h.trigger+'</a></div>’);b.hide()}$(‘a’,b).off(‘click’).on(‘click’,function(){remove_trigger();a.call();return false});return b}function show_trigger(a){var b=get_trigger(a),el;el=$(h.container).find(h.item).last();el.after(b);b.fadeIn()}function remove_trigger(){var a=get_trigger();a.remove()}};$.ias.defaults={container:’.blog-posts’,scrollContainer:$(window),item:’.post-outer’,pagination:’#blog-pager’,next:’#blog-pager-older-link a’,loader:'<img src="http://1.bp.blogspot.com/-luorIIJzBBo/USnR6gOh-1I/AAAAAAAAJ_c/VEh_iQfKHqE/s1600/loading.gif"/>’,loaderDelay:600,triggerPageThreshold:8,trigger:’Load more Posts’,thresholdMargin:-500,history:true,onPageChange:function(){},beforePageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){ FB.XFBML.parse(); gapi.plusone.go(); twttr.widgets.load(); _gaq.push([‘_trackPageview’]); },customLoaderProc:false};$.ias.util=function(){var c=false;var d=false;var e=this;function init(){$(window).load(function(){c=true})}init();this.forceScrollTop=function(a){$(‘html,body’).scrollTop(0);if(!d){if(!c){setTimeout(function(){e.forceScrollTop(a)},1)}else{a.call();d=true}}};this.getCurrentScrollOffset=function(a){var b,wndHeight;if(a.get(0)===window){b=a.scrollTop()}else{b=a.offset().top}wndHeight=a.height();return b+wndHeight}};$.ias.paging=function(){var c=[[0,document.location.toString()]];var d=function(){};var e=1;var f=new $.ias.util();function init(){$(window).scroll(scroll_handler)}init();function scroll_handler(){var a,curPageNum,curPagebreak,scrOffset,urlPage;a=f.getCurrentScrollOffset($(window));curPageNum=getCurPageNum(a);curPagebreak=getCurPagebreak(a);if(e!==curPageNum){scrOffset=curPagebreak[0];urlPage=curPagebreak[1];d.call({},curPageNum,scrOffset,urlPage)}e=curPageNum}function getCurPageNum(a){for(var i=(c.length-1);i>0;i–){if(a>c[i][0]){return i+1}}return 1}this.getCurPageNum=function(a){a=a||f.getCurrentScrollOffset($(window));return getCurPageNum(a)};function getCurPagebreak(a){for(var i=(c.length-1);i>=0;i–){if(a>c[i][0]){return c[i]}}return null}this.onChangePage=function(a){d=a};this.pushPages=function(a,b){c.push([a,b])}};$.ias.history=function(){var e=false;var f=false;function init(){f=!!(window.history&&history.pushState&&history.replaceState);f=false}init();this.setPage=function(a,b){this.updateState({page:a},”,b)};this.havePage=function(){return(this.getState()!==false)};this.getPage=function(){var a;if(this.havePage()){a=this.getState();return a.page}return 1};this.getState=function(){var a,stateObj,pageNum;if(f){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{a=(window.location.hash.substring(0,7)===’#/page/’);if(a){pageNum=parseInt(window.location.hash.replace(‘#/page/’,”),10);return{page:pageNum}}}return false};this.updateState=function(a,b,c){if(e){this.replaceState(a,b,c)}else{this.pushState(a,b,c)}};this.pushState=function(a,b,c){var d;if(f){history.pushState({ias:a},b,c)}else{d=(a.page>0?’#/page/’+a.page:”);window.location.hash=d}e=true};this.replaceState=function(a,b,c){if(f){history.replaceState({ias:a},b,c)}else{this.pushState(a,b,c)}}}})(jQuery);
//]]>
</script><script>jQuery.ias();</script>
<a href=”http://www.stylifyyourblog.com” alt=”Blogger Templates” >Blogger Templates and Widgets</a>

Video Tutorial

Some Tips

+1 , Tweet and Like Buttons will be loaded after every AJAX request , so if you have these social sharing buttons beneath every post then don’t worry about them not showing

When the new post is loaded beneath a post ( If you choose the first option ) , then the Threaded comments in the newly loaded post will not work

To replace the Loader image , just search for .gif in the Widget code and replace that whole URL with another Image

To change the number of times before the user is asked to load more pages , search for triggerPageThreshold: and replace the numeric value ahead of it , if for example you set the value as 4 then the plugin will load new content four times before it asks you weather you want to see more content or not

onRenderComplete:function() function is used to tell the plugin what to do after the page has been successfully loaded , Here I have added a snippet which tells Google Analytics that a new page is loaded so that GA registers every AJAX request as a New Page visit

loaderDelay: tell how much milliseconds to wait before the new content is actually added to the page

For information about all the other options available in this plugin visit IAS Options

If you face any troubles in implementing , feel free to ask me via comments

Auto Pop Email Subscription Widget for Blogger

Email subscribe Auto Pop Email subscription widget for Blogger blogs. A easy way to get more email subscribers. This widget subtly presents a popup for subscribing for Email updates just after a specific trigger element is scrolled through. This trigger element can be changed as per your requirements. By default it is set to the comment section. So when you scroll past the comment section of your blog it will popout from the top. You can add this widget into your blog via the widget generator or manually


Demo

Widget Generator

FeedBurner ID

function submitter() {
var feedburnerid = document.getElementsByName(“feedburnerid”)[0].value;
var txtarea = document.getElementsByTagName(“textarea”)[0];
txtarea.value = txtarea.value + ” /**/ “;
feedburnerid = “http://feedburner.google.com/fb/a/mailverify?uri=”+feedburnerid;
txtarea.value = txtarea.value + “

“;
txtarea.value = txtarea.value + “Get my next article in your inbox!

“;
txtarea.value = txtarea.value + “

“; txtarea.value = txtarea.value + “

Wait! I want to get email updates, bring that back…

“;
txtarea.value= txtarea.value + “$(document).ready(function(){function isScrolledDown(a){var b=$(window).scrollTop();var c=b+$(window).height();var d=$(a).offset().top;var e=d+$(a).height();return(e=c)}function bringSliderOut(){$(f).animate({top:0},’fast’);$(‘#slider-tab’).text(‘hide this…’)}function bringSliderIn(){$(f).animate({top:-108},’fast’);$(‘#slider-tab’).text(‘Wait! I want to get email updates, bring that back…’)}var f=$(‘#slider’);var g=$(‘#comments’);var h=false;var i=false;$(‘#slider-tab’).click(function(){if(!i){bringSliderOut();i=true}else{bringSliderIn();i=false}});$(window).scroll(function(){if(isScrolledUp(g)){if(h){bringSliderIn();h=false;i=false}}else if(isScrolledDown(g)){if(!h){bringSliderOut();i=true;h=true}}})}); “;
document.forms[“add-widget”].submit();
}

function defaultvalues() {
document.getElementsByName(“feedburnerid”)[0].value = “”;

}

Or you can use the manual method

For that just copy the code from below

<style type='text/css'> /*<![CDATA[*/ #slider{     position:fixed;    top:-125px;    right:0px;    height:120px; width:100%;    background-color:#fff;    opacity:0.98;    -moz-box-shadow:    0px 0px 8px #ccc;    -webkit-box-shadow: 0px 0px 8px #ccc;    box-shadow:         0px 0px 8px #ccc;   }   .syb_footer{margin-top:-10px;font-size:0.8em;} #slider #slider-shell{    width:800px; height:110px;margin:10px auto;    position:relative;   }   #slider #slider-tab{position:absolute; bottom:0px; right:0px;    width:400px; text-align:right; padding-right:10px;    cursor:pointer; font-size:0.6em;   } #syb_embed_signup{ background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }#syb_embed_signup form {display:block; text-align:left; padding:10px 0 10px 3%}#syb_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}#syb_embed_signup input {border:1px solid #999; -webkit-appearance:none;}#syb_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}#syb_embed_signup input[type=radio]{-webkit-appearance:radio;}#syb_embed_signup input:focus {border-color:#333;}#syb_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block;font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}#syb_embed_signup .button:hover {background-color:#777;}#syb_embed_signup .small-meta {font-size: 11px;}#syb_embed_signup .nowrap {white-space:nowrap;}     #syb_embed_signup .clear {clear:none; display:inline;}#syb_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}#syb_embed_signup input.email {padding:8px 0; margin:0 4% 10px 0; text-indent:5px; width:58%; min-width:130px;}#syb_embed_signup input.button {width:35%; margin:0 0 10px 0; min-width:90px; }  /*]]>*/ </style><script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script><div id='slider' style='top: -108px;'><div id='slider-shell'><div id='syb_embed_signup'><form action='http://feedburner.google.com/fb/a/mailverify?uri=' id='syb-embedded-subscribe-form' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true' target='popupwindow'><label for='syb-EMAIL'>Get my next article in your inbox!</label><input class='email' id='syb-EMAIL' name='email' placeholder='Email Address' required='required' type='email' /><div class='clear'><input class='button' id='syb-embedded-subscribe' style='background-color: #0066cc;' type='submit' /></div></form><div class='syb_footer'><small><a id='syb_email_link' target='_blank' href='http://www.stylifyyourblog.com/2012/12/auto-pop-email-subscription-widget-for.html?utm_src=SYB_email' style='padding: 1px 0px 0px 19px;text-decoration:none;'><img src='http://img1.blogblog.com/img/blank.gif' alt='Email Subscription Widget for Blogger' style='border:none' /></a>Powered By <a href='http://www.stylifyyourblog.com/?utm_src=SYB_email' target='_blank' title='Blogger Widgets and Gadgets'>Stylify Widgets</a></small></div></div><div id='slider-tab'>Wait! I want to get email updates, bring that back...</div></div></div><script type='text/javascript'>$(document).ready(function(){function isScrolledDown(a){var b=$(window).scrollTop();var c=b+$(window).height();var d=$(a).offset().top;var e=d+$(a).height();return(e<=c)}function isScrolledUp(a){var b=$(window).scrollTop();var c=b+$(window).height();var d=$(a).offset().top;var e=d+$(a).height();return(d-200>=c)}function bringSliderOut(){$(f).animate({top:0},'fast');$('#slider-tab').text('hide this...')}function bringSliderIn(){$(f).animate({top:-108},'fast');$('#slider-tab').text('Wait! I want to get email updates, bring that back...')}var f=$('#slider');var g=$('#comments');var h=false;var i=false;$('#slider-tab').click(function(){if(!i){bringSliderOut();i=true}else{bringSliderIn();i=false}});$(window).scroll(function(){if(isScrolledUp(g)){if(h){bringSliderIn();h=false;i=false}}else if(isScrolledDown(g)){if(!h){bringSliderOut();i=true;h=true}}})});  </script>

Now just search for uri= and add your FeedBurner ID after that.

If you face any problems in implementing it , please feel free to ask via the comments

Thanks to Hartley Brody for the idea

.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;
}

Polls in Blogger

microphone to voice your viewsGetting feedback from your readers is the best way to know their opinions and what better way of doing this than by using Polls. Polls make your blog look more interactive and  makes your reader feel as being part of a community. In Blogger there is a inbuilt Poll Gadget which comes with basic options. In this post we will also be discussing poll widgets from Polldaddy & Quipol and their features.

Blogger Poll Gadget Demo
To integrate the Blogger’s own Polling widget you just have to go to the Layout tab and Click the Add a Gadget button . There select the Poll gadget and you will be presented with the following window

You are provided with the basic option like
Ability to select the Closing date of your Poll
Selecting whether users are allowed to mark multiple answers

PollDaddy  Demo
Polldaddy provides a lot of options and it allows you to create Surveys , Quizzes and Rating widgets as well.
For getting started with creating a Poll , just go to Polldaddy.com and register if you haven’t already . Now in your Dashboard click the Create a new button and select Poll .

Here the options for customization are many as compared to Blogger gadget , Here are some

– Adding MP3 , pictures accompanying your question
– 6 Polling gadget designs to choose from
– Different options to display results
– Ability to dedicated comment threads
– Repeat voters options

After completing the setup just click the Create Poll button and you will be presented with a code that you can simple copy in a HTML/JavaScript gadget.

Quipol Demo

Just a year old but has taken Polling industry by storm . Its restrictive in a sense because it only allows positive or negative feedback for a question but its design is just mind-blowing and makes make for it.

To create a poll , Firstly signup for Quipol here and then create a new poll . You will be presented with the following screen

Once complete , click the Create this Quipol button and then you will be given a code to add to your blog . Or if you like you can direct your reader to the Quipol-hosted poll

Some of its features are
– A dedicated comment thread for each poll
– Adding images or videos ( Youtube and Vimeo ) with question
– A visually appealing result pie chart
– Facebook/Twitter authentication

A word to round-offs all the services
Feature-Rich – Polldaddy
Awesome Design – Quipol
Native – Blogger’s own

These are the polling widgets that I found useful and have shared with you . Feel free to voice your opinion about which you like the most out of them

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

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 .

    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

    Syntax Highlighting in Blogger using Prettify

    Sons-Of-Obsidian Theme PrettifyPrettify is developed by Mike Samuel from Google and is used for displaying code snippets in webpages in a more presentable manner. It is lightweight and gets easily integrated into Blogger. It has four different themes to choose from and also supports C-like and XML-like language’s syntax highlighting . In this tutorial we will be seeing how to implement it in your blog and also checking out some of its options. Lets get Started then

    Demo

    Video Tutorial

    Step by Step Guide

    1. Go to Blogger Dashboard and then to Template > Edit HTML

    template blogger dashboard

    2. Now Search (Use CTRL+F) for </body> and add the following JavaScript just before it ( The Code below is very lengthy , copying it manually would be a bit difficult , Use the Copy to Clipboard option)

    //=2&&ch0==='['){parts[i]=caseFoldCharset(p)}else if(ch0!==''){parts[i]=p.replace(/[a-zA-Z]/g,function(ch){var cc=ch.charCodeAt(0);return'['+String.fromCharCode(cc&~32,cc|32)+']'})}}}return parts.join('')}var rewritten=[];for(var i=0,n=regexs.length;i$/i],[PR_ATTRIB_NAME,/^(?!style[s=]|on)[a-z](?:[w:-]*w)?/i],['lang-uq.val',/^=s*([^>'"s]*(?:[^>'"s/]|/(?=s)))/],[PR_PUNCTUATION,/^[=/]+/],['lang-js',/^onw+s*=s*"([^"]+)"/i],['lang-js',/^onw+s*=s*'([^']+)'/i],['lang-js',/^onw+s*=s*([^"'>s]+)/i],['lang-css',/^styles*=s*"([^"]+)"/i],['lang-css',/^styles*=s*'([^']+)'/i],['lang-css',/^styles*=s*([^"'>s]+)/i]]),['in.tag']);registerLangHandler(createSimpleLexer([],[[PR_ATTRIB_VALUE,/^[sS]+/]]),['uq.val']);registerLangHandler(sourceDecorator({'keywords':CPP_KEYWORDS,'hashComments':true,'cStyleComments':true,'types':C_TYPES}),['c','cc','cpp','cxx','cyc','m']);registerLangHandler(sourceDecorator({'keywords':'null,true,false'}),['json']);registerLangHandler(sourceDecorator({'keywords':CSHARP_KEYWORDS,'hashComments':true,'cStyleComments':true,'verbatimStrings':true,'types':C_TYPES}),['cs']);registerLangHandler(sourceDecorator({'keywords':JAVA_KEYWORDS,'cStyleComments':true}),['java']);registerLangHandler(sourceDecorator({'keywords':SH_KEYWORDS,'hashComments':true,'multiLineStrings':true}),['bsh','csh','sh']);registerLangHandler(sourceDecorator({'keywords':PYTHON_KEYWORDS,'hashComments':true,'multiLineStrings':true,'tripleQuotedStrings':true}),['cv','py']);registerLangHandler(sourceDecorator({'keywords':PERL_KEYWORDS,'hashComments':true,'multiLineStrings':true,'regexLiterals':true}),['perl','pl','pm']);registerLangHandler(sourceDecorator({'keywords':RUBY_KEYWORDS,'hashComments':true,'multiLineStrings':true,'regexLiterals':true}),['rb']);registerLangHandler(sourceDecorator({'keywords':JSCRIPT_KEYWORDS,'cStyleComments':true,'regexLiterals':true}),['js']);registerLangHandler(sourceDecorator({'keywords':COFFEE_KEYWORDS,'hashComments':3,'cStyleComments':true,'multilineStrings':true,'tripleQuotedStrings':true,'regexLiterals':true}),['coffee']);registerLangHandler(createSimpleLexer([],[[PR_STRING,/^[sS]+/]]),['regex']);function applyDecorator(job){var opt_langExtension=job.langExtension;try{var sourceAndSpans=extractSourceSpans(job.sourceNode,job.pre);var source=sourceAndSpans.sourceCode;job.sourceCode=source;job.spans=sourceAndSpans.spans;job.basePos=0;langHandlerForExtension(opt_langExtension,source)(job);recombineTagsAndDecorations(job)}catch(e){if(win['console']){console['log'](e&&e['stack']?e['stack']:e)}}}function prettyPrintOne(sourceCodeHtml,opt_langExtension,opt_numberLines){var container=document.createElement('pre');container.innerHTML=sourceCodeHtml;if(opt_numberLines){numberLines(container,opt_numberLines,true)}var job={langExtension:opt_langExtension,numberLines:opt_numberLines,sourceNode:container,pre:1};applyDecorator(job);return container.innerHTML}function prettyPrint(opt_whenDone){function byTagName(tn){return document.getElementsByTagName(tn)}var codeSegments=[byTagName('pre'),byTagName('code'),byTagName('xmp')];var elements=[];for(var i=0;i