Features : Responsive Portfolio Blogger Template

Features Blogger Templates ,Responsive , Grid Layout , SEO , Pagination ,etc

Inspired from the mockup on the new Blogger Features page , Features is a fully responsive template which is best suited for portfolio and showcase blogs. It has a clean design and supports Blogger Template Designer with many extra options , which makes modifying the design easy. It comes with out of the box support for Twitter Cards & Open Graph Meta tags and optimized Title and Headings tags.


For Downloading This Template 
Hear me out a bit , I am going to graduate from college next summer and I am determined to take up template designing as a full time profession. Therefore the price of this template is what you like it to be , you can download it for free or give me an amount that you found it worthy of. For accepting payments I use Gumroad , which is used by many Freelancers to accept Credits cards. You can read its reviews here and here . In case you have issues with Gumroad , then I also accept payments via Fiverr , Paypal and Direct Bank Transfer ( Drop me a mail )  . When you use Gumroad to download it , then the template will be delivered directly to your email address

Features

Responsive 

It has a total of 6 breakpoints ( 3 shown above ) , which helps it adapt to many different screen sizes. CSS transitions have been used to add easing effects when switching from one breakpoint to another.

Blogger Template Designer Custom options

blogger template designer

You can easily customize the background and fonts of Button , Status Message , Email Subscription Widget , Search Widget , Sliding Boxes and Tags from the Template Designer on top of all the options that it already provides.

Sliding Boxes

css sliding boxes

A CSS powered sliding box effect which is present on Homepage as well as the Label and Archive pages. It shows the title , Label and Date when the mouse on moved over the picture

Pagination 

automatic Pagination

Custom Label and Button Design

button Label

Search Engine Optimization


Twitter Card approved and Facebook Open Graph Meta Tags present



– Heading and Title tag as per Search engines standards
– Out-of-box supports for Open Graph Meta Tags , Twitter Cards and Rich Pins which makes sharing your posts on Social Networks easier

Cross Browser Compatibility

cross browser testing

Features works across all modern web browsers. For older versions of Internet Explorer , it shows the option to install Chrome Frame to improve the experience

Instructions for Installation

Before installing the template , make sure you have switched the Mobile Template ( Present in Template Tab > Gears Icon ) to On and selected it to Custom template. If you don’t do this , the Blogger Template Designer will not work !

After you have followed the above steps , then go to Template > Backup/Restore > Choose a File , select the XML file from the unzipped archive and then Upload

Advice for using the template optimally 
– No posts should be without a title . If any post is without a title , then the thumbnail of that post will not appear
– For the Twitter Cards and the Grid layout to work correctly , please upload all your images to Blogger itself. Images uploaded on third party hosting may or may not work
– Upload images of the highest quality possible and set the first image size to Original in the Post Editor

Widget Code
The unzipped archive will also contain two widget codes , one for Search and other for Email subscription , you can simply add them to new HTML/JavaScript gadgets.

Label Style

label gadget in Layout tab of Blogger dashboard

To enable the Custom Label style , go to the Layout and click the Edit button of the Label’s widget. In it much sure to tick Display as Cloud option

Pagination
To change the number of posts to be shown on homepage , find the term postperpage ( In Edit HTML using CTRL+F ) ,There will be a script something like this


 

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=3;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>

You can change the number values as you like in the above code.
var postperpage=9; → Changes the no of posts that will show up on clicking any page number.
var numshowpage=3;→ Changes the number of linking to show in the widget

configure blog post blogger layout

Note: Make sure that you also set the value of Number of Posts on Main Page (Go to Layout , Click on Edit option of Blog Post and then Number of posts on main page: ) to same as that of the postperpage value.

Enabling Twitter Cards
Go to Template > Edit HTML and search for “twitter:creator” (without quotes) and replace the value inside the content field with your Twitter username (eg. @Blogger ) . Once you have done that , go to https://dev.twitter.com/docs/cards/validation/validator , select Summary Large Image and then test any post from your blog. Once everything is working , fill up the form for Approval.

Changing Email Subscription username
For the Email Widget , replace the two instances of StylifyYourBlog with your Feedburner username . In case of the below the Post Email subscription option , search for “<form” (without quotes) in Edit HTML and there again you will find two instances of StylifyYourBlog , replace them with your Feedburner Username (for example check screenshot below , assuming your username is Blogger )

Edit HTML

Button
To add a button anywhere in your blog, add the following HTML markup

<span class="button">
<a href="#">The Link</a>
</span>

Hoping that you will like it , do let me know your feedback in the comments

Creative Commons License
Features Blogger Template by Prayag Verma is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Based on a work at https://www.blogger.com/features.
Permissions beyond the scope of this license may be available at http://www.stylifyyourblog.com/p/contact-me.html

.gumroad-button {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif !important;
font-size: 13px !important;
line-height: 17px !important;
font-weight: 500 !important;
text-align: left !important;
color: #8E8E8E !important;
text-shadow: 0 1px 2px #FFF !important;
background: url(https://gumroad.com/assets/favicon.png) 5px 49% no-repeat #FFF !important;
border-radius: 3px !important;
border: 1px solid #C8C8C8 !important;
padding: 4px 6px 4px 26px !important;
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
text-decoration: none !important;
display: inline-block;
}

Solving the Problem with Blogger’s Custom Redirects feature on Mobile

redirect loop problem

Custom Redirects were launched in March 2012 and gave Blogger users the ability to change the permalink structure of the all types of pages on their blogs . It allows two kinds of redirects namely 301 Moved Permanently type (Which lets you pass SEO value) and 302 Moved Temporarily (Used for Coming Soon Pages or when a page is under maintenance ).  This is extremely useful for people who are migrating from other platforms , as they can now easily able to redirect pages with different permalink structure than Blogger’s default to a new page. Recently there have been some issues with it , which have become a cause of frustration for many users.

What is the problem

When a Custom Redirect (example www.stylifyyourblog.com/contact ) is opened in a Mobile browser , it leads to a Redirect Loop (See Screenshot below) which doesn’t allow the visitor to open the blog. This becomes a big problem when the redirect is used on the homepage of the blog (example YourBlogName.blogspot.com or a custom domain like http://www.stylifyyourblog.com/ ) which makes it impossible for the user to even visit the blog.

too many server redirects

Why this happens

The main reason for this problem occurring is the mobile parameter that Blogger adds from the server side. The m=1 parameter interferes with the custom redirect and breaks the whole functionality (As you can see in the short GIF Below). Until last year if  a custom redirect with mobile parameter was entered in a normal web browser (example stylifyyourblog.com/contact?m=1 ) it would lead to a 404 page , but this error was fixed by Blogger Team.

redirects from m=1 to non m=1 loop custom

How to Solve this Problem
As the custom Redirect feature doesn’t work universally , you can always use good old JavaScript for this. Firstly I would suggest to remove the specific redirect from Settings > Search Preferences > Errors and redirections > Custom Redirects . Then go to Template > Edit HTML and search for <head> tag and add the following code just below it (Backup your template before doing this)

For example sake , I am assuming we want to redirect http://www.stylifyyourblog.com/templates to http://www.stylifyyourblog.com/search/label/Template

<script>
if(window.location.href == 'http://www.stylifyyourblog.com/templates?m=1' || window.location.href ==  'http://www.stylifyyourblog.com/templates' )
{
window.location="http://www.stylifyyourblog.com/search/label/Template";
}
</script>

As you can make out , this is just tests if the current URL is the normal or mobile version of the URL you want to redirect , if it matches then it redirects to the URL of your choice. This works in Desktop and Mobile browsers just fine ( See Youtube video below )

What is Blogger doing about it
If you want to redirect a large number of pages , then it will become unmanageable and confusing to keep adding new snippets of code to the template. This work is best done by Blogger at the Server side. As of now this issue has been escalated to the Blogger Team and they are looking into it . Hope they will fix this issue soon

If you are currently having problems with Blogger , feel free to share them in the comments , I will try to help out to my best of abilities

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

jQuery Hacks : Hiding Links inside Comments

span stopFor the past few months I have been dealing with a lot of spam in the comment section. The Blogger’s inbuilt filter has stopped more than 6000 spam comments but still some slipped by . Due to this very reason I had to close the Anonymous option for commenting. But this didn’t solve the problem and people with Blogger profile started to spam as well . So I have come up with a simple jQuery powered hack that hides any clickable link and just displays its text.

Demo
Try adding links in the comment below

Code

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script>  

$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});

</script>

Add it just before the </body> tag in the Edit HTML . In case you have already included the jQuery library , then add the code starting from Line 2 onwards.

If you want to completely remove the links from the comments , then use this code instead

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script>  

$('.comment-content a[rel$=nofollow]').hide());

</script>

This works for the Threaded Comments in Blogger , incase you want to make it work for the old Comments in Blogger , then the code is as follows

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script>  

$('.comment-body p a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});

</script>

Hope this helps you in curbing the spam in your comment section and feel free to share this simple trick with your friends
//

Blog Archive links Collapsed by Default Hack

blog archive widget hack

If you are using the Hierarchy style for your Blog Archive widget then you must have faced the problem of auto expansion of drop-down list of a particular month which is currently in the calendar or to which the opened post belongs. This simple hack solves that problem by making all the nodes in the hierarchy to be collapsed by default(As seen in the above picture ). This can be simply added by the One Click Installer or manually.

Demo

Prerequisites for this to Work
Before you apply this remember that you have to have a Blog Archive Widget present and the Style has to be set to Hierarchy (as shown in picture below )

blog archive widget config blogger

Applying this to your Blog

To add using One Click Installer Method

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script>
if ( $(‘.archivedate’).hasClass(‘expanded’) )
{
$(‘.archivedate’).removeClass(‘expanded’);
$(‘.archivedate’).addClass(‘collapsed’);
}
</script>
Blogger Templates

Or just add the following Code in your Blog (preferably before the </body> tag in the Edit HTML of the Template tab )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>  
if ( $('.archivedate').hasClass('expanded') ) 
{ 
 $('.archivedate').removeClass('expanded'); 
$('.archivedate').addClass('collapsed'); 
}
</script>

What this code does
It firstly checks if a element having class name “archivedate” also has a class “expanded” present in it. If this turns out to be true then it removes the “expanded” class and adds a class named “collapsed” .

If you face any problem implementing it in your blog then feel free to ask via comments.a_demo_four {
width:auto !important;
cursor:pointer !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;
}

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

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