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="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://stylifyyourblog1.googlecode.com/svn/trunk/lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload({placeholder : "http://2.bp.blogspot.com/-7mu1o035Ssk/TqmCSGtOLaI/AAAAAAAABWs/RAXNJm5NDPk/s1600/greys.gif"});
});
</script>

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://stylifyyourblog1.googlecode.com/svn/trunk/lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(".post-outer img").lazyload({placeholder : "http://2.bp.blogspot.com/-7mu1o035Ssk/TqmCSGtOLaI/AAAAAAAABWs/RAXNJm5NDPk/s1600/greys.gif"});
});
</script>

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 Gtmetrix.com 


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 Gtmetrix.com

Lazy Load Disabled URL: http://www.demo.stylifyyourblog.com/2011/10/lazy-load-disabled.html

Lazy Load Enabled URL: http://www.demo.stylifyyourblog.com/2011/10/lazy-load-enabled.html


Have a Opinion ,Share It !

Speech Enabled Input Fields in Chrome

Voice Enabled Input Field ImageMany have heard of Google Voice Search - It allows you to speak through the microphone to populate the input field (something like Siri minus the answer back feature).

In this post, I will discuss how simple it is to enable voice input for a text field in your blog. Of course, speech enabled input is a work in progress and currently works only with Google Chrome . And at times, the results are quite funny but that is not a problem. In the future, we should be seeing more of these interactions and right within the browser itself.

Speech Enable Search




The results will depend on your accent and what you’re saying. Some of my attempts :



"hello" resulted in "hello" [ understand normal language ]


"google" resulted in "google" [ Well they made the stuff ]


"facebook” resulted in “facebook” [ FB is famous ]


"hello Prayag what are you doing" resulted in "hello seattle what are you doing" [ Replaced my name with seattle? ]


Some Arbitrary sound resulted in "new york" [ ?????????????????????? ]


In general, though, regularly-used English words and numbers are parsed surprisingly well given that the system isn’t trained to recognize your particular dulcet tones.


For any normal input field like :



<input type="text" />


Just add the x-webkit-speech='x-webkit-speech' to it like this :



<input type="text" x-webkit-speech="x-webkit-speech" />


You can see the demo Here: (Only for Google Chrome Users)

Pagination in Blogger

Page Navigation ImagePagination or Page Navigation as it is called is not inbuilt into Blogger, but can be achieved with a simple hack. The main motive behind it is to make your Blog look more organized and make navigation easy for your visitors. Its simple and easy to integrate and styling can be changed as per your wish.




Recently Google Code is having problem and this might have rendered the widget useless. To solve this problem remove the following line

<script src='http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>

and replace it with
<script type='text/javascript'>
//<![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}('6 I;6 i;6 f;6 n;1f();C 1g(15){6 5=\'\';J=K(N/2);4(J==N-J){N=J*2+1}A=f-J;4(A<1)A=1;d=K(15/j)+1;4(d-1==15/j)d=d-1;D=A+N-1;4(D>d)D=d;5+="<3 7=\'1A\'>1B "+f+\' 1C \'+d+"</3>";6 16=K(f)-1;4(f>1){4(f==2){4(i=="o"){5+=\'<3 7="1D"><a 9="\'+B+\'">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">\'+O+\'</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+16+\');w x">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+16+\');w x">\'+O+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' ... \'}1h(6 l=A;l<=D;l++){4(f==l){5+=\'<3 7="1E">\'+l+\'</3>\'}b 4(l==1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+l+\');w x">\'+l+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+l+\');w x">\'+l+\'</a></3>\'}}}4(D<d-1){5+=\' ... \'}4(D<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+d+\');w x">\'+d+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+d+\');w x">\'+d+\'</a></3>\'}}6 17=K(f)+1;4(f<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+17+\');w x">\'+1i+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+17+\');w x">\'+1i+\'</a></3>\'}}5+=\'<1j><a 9="1F://1G.1H-1k.1I" 1J="1K-1L: 1M; 1N: 1O; 1P: 1Q;" 1R="1S">1T 1U 1V-1k</a></1j>\';6 E=y.1W("E");6 18=y.1X("1Y-1Z");1h(6 p=0;p<E.P;p++){E[p].1l=5}4(E&&E.P>0){5=\'\'}4(18){18.1l=5}}C 1a(Q){6 R=Q.R;6 1m=K(R.21$22.$t,10);1g(1m)}C 1f(){6 h=u;4(h.e("/r/s/")!=-1){4(h.e("?S-c")!=-1){n=h.F(h.e("/r/s/")+14,h.e("?S-c"))}b{n=h.F(h.e("/r/s/")+14,h.e("?&c"))}}4(h.e("?q=")==-1&&h.e(".5")==-1){4(h.e("/r/s/")==-1){i="o";4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n("<m T=\\""+B+"U/V/W?c-k=1&X=Y-Z-m&11=1a\\"><\\/m>")}b{i="s";4(h.e("&c-k=")==-1){j=20}4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n(\'<m T="\'+B+\'U/V/W/-/\'+n+\'?X=Y-Z-m&11=1a&c-k=1" ><\\/m>\')}}}C L(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C M(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W/-/"+n+"?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C 1b(Q){1c=Q.R.24[0];6 1y=1c.1z.$t.F(0,19)+1c.1z.$t.F(23,25);6 1d=26(1y);4(i=="o"){6 1e="/r?S-c="+1d+"&c-k="+j+"#G="+I}b{6 1e="/r/s/"+n+"?S-c="+1d+"&c-k="+j+"#G="+I}27.9=1e}',62,132,'|||span|if|html|var|class||href||else|max|maksimal|indexOf|nomerhal|showpageNum|thisUrl|jenis|postperpage|results|jj|script|lblname1|page|||search|label||urlactivepage|onclick|return|false|document|newInclude|mulai|home_page|function|akhir|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|div||innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|http||||style|font|size|0pt|float|right|margin|0px||||||getElementsByName|getElementById|blog|pager||openSearch|totalResults||entry|29|encodeURIComponent|location'.split('|'),0,{}))
//]]>
</script>


How To implement it into your Blog :
1. Login to Blogger Dashboard and navigate to Design > Edit HTML (For new interface Templates > Edit HTML)

2. Don’t click the checkbox which says ‘Expand Widget Templates’

3. Find this (Using CTRL +F) ]]></b:skin>
4. Copy the following code just Before/Above it. (See How to Copy Code Easily)



.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;} 
.showpageNum a,.showpage a {background:#069; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageNum a:hover,.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}
.showpagePoint {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}



5. Now paste the following code just Before/Above the </body> tag (Search Using CTRL+F)




<script type='text/javascript'>;
var home_page=&#39;/&#39;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord =&#39;Prev&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>



Some basic options:

postperpage : Number of Post that will appear on a Page

numshowpage : Number of Pages that will appear in the Page Navigation Menu

upPageword : Word or phrase that will appear in the Forward Link

downpageWord : Word or phrase that will appear in the Backward Link

Note: Make sure that the "postperpage" value and "Number of posts on main page" value (Present in the Design > Page Elements > Blog Post) is same

Note: You will observe that ,after applying it ,there are some problems while accessing the Labels using the Default Labels widget. To rectify, Tick on the "Expand Widget Templates" and search for

'data:label.url'

Replace It with:

'data:label.url + "?&amp;max-results=4"'

Make sure the Number is same as the value of "postperpage" value

6. Click on "Save Template" and you are ready to rumble

Having Problems ? , feel free to ask

Adding Free Forum To Blogger

Vanilla Forum ImageA forum is a great way to interact with the readers of your blog and let them connect with each other. In this post I will show you how easy it is to add a free forum to your blog using a free Hosting & Vanilla Forums. Vanilla Forums are considered to be the best forums around the web mainly due to the sheer number of customization possibilities present. This tutorial is a bit lengthy and involves some geeky things .



See Demo




Now Lets Get started:
This tutorial mainly require 3 things that you need before you get started with anything:


1. x10Hosting Account (The place where you will host )                              SignUp
2. Vanilla Forum Package (The thing that you will host)                               Download
3. FileZilla (Thorugh which you will upload Vanilla into x10Hosting )                  Download

Firstly signup for x10Hosting Hosting from the above link.

If you are asking why (and why only this one). The reason is because it is a free hosting which provides Unmetered Bandwidth and also provides fsockopen() (a PHP function which is required for Vanilla Forum user registration ,also it is not available in any other free hosting Service I know ) For More information on its feature you can see here.


After you will signup you will get a email to verify your Account, after that (about 23 hours for me) you will get another mail containing credentials about your Hosting account something like this:

See this mail can take a bit of time to reach so you will have to keep patience.Only after getting this mail proceed further


After you have gotten the Hosting Account mail, Sign In into your account

After that scroll down to the Databases Tab and Click on "MYSQL Database Wizard"


Note: In case you having problem the following Steps:

Under the Softwares/Services Tab ,click on Softaculuos and under Forum ,click on Vanilla and Install it

 Now you will be asked the name of the new database and also asked to create a Database user,just make a note of all these things


After that go back to the home page and Click on FTP Accounts and under Special FTP Accounts note the details of the first account




Now after Downloading Vanilla Forum Package:

Don't forget to checkout the various Addons that you can apply to your forum, for example we will be taking the ReplyTo Addon.


The reason why I stressing to download plugins and themes beforehand is because x10Hosting being a free hosting, sometime it becomes very difficult to upload to it after the intial (3-5 days) period after signup. The reason being in the beginning they treat your account as a Premium Account so you log into FTP Clients and upload easily , after you addicted to this kind of service they withdraw it ,so that you buy it from them.

After downloading Unpack both the compressed folders, go to the subfolder of ReplyTo plugin and copy the folder Named ReplyTo and then go to "vanilla-core" something folder and paste the ReplyTo folder into the Plugin folder there.


Now Comes the part related to FileZilla, for starter its a FTP client, after downloading and installing it. Open it and put the information you got from the "FTP Accounts" in the dashboard of x10Hosting



Now click on the + sign and open the public_html folder



Delete everything it contains and now paste all the contents of "vanilla-core" something folder into the above space. Now this process will take a bit of time (about 10-15 minutes). After the process is over ,go to your browser and type the URL you selected while Signing Up,You will see something like this



Let Database Host remain as localhost , for the rest of the fields enter the information accordingly.After successful creation of your Forum you will be taken to the Dashboard


In this firstly go the Registration tab in the right and it will ask you to go to Recaptcha site ,and register your site. There enter the URL of the site you created using x10Hosting and paste the Public and Private key in the dashboard. This will allow users to signup for your Forum.

Now comes the main part, Go to the Plugins link in the Right , in there enable the <Embed> Vanilla Plugin, After that click on Settings ,After that copy the code and paste it in a Static Page Your Forum is ready to use.

In the Plugins tab you will also see the ReplyTo plugin which you pasted into it Plugins folder. Similarly you can change the themes.

Don't Forget to checkout Stylify Your Blog's Group Here.
________________________________________________________________________

Note: Incase you having problems with the hosting things, then Vanilla Forums provides a Free Forum hosted at their end but with one downside that it(The Forum) cannot have more than 30 members. Check out the Link Here

Implementing SuperSized in Blogger

Supersized jQuery PluginSupersized is a jQuery plugin that automatically resizes (background) images to the size of the browser while maintaining image dimension ratio and runs them as a slideshow in simple words its a Full Screen Slider.

There is no extra whitespace, no scrollbars – the entire browser window is always filled. It is lightweight and is compatible with Firefox, Safari, Opera, IE7, and IE6. It also allows integration with Flickr API.




See Demo



Steps to Add it to Blogger:

1.Login to the Blogger account



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


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

<style>
#supersized {
position:fixed;
left:0;
top:0;
overflow:hidden;
z-index:-999;
height:100%;
width:100%;
}
#supersized img{
width:auto;
height:auto;
position:relative;
display:none;
outline:none;
border:none;
}
#supersized.speed img {
-ms-interpolation-mode:
nearest-neighbor;
image-rendering:-moz-crisp-edges;
}
/*----------------------------------------------------
{--------} Speed {--------}
----------------------------------------------------*/
#supersized.quality img {
-ms-interpolation-mode:
bicubic;
image-rendering:
optimizeQuality;
}
/*----------------------------------------------------
{--------} Quality {--------}
----------------------------------------------------*/
#supersized a {
z-index:-30;
position:absolute;
overflow:hidden;
top:0;
left:0;
width:100%;
height:100%;
background:#111;
}
#supersized a.prevslide { z-index:-20; }
#supersized a.activeslide { z-index:-10; }
#supersized a.prevslide img, #supersized a.activeslide img{ display:inline; }
</style>

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




4.Now for adding the images into this plugin see the following markup:





<script type='text/javascript'>
//<![CDATA[
jQuery(function($){
$.supersized({
//Functionality
slideshow:1,//Slideshow on/off
autoplay:1,//Slideshow starts playing automatically
start_slide:1,//Start slide (0 is random)
random: 0,//Randomize slide order (Ignores start slide)
slide_interval:5000,//Length between transitions
transition:1,//0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed:1000,//Speed of transition
new_window:1,//Image links open in new window/tab
pause_hover:0,//Pause slideshow on hover
keyboard_nav:1,//Keyboard navigation on/off
performance:1,//0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect:1,//Disables image dragging and right click with Javascript
//Size & Position
min_width:0,//Min width allowed (in pixels)
min_height:0,//Min height allowed (in pixels)
vertical_center:1,//Vertically center background
horizontal_center:1,//Horizontally center background
fit_portrait:1,//Portrait images will not exceed browser height
fit_landscape:0,//Landscape images will not exceed browser width
//Components
navigation:1,//Slideshow controls on/off
thumbnail_navigation:1,//Thumbnail navigation
slide_counter:1,//Display slide numbers
slide_captions:1,//Slide caption (Pull from "title" in slides array)
slides:[//Slideshow Images
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wanderers-kitty.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg'},{image : 'http://4.bp.blogspot.com/-FbRA-c7XN7w/ToFyfWteFxI/AAAAAAAAAyI/5Wh2ELU1jC4/s000/1.jpg'},
{image : 'http://2.bp.blogspot.com/-RobdhmLJJqw/ToFyfzX1gcI/AAAAAAAAAyM/WpNVMsp3jeE/s000/2.jpg'},
{image : 'http://2.bp.blogspot.com/-MFnQY9BN13o/ToFygdGxjRI/AAAAAAAAAyQ/fYOg05RsgjU/s000/3.jpg'},
{image : 'http://3.bp.blogspot.com/-C_x-CxMlq18/ToFyglftaKI/AAAAAAAAAyU/Id1R2ZTGUuQ/s000/4.jpg'},
{image : 'http://2.bp.blogspot.com/-En9rLi9a3Ag/ToFyhDg5lZI/AAAAAAAAAyY/CxUZyX6RONU/s000/5.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wilderness1.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/day2-emily.jpg'}
]
});
});
//]]>
</script>

All the options are explained with very understandable comments.



5.Now save the Post/Page.

Having any problem ,please feel free to ask

See Demo


Optimizing Your Blog's Load Time

GTmetrix PictureAny Websites Load Time is a vital factor in its ability to engage its readers. Studies show that users leave a site if it hasn't loaded in 4 seconds. Knowing the above facts it becomes really important to optimize your blogs accordingly. The main services for this stuff are Google's Page Speed and Yahoo's YSlow but both are bit technical and not that graphical. Here comes the Service called GTmetrix.com ,it combines the results of the above services and is bit more easy to understand.Not only does it provide suggestions it also provides actionable recommendations to fix those.



To test Your Blog's Score
Go to GTmetrix.com and Enter the URL and Press Go, after a bit of time you will get a very detailed Report discussing all your Websites Parameters. Here a bit of information about some of them.



Now after this it will be a easy to follow ,as not only does GTmetrix suggests you what is wrong but it also gives the optimized versions of the things. For example they give the Losslessly compressed versions of images which are capable of being compressed .


Now some very important things to consider while optimizing your Score


  • Optimizing Images: Make sure you loselessly compress all the images on your blog to reduce your Page Size
  • Combine images using CSS sprites: This becomes very important if you have a lots of Social Media Icons on your blog, as it increases the Page Requests
  • Specify image dimensions: Make sure you add a width and height tag to all your images, this is considered good for Search Engines as well
  • Remove Unused CSS: Make sure you delete any CSS left out from any buttons or menus which you previously used
  • Place CSS in Head :Any external CSS file should be placed in the head tag as it helps in fast rendering of the Page


Some of the suggestions will be out of your hands, as Blogger doesn't gives you any control over them , like 


  • Leverage browser caching: Blogger doesn't give you access to the .htaccess file where you have to set the expiry date for your resources, making them cacheable.
  • Avoid CSS expressions: The main CSS of Blogger is dynamic in nature , for the Template Designer to work. This makes use of variables in CSS which is considered bad. 
  • Reduce DNS lookups: As Blogger doesn't give any custom CDN for your Blog, Images and JavaScript are loaded from various domains, increasing chances of failures
  • Default CSS File: Blogger loads a CSS file namely bundle.css ,over which you have no control. This file has a lot of CSS which remains unused on any Given Page




Now some general suggestions for improving Page Load time:


  • Put all JavaScript at the end of body tag , this lets the page's CSS and JavaScript to load in parallel.
  • Remove all useless gadgets from your Blogs specailly the Traffic Gadget, if you want better insights try Google Analytics 
  • Go through your HTML and check out for any piece of code which is not being used but is still present.
  • Remove Gadgets like FB LikeBox and Followers Gadget, as the images of members that are loaded ,very badly effect Load Times and Page Size.
  • Use b:if tags .For example if you have share buttons on the Post page alone then make sure that the scripts related to these are loaded on Post Page only.


Even though there are lot of limitations in Blogger, you can still achieve a very good Scores by tweaking a little bit. Here is a Extreme Modification that can be done to Blogger for Better Scores: (Try This only if your a Pro in Blogger Templates )


This modification will render your Template Designer Completely useless, but on the other hand reduce your Page Size by atleast a 100-150KB.


1.Go to Design > Edit HTML (In New Blogger Interface Go to Template > Edit HTML).


2. Search for b:skin term using CTRL+F method and remove everything in between the B:skin tags so that it looks something like this 



3. Now open your Blog in a New Tab and Right Click anywhere and Click on "View Page Source". Search for the term page-skin-1 . After finding it scroll down a till all you find the </Group> , now copy all the CSS code below this till the closing B:skin tag like this




4. Paste this code back into the Edit HTML and Save your Template.


Everybody has a different blog and the problems faced while optimizing  would be wide ranging. Incase you are unable to solve them, please feel free to share. If you get frustrated at any stage stating Blogger Platform as the reason , then these are the score of SYB.



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 www.contactme.com  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 www.wufoo.com 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.

Side Floating Social Media Buttons

Side Floating Social Media Buttons ImageAs asked by some of my readers, here’s a tutorial on how to add a Side Floating bar of social media buttons to a Blogger blog. I made it into a gadget, so you don’t have to go into your template HTML to install (or remove) them. Just drop the whole code into a HTML/Javascript gadget.

I have included Facebook Share, Tweet, Stumble, Delicious and Digg This buttons in the bar. Each of them comes with a live counter. These buttons are from ShareThis.com so you can track your shares easily too. There is also a added a functionality for closing this sidebar if your readers don't like it. You can add more social bookmarking or sharing buttons later if you wish.


Demo











Adding the Side Floating Buttons

1. Login to your Blogger account.
2. Go to Design > Page Elements.
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .
5. Copy the code below and paste it inside the content box. (See how to Copy Easily)

<style>
#pageshare {position:fixed; top:25%; left:5px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#f8f8f8;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

span.linkopacity {
filter:alpha(opacity=0.1);
-moz-opacity: 0.1;
opacity: 0.1;
-khtml-opacity: 0.1;}

span.linkopacity:hover {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='margin-left: auto; margin-right: auto;'>

<span class='st_facebook_vcount' displaytext='facebook'/>
<span class='st_twitter_vcount' displaytext='tweet'/>
<span class='st_digg_vcount' displaytext='digg'/><center><span class='st_delicious_vcount' displaytext='save'/>
<span class='st_stumbleupon_vcount' displaytext='share'/></center>
</div>


Note: After pasting this code into the gadget , you will have to go to This URL and after sharing selecting any button arbitrarily , Click on Oauth Widget > Get the Button and then on the other page copy the second Code containing the scripts. Paste this code into the Gadget. The Main purpose of this code is to make the buttons work as well as tracking the share activity.






6. Save the gadget.
7. Drag the gadget and reposition it under Blog Posts gadget.
8. Click Save button on upper right corner.


Customizing



1. Vertical alignment
Change the value of top in code line 2. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.

2. Horizontal alignment
Change the value of left in code line 2. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right.

3. Removing and Adding Buttons
Just go to ShareThis.com and get the button code of your choice and place it in the Line 32 of the Code, for Eg

<span class='st_facebook_vcount' displaytext='facebook'/>

Now incase you want to track your share activity , just Register with ShareThis.com and Go to their Dashboard.From their you can easily track the share activity.

4. Making it Appear on Selective Page 
If you want this to appear on only Post pages then you will have to go to Design > Edit HTML (As per new Interface Go to Template > Edit HTML).Tick the "Expand Widget Templates" and Then search for the Title of Gadget (If you have not given any title then give a dummy title like "abcd" and search using CTRF+F for this term) . Now see the following code

<b:widget id='WidgetID' locked='false' title='abcd' type='HTML'>
<b:includable id='main'>
PUT CONDITIONAL TAG HERE
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#WidgetID {display:none;}/*to hide empty widget box*/
</style>
</b:if>
</b:includable>
</b:widget>


List of conditional tags


Replace the "PUT CONDITIONAL TAG HERE" in the above code with any one of the thing.

1. Index (list) pages

Index pages include homepage, labels page and yearly archive page.
<b:if cond='data:blog.pageType == "index"'>

2. Post (item) page

<b:if cond='data:blog.pageType == "item"'>

3. Static Page

<b:if cond='data:blog.pageType == "static_page"'>

4. Archive page

<b:if cond='data:blog.pageType == "archive"'>

5. Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>

6. Specific page/url

<b:if cond='data:blog.url == "PUT_URL_HERE"'>


Now after putting the conditional tag, Preview the code and then Save.

Have any suggestions, feel free to share


Demo
 
© 2009 Blogger Tips 2013 | Powered by Blogger