Integrating Lazy Load into Blogger

Lazy Load ImageLazy Load is a jQuery plugin which only loads Images seeable in the viewport (visible part of web page) thereby enhancing the Page Load time. The images which are out the initial visible region of the screen are loaded as the users scrolls through them. A really useful plugin for Image intensive Blog’s.

See Demo

How to add this into your Blog :

1. Login to your Blogger Account

2. Go to Design > Edit HTML ( For New Blogger Interface Go to Templates > Edit HTML )

3. Search for </body> tag and paste the following Code :

<script src="" type="text/javascript" charset="utf-8"></script>
  <script src="" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
      $(function() {
          $("img").lazyload({placeholder : ""});

In case you experience blank Images in your Sidebar then try out this code :

<script src="" type="text/javascript" charset="utf-8"></script>
  <script src="" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
      $(function() {
          $(".post-outer img").lazyload({placeholder : ""});

What the following code does is it limits the scope of Lazy Load to the Post Area excluding the Sidebar.

4. Save the Template and enjoy.

Skeptical about this Plugins Effects ,well check out the Results as measured by 

With Lazy Load Disabled :

With Lazy Load Enabled :

You might not see much difference in the Page Size (About 40 Kb) but the Page Load Time has reduced by more than Half

If you still don’t Beileve it try it for yourself. Just go to

Lazy Load Disabled URL:

Lazy Load Enabled URL:

Have a Opinion ,Share It !

Contact Forms for Blogger

Contact Forms Image

Contact Forms are backbone of any blog/website, they provide a way for the readers to contact the author personally. As Blogger doesn’t provide any inbuilt Contact Form, so we will be checking out some third party Form providers like ContactMe and Wufoo.

In this post we will see how to add to ContactMe and Wufoo forms into your Blogger Blog and also test some of the extra features these services give. Both these companies also provide premium form services but for any standard blog, there Free service is more than enough to meet all the needs.

ContactMe Forms

See Demo

1. Go to  and firstly register with them

2. After Finishing the registration and Logging into your account for the first time you will be asked to Import your Contact , Skip this Step and Click on Add-Ons in the menu above .

3. After opening the Add-Ons Tab, There will be a Pre-built Form named “Untitled Form” , now just click on  Edit Form ( ContactMe doesn’t allow you to create more than one form )

4. Now make changes to the form according to your needs and then click on “Save Form“. Then you will be redirect back to the Add-Ons page and Now Click on Get Code

Now you will be presented with three different options for Using/Embedding your Form

>Embed The Form
   Just copy the code and paste it either into a Static Page or a Post ,wherever you want the form to appear

>Get a ContactMe Button
   Just click on “Create your Button” and customize the buttons style and select the Platform as Blogger and     then click “Generate your Button!” and then you either paste this code directly into a HTML/JavaScript Gadget or you can add it directly by clicking “Add to Blogger”

>Link To Your Form
  Just copy the link and share it on your Blog for contacting purposes

Wufoo Forms

See Demo

The above Form is Integrated into a Facebook Page

1. Go to and get yourself registered.

2. After completing the Registration process and logging into your Account you will be taken to the “Form” Tab. Just Click on “New Form!” Icon on the Upper Rigtht

3. Now for creating the Form you will see a lot of Options are present , some of its features include Multi page Form , Likerts , Multiple Choice, etc. (The File Upload option is available to premium users only )

You can use these to create Polls, Surveys ,etc as well as the normal Contact Form. Wufoo Provides option to create three separate Forms with the only drawback being that you can receive only 100 entries a month (That too is a killer deal for not paying nothing)

4. After you have finalized your Form Click on “Save Form” , you will be provided a dialog with 3 options, Click on the 2nd and setup Email Notification.

5. After setting up Email Notification Go back to the Forms Tab and below you will see your Form Name, Now click on Code and then you will be provided with 6 different ways to present your Form. I suggest you use the Embed Form Code option and get the JavaScript Code. Now just copy this into the Blogger Static Page (In Edit HTML mode)

Some others features include Customizing the CSS of the form and also very stylish Reporting options (with Pie-Charts and Bar graphs )

You are ready to go now , its upto you to decide which service suits your style. Have any suggestions or having any problems in implementing , please feel free to ask.

Zen Audio Player for your Blog

Zen Audio Player Image

Zen Audio Player a single-song HTML5 Music Player, powered by jPlayer, styled and mostly animated with CSS3. It works more or less in Firefox4, Chrome, Safari, Opera, iOS, but there are some differences in the visuals. This blends jQuery, JavaScript and CSS3 in such a way that the end product is nothing less then a visual masterpiece.There are some known cross browser compatibility issues, but none the less its a funky looking Music Player which shows whats achievable with jQuery and CSS3 alone.

In this tutorial we will be discussing how to add this Music Player into your Blogs.

See DemoDownload

Simple Steps for Adding This into your Blog:

1. Go to the Post/Page you want to add this Music Player or 

    Go to Design > Page Elements > Add a Gadget > HTML/JavaScript type Gadget for adding this in the Sidebar

2. Copy the Following Code: (How to copy code easily)

<link rel="stylesheet" href="">
 <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="zen.css">
<script type="text/javascript" src=""></script>   
 <script type="text/javascript" src="jquery.rotate.js"></script>
 <script type="text/javascript" src="jquery.grab.js"></script> 
 <script type="text/javascript" src="jquery.jplayer.min.js"></script>
 <script type="text/javascript" src="zen.js"></script>

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

Note: If you already have jQuery library in your Header, then don’t include it again

Here zen.js contains the link of the audio file you want to play through this player. As you may observe that there are three different formats of the same file namely mp3, m4a and ogg. This is done as different Browsers have different native audio supports. Therefore it is suggested that you add the link to different formats of your Music file for better Cross Browser compatibility.

3. Now add the Following HTML markup:

<div id="zen">
  <span class="player"></span>
  <span class="circle"></span>
  <span class="progress"></span>
  <span class="buffer"></span>
  <span class="drag"></span>
  <div class="button">
   <span class="icon play"></span>
   <span class="icon pause"></span>

This code calls in the different CSS and JavaScript classes to give you the end product a.k.a. a super stylish Music Player.

4. Now just save and enjoy the Music.

See DemoDownload

A Cool Music Player for Blogger

There are many ways to add Music to your blog. The most common way is to embed it into your post.In this tutorial I will be using the WordPress Music Player to do the same.

Note:You will be needing a Free Hosting Service like Dropbox to host the SWF file.

Also You will first have to find a music file that is already hosted on the web, or if you have your own music file stored in your computer, upload it into a file host.

Steps to Add it to Blogger:

1.Login to the Blogger account

2.Go to the Post/Page you want to add the WP Music Player.

3.Now copy the code from below and paste it in the Edit HTML Tab of the respective Post/Page.

<object data="" height="24" id="audioplayer1" type="application/x-shockwave-flash" width="290">  <param name="movie" value="">
<param name="FlashVars" value="playerID=1&amp;soundFile=URL of Music File">
<param name="quality" value="high">
<param name="menu" value="true">
<param name="wmode" value="transparent">

4.For Adding multiple Players on a page just change the id in 2nd Line and the value in the in the 4th Line just as seen below

<object data="" height="24" id="audioplayer2" type="application/x-shockwave-flash" width="290">   
<param name="movie" value="">
<param name="FlashVars" value="playerID=2&amp;soundFile=">
<param name="quality" value="high">
<param name="menu" value="true">
<param name="wmode" value="transparent">

← This is the Second Player of this Page

5.Now for changing the appearnace of the code see the following code:

<object data="" height="24" id="audioplayer3" type="application/x-shockwave-flash" width="290">   <param name="movie" value="">
<param name="FlashVars" value="playerID=audioplayer3&amp;bg=0xf8f8f8&amp;leftbg=0xeeeeee&amp;lefticon=0x666666&amp;rightbg=0xcccccc&amp;rightbghover=0x999999&amp;righticon=0x666666&amp;righticonhover=0xffffff&amp;text=0x666666&amp;slider=0x666666&amp;track=0xFFFFFF&amp;border=0x666666&amp;loader=0x9FFFB8&amp;loop=no&amp;autostart=yes&amp;soundFile=">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">

Amazed How the player is playing when the Page just loaded ,This is because I changed the parameter “autostart” to true. Thinking where this autostart Parameter is ??, Scroll to the Extreme Right of this page and You will find it there.(The above code has shifted a little right because no space has to given in the list of parameters)

There is also a loop parameter to play the track non-stop

The Following image will explain the parameters in a more detailed manner.

This Tutorial could not have been possible without MBT ,For more customized Players check out Here.

Just for Knowledge: Google has launched a Project called Google Swiffy whose purpose is to Convert SWF files into HTML5 ,so that even devices not supporting Flash can run those SWFs. I tried to convert the player.swf but it showed some error (The Project is in its early stages) .Check out the their Gallery of Converted items Here.

Implementing Syntax Highlighter in Blogger

Syntax Highlighter is a simple JavaScript which is used to represent your Code in a more sophisticated manner.I have used this in nearly all my previous posts.In this tutorial I will be implementing Version 2.1.364 of SH. It has the ability to copy Code into the Clipboard and also supports 13 different brushes.


Steps to Add it to Blogger:

1.Login to the Blogger account

2.Go to Blogger Dashboard >Design>Edit HTML. First backup your Template (See how to Back it up)

3.Now copy the code from below and paste it just Above/Before </head> tag.

<link href='' rel='stylesheet' type='text/css'/> 
<link href='' rel='stylesheet' type='text/css'/> 
<script src='' type='text/javascript'/>  
<script src='' type='text/javascript'/>
<script src='' type='text/javascript'/> 
<script src='' type='text/javascript'/> 
<script src='' type='text/javascript'/> 
<script src='' type='text/javascript'/> 
<script src='' type='text/javascript'/> 
<script src='' type='text/javascript'/> 
<script src='' type='text/javascript'/> 
<script src='' type='text/javascript'/> 
<script src='' type='text/javascript'/> 
<script src='' type='text/javascript'/> 
<script src='' type='text/javascript'/> 
<script src='' type='text/javascript'/>

See only the first Three Line of code is necessary ,rest of the code is dependent on which Brush you want to use .For example if you want to use XML Brush then include only XML related file.

4.Now include the following code just Above/Before the </body> tag.

<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;;;

5.Now for applying this to your code just paste the code in between the following code:

<pre class="brush: BRUSH-NAME">

Paste Your Code Here


The “BRUSH-NAME” needs to be changed by the Brush you want to use. Like for example if you want to use xml Brush then change “BRUSH-NAME” with xml. All the code should be Escaped (Visit this Page to make your Code Escaped)

Now some extra features : For Highlighting the code see the following code:

<pre class="brush: xml;highlight: [2,4];">
This Line is Highlighted
This Line is not Highlighted
This Line is again Highlighted

To Hide the Toolbar

<pre class="brush: xml; toolbar: false;">

If You observe ,there is no Toolbar



Implementing Jparallax in Blogger

 Jparallax is a Jquery plugin which turns a selected image into a viewport, and all its other images into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions ,they move by different amounts, in a parallaxy kind of way.

Steps for Integrating jParallax into Blogger

1.In the Blogger Dashboard , Go to Template > Edit HTML

2.Click once inside the Edit HTML Editor and then Press CTRL+F(Windows) or COMMAND+F(Mac) , A search box will appear in the right upper corner of the editor itself. Now search for this “</head>” (without quotes) and then paste the following JavaScript just Above it. (Check the Animated GIF to understand better )

<script type="text/javascript" src="//"></script>  
<script type='text/javascript'>
(function(jQuery){function stripFiletype(ref){var x=ref.replace(".html","");return x.replace("#","")}function initOrigin(l){if(l.xorigin=="left"){l.xorigin=0}else{if(l.xorigin=="middle"||l.xorigin=="centre"||l.xorigin=="center"){l.xorigin=0.5}else{if(l.xorigin=="right"){l.xorigin=1}}}if(l.yorigin=="top"){l.yorigin=0}else{if(l.yorigin=="middle"||l.yorigin=="centre"||l.yorigin=="center"){l.yorigin=0.5}else{if(l.yorigin=="bottom"){l.yorigin=1}}}}function positionMouse(mouseport,localmouse,virtualmouse){var difference={x:0,y:0,sum:0};if(!mouseport.ontarget){difference.x=virtualmouse.x-localmouse.x;difference.y=virtualmouse.y-localmouse.y;difference.sum=Math.sqrt(difference.x*difference.x+difference.y*difference.y);virtualmouse.x=localmouse.x+difference.x*mouseport.takeoverFactor;virtualmouse.y=localmouse.y+difference.y*mouseport.takeoverFactor;if(difference.sum<mouseport.takeoverThresh&&difference.sum>mouseport.takeoverThresh*-1){mouseport.ontarget=true}}else{virtualmouse.x=localmouse.x;virtualmouse.y=localmouse.y}}function setupPorts(viewport,mouseport){var offset=mouseport.element.offset();jQuery.extend(viewport,{width:viewport.element.width(),height:viewport.element.height()});jQuery.extend(mouseport,{width:mouseport.element.width(),height:mouseport.element.height(),,left:offset.left})}function parseTravel(travel,origin,dimension){var offset;var cssPos;if(typeof(travel)==="string"){if(^d+s?px$/)!=-1){travel=travel.replace("px","");travel=parseInt(travel,10);offset=origin*(dimension-travel);cssPos=origin*100+"%";return{travel:travel,travelpx:true,offset:offset,cssPos:cssPos}}else{if(^d+s?%$/)!=-1){travel.replace("%","");travel=parseInt(travel,10)/100}else{travel=1}}}offset=origin*(1-travel);return{travel:travel,travelpx:false,offset:offset}}function setupLayer(layer,i,mouseport){var xStuff;var yStuff;var cssObject={};layer[i]=jQuery.extend({},{width:layer[i].element.width(),height:layer[i].element.height()},layer[i]);xStuff=parseTravel(layer[i].xtravel,layer[i].xorigin,layer[i].width);yStuff=parseTravel(layer[i].ytravel,layer[i].yorigin,layer[i].height);jQuery.extend(layer[i],{diffxrat:mouseport.width/(layer[i].width-mouseport.width),diffyrat:mouseport.height/(layer[i].height-mouseport.height),,,xtravelpx:xStuff.travelpx,ytravelpx:yStuff.travelpx,xoffset:xStuff.offset,yoffset:yStuff.offset});if(xStuff.travelpx){cssObject.left=xStuff.cssPos}if(yStuff.travelpx){}if(xStuff.travelpx||yStuff.travelpx){layer[i].element.css(cssObject)}}function setupLayerContents(layer,i,viewportOffset){var contentOffset;jQuery.extend(layer[i],{content:[]});for(var n=0;n<layer[i].element.children().length;n++){if(!layer[i].content[n]){layer[i].content[n]={}}if(!layer[i].content[n].element){layer[i].content[n]["element"]=layer[i].element.children().eq(n)}if(!layer[i].content[n].anchor&&layer[i].content[n].element.children("a").attr("name")){layer[i].content[n]["anchor"]=layer[i].content[n].element.children("a").attr("name")}if(layer[i].content[n].anchor){contentOffset=layer[i].content[n].element.offset();jQuery.extend(layer[i].content[n],{width:layer[i].content[n].element.width(),height:layer[i].content[n].element.height(),x:contentOffset.left-viewportOffset.left,});jQuery.extend(layer[i].content[n],{posxrat:(layer[i].content[n].x+layer[i].content[n].width/2)/layer[i].width,posyrat:(layer[i].content[n].y+layer[i].content[n].height/2)/layer[i].height})}}}function moveLayers(layer,xratio,yratio){var xpos;var ypos;var cssObject;for(var i=0;i<layer.length;i++){xpos=layer[i].xtravel*xratio+layer[i].xoffset;ypos=layer[i].ytravel*yratio+layer[i].yoffset;cssObject={};if(layer[i].xparallax){if(layer[i].xtravelpx){cssObject.marginLeft=xpos*-1+"px"}else{cssObject.left=xpos*100+"%";cssObject.marginLeft=xpos*layer[i].width*-1+"px"}}if(layer[i].yparallax){if(layer[i].ytravelpx){cssObject.marginTop=ypos*-1+"px"}else{*100+"%";cssObject.marginTop=ypos*layer[i].height*-1+"px"}}layer[i].element.css(cssObject)}}jQuery.fn.jparallax=function(options){var settings=jQuery().extend({},jQuery.fn.jparallax.settings,options);var settingsLayer={xparallax:settings.xparallax,yparallax:settings.yparallax,xorigin:settings.xorigin,yorigin:settings.yorigin,xtravel:settings.xtravel,ytravel:settings.ytravel};var settingsMouseport={element:settings.mouseport,takeoverFactor:settings.takeoverFactor,takeoverThresh:settings.takeoverThresh};if(settings.mouseport){settingsMouseport.element=settings.mouseport}var layersettings=[];for(var a=1;a<arguments.length;a++){layersettings.push(jQuery.extend({},settingsLayer,arguments[a]))}return this.each(function(){var localmouse={x:0.5,y:0.5};var virtualmouse={x:0.5,y:0.5};var timer={running:false,frame:settings.frameDuration,fire:function(x,y){positionMouse(mouseport,localmouse,virtualmouse);moveLayers(layer,virtualmouse.x,virtualmouse.y);this.running=setTimeout(function(){if(localmouse.x!=x||localmouse.y!=y||!mouseport.ontarget){,localmouse.y)}else{if(timer.running){timer.running=false}}},timer.frame)}};var viewport={element:jQuery(this)};var mouseport=jQuery.extend({},{element:viewport.element},settingsMouseport,{xinside:false,yinside:false,active:false,ontarget:false});var layer=[];function matrixSearch(layer,ref,callback){for(var i=0;i<layer.length;i++){var gotcha=false;for(var n=0;n<layer[i].content.length;n++){if(layer[i].content[n].anchor==ref){callback(i,n);return[i,n]}}}return false}setupPorts(viewport,mouseport);for(var i=0;i<viewport.element.children().length;i++){layer[i]=jQuery.extend({},settingsLayer,layersettings[i],{element:viewport.element.children("*:eq("+i+")")});setupLayer(layer,i,mouseport);if(settings.triggerResponse){setupLayerContents(layer,i,viewport.element.offset())}}viewport.element.children().css("position","absolute");moveLayers(layer,0.5,0.5);if(settings.mouseResponse){jQuery(window).mousemove(function(mouse){mouseport.xinside=(mouse.pageX>=mouseport.left&&mouse.pageX<mouseport.width+mouseport.left)?true:false;mouseport.yinside=(mouse.pageY><;if(mouseport.xinside&&mouseport.yinside&&!{mouseport.ontarget=false;}if({if(mouseport.xinside){localmouse.x=(mouse.pageX-mouseport.left)/mouseport.width}else{localmouse.x=(mouse.pageX<mouseport.left)?0:1}if(mouseport.yinside){localmouse.y=(}else{localmouse.y=(mouse.pageY<}}if(mouseport.xinside&&mouseport.yinside){if(!timer.running){,localmouse.y)}}else{if({}}})}if(settings.triggerResponse){viewport.element.bind("jparallax",function(event,ref){ref=stripFiletype(ref);matrixSearch(layer,ref,function(i,n){localmouse.x=layer[i].content[n].posxrat*(layer[i].diffxrat+1)-(0.5*layer[i].diffxrat);localmouse.y=layer[i].content[n].posyrat*(layer[i].diffyrat+1)-(0.5*layer[i].diffyrat);if(!settings.triggerExposesEdges){if(localmouse.x<0){localmouse.x=0}if(localmouse.x>1){localmouse.x=1}if(localmouse.y<0){localmouse.y=0}if(localmouse.y>1){localmouse.y=1}}mouseport.ontarget=false;if(!timer.running){,localmouse.y)}})})}jQuery(window).resize(function(){setupPorts(viewport,mouseport);for(var i=0;i<layer.length;i++){setupLayer(layer,i,mouseport)}})})};jQuery.fn.jparallax.settings={mouseResponse:true,mouseActiveOutside:false,triggerResponse:true,triggerExposesEdges:false,xparallax:true,yparallax:true,xorigin:0.5,yorigin:0.5,xtravel:1,ytravel:1,takeoverFactor:0.65,takeoverThresh:0.002,frameDuration:25};initOrigin(jQuery.fn.jparallax.settings);jQuery(function(){})})(jQuery);
<script type="text/javascript">  

3. Now search for the ]]><b:skin> in the template and copy the following CSS just Above it.

#parallax {

Note: The width and height depends on the dimensions of the images you are using

4.Now copy the following HTML markup where you want to use it

<div id="parallax">  
    <img src="" alt=""style="width:1323px; height:224px;" />    
    <img src="" alt="" style="width:1123px; height:224px;"/>  
    <img src="" alt="" style="width:1240px; height:224px;"/>  
    <img src="" alt="" style="width:1320px; height:224px;"/>  
    <img src="" alt="" style="width:1440px; height:224px;"/>  

This is a generic example and this can be used in a number of creative ways