0 HOW TO REDUCE A BLOG'S PAGE-LOAD TIME.

A blog's load time is one of the major things that needs to be taken into consideration as a blogger.

You will agree with me that no one wants to stay long on a blog that takes so long to load.

In order to reduce a blog's load time due to massive image files on a web page,you might consider adding the 'jQuery Lazy Load' plugin.

With this plugin,all images on a webpage are delayed,thereby helping to reduce the server load and make long web-pages with images load faster.

How do you add this plugin?

It is actually very easy & takes the normal routine of editing a template.So,all you've got to do is follow the instructions below.

Login to Blogger » Go to Design/Layout » Edit HTML.
Check the box next to Expand Widget Template.
Next,locate </head> in your template by pressing CTRL+F and Copy-Paste the code below just ABOVE/BEFORE it.

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://beautifulbloggerwidgets.googlecode.com/files/lazyload-min.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$(&quot;img&quot;).lazyload({placeholder :&quot;http://beautifulbloggerwidgets.googlecode.com/files/grey.gif&quot;,threshold : 200});
});
</script>

Preview & Save your template.
Hope this helps!!!

Read more »

6 GRAB THIS AWESOME SOCIAL BOOKMARKING WIDGET WITH 3D EFFECT.

In our previous post,we discussed on “How to Add Animated Follow-us widget to blogger”.

So likewise,in this tutorial we will be dealing with how to add animated social bookmarking widget with 3D effect.

This widget is so cool that when hovered on,spins 360 degrees and spins back when released.
To add the widget on your blog,just follow the instructions below.

Login to Blogger,then go to Design » Page element and select 'Add a gadget'.
Now,locate "HTML/JAVASCRIPT" and select ADD.
Just copy/paste the code below and save the widget.

<style>
#social a:hover{background-color:transparent;opacity:0.7;}
#social img {-moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition:all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}
#social img:hover { -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg);}</style>
<center>
<div id="social">
<!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR FEED URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIeRwrqwuAqvcUlwOwBBPYsSwYp_gHalossIBr5iagaK30uLcU9OdQe2cvNlf_3CHy9N_tlUXxFty0PdyLurPaDz-b61JKynG2M1aDI3ycG5sRFikvhfyYBRbSVAbzkWCbhjkS_oDa99zq/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End RssIcon-->
<!--Start Email Rss Icon-->
<a rel="nofollow" title="Get Free Updates Via Email" href="YOUR EMAIL RSS URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKC-yW01-1uo6VQlHHA162gbzntUdytr-CVfz0WJ63cBvIBVlh6sdyFkXE-hp6rumqHWmyqjY-i1CNCeMSRJIMbLl_DtTH-Dkd8cYcHx8Tahir0AUlSqZxGAGacuH6ElvUrzo8ZwNLmkbd/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Email Rss Icon-->
<!--Start Facebook Icon-->
<a rel="nofollow" title="Like Our Facebook Page" href="YOUR FACEBOOK PAGE URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4M97PcF8xNpiPBPVb-Z_IUEVWHPLXFdMYFRkaathLgvNQdQ8eobpfsfpjRS-4nl8i-WmyRlMh7mXI2X-xdj7sNz1T0pkNIB3hsBwGKYWVsUFot3I3mJiY0rQqR8lLaY2_9G41kEwKYdTe/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Facebook Icon-->
<!--Start Twitter Icon-->
<a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR TWITTER URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir0aVbHXHydX2402mJnzrAEumNIHNHqwDw5IXFpVSL0Pl8O255f0PJ_RQltFYfvIxuocSSpBPlqGGvtyp1267KCn4hEHPXR5pZGlkskyQK1cRrwz0SPbIO2_HlCoQfrmEAe5lqhtWBURAx/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Twitter Icon-->
<!--Start Google Icon--> <a title="Follow Us On Google " rel="nofollow" href="YOUR GOOGLE PLUS URL HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGSZLpT5k_J6AHfesUJWnmuVZbnMVN2BxQjEFK2Tu8jZMr-8U8oPWQuPIxe53xSYbUGfD015KO2l8tSkhefy33JPijF5l6SKHuyeBc_SyfzoiFy18KnioUYcBm_6PSTH_q44hRjhVUzSs/s1600/GOOGLE-PLUS-48x48.png"/></a>
<!--End Google Icon-->
<!--Start Pinterest Icon-->
<a title="Follow Our Pins" rel="nofollow" href="YOUR PINTEREST URL HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQXPpMuezF38H6B7pr3J9ElPTkKinCrvBjmoEMY1muNG6DfYS4QjR7EypB90RHP9sQaFUeVH9zRzwsMIzdixNTXguvySbPa-qjNYZ6dzaENmT8KJ99zReAFWdC2qGBzfFYx3W3fabbXO7V/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>
<!--EndPinterest Icon--></div>
<!--Start Feed Count Button--> <a href="FEEDBURNER URL HERE" target="_blank"><img alt="Feedburner" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a>
<!--End Feed Count Button--> </center>

NOTE 
If you don't have any of these urls,you can simply remove it for the time being.
Just delete all codes from where you see 'START' to the 'END' part.

Read more »

3 ANIMATED FOLLOW-US WIDGET FOR BLOGS.

Have you ever wondered if it's really possible to have an animated widget?...

If yes,then I'm glad to introduce to you this animated 3D[three dimension] FOLLOW-US widget which can easily catch the attention of your blog visitors.

It was designed in form of a square which rises and changes from gray to a stupefying color when hovered upon.

To add this widget in your blog,here's what you need do →
Login to Blogger,then go to Design » Page element and select 'Add a gadget'.
Now,locate "HTML/JAVASCRIPT" and select ADD.
Just copy/paste the code below and save the widget.

<style>.blogtoolz-flt-wdt{position:fixed; right:10px; top:36%;}
.blogtoolz-flt-wdtimg {float:right; clear:right; margin:1px; -webkit-transition:all .0s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition:all .2s ease-in-out; transition: all .2s ease-in-out;}
.blogtoolz-flt-wdt img:hover{-moz-transform:scale(1.2) rotate(6deg);-webkit-transform: scale(1.2) rotate(6deg);-o-transform: scale(1.2) rotate(6deg); -ms-transform: scale(1.2) rotate(6deg); transform: scale(1.2) rotate(6deg);}</style>
<div>
<style>
.BlogToolz1{display: block;width:64px;height: 64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_rollout_64x64.png') bottom; text-indent:-99999px;}
.BlogToolz1:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_color_64x64.png')bottom; height: 64px;}
</style>
<a href="Your Facebook Link Here"></a>
<style>
.BlogToolz2{display:block;width:64px;height:64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/twitterl_rollout_64x64.png') bottom;text-indent:-99999px;} .BlogToolz2:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/twitter_color_64x64.png') bottom; height: 64px;}
</style>
<a href="Your Twitter Link Here"></a>
<style>
.BlogToolz3{display:block;width:64px;height:64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_rollout_64x64.png') bottom;text-indent: -99999px;}
.BlogToolz3:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_color_64x64.png') bottom; height:64px;}
</style>
<a href="Your Rss Feed Link Here"></a>
<style>
.BlogToolz4{display:block;width:64px;height:64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_rollout_64x64.png')bottom;text-indent: -99999px;}
.BlogToolz4:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_color_64x64.png') bottom; height: 64px;}
</style>
<a href="Your Google Plus Link Here"></a> </div>
<!-- Animation widget ends -->

That's it.Just replace the necessary things there i.e the blue texts and save the widget.

Read more »

0 HOW TO MOVE BLOGGER NAVIGATION BAR DOWN.

There are couple reasons you might want to keep the default blogger navigation-bar in your blog.

In a post sometimes ago,I gave a quick tip on how you can remove the bar from a blog.
But,if you think the bar is useful and you would like to retain it in your blog,you might consider moving it from its position down to the bottom of the blog.

Here's How To...

Login to Blogger.
Go to Design/Layout»»Edit HTML.[Backup your template in case something goes wrong.]

Check the box next to
Expand Widget Template and search for ]]></b:skin> by pressing CTRL+F

When found,just Copy-Paste the following piece of code directly ABOVE it.

#navbar-iframe {position: fixed;right:0px;bottom:0px;left:0px;}

Next,preview your blog to ensure the are no errors and thereafter,SAVE your template.

That's all.You should see the bar at the bottom of the blog now!!!

Read more »

0 HIGHLIGHT AUTHOR COMMENTS IN BLOGGER.

Many are cases whereby the visitors of a blog go through the stress of viewing each comment on a post in order to locate the author's comment.

In order to save them that stress,it is very necessary to highlight your comments "as a blogger".

Apart from the stress being curbed in the process,it also helps to dignify a blog author's comment amongst several others.

Before we proceed with this tutorial,you might want to spare a little time to go through the following tutorials →

1. Add a Reply Button To Blogger Comments.
2. How To Change “Post A comment” Text in Blogger.
3. How To Customize Blogger Comment-Message.
   
4. Add a Comment Policy To Blogger.
5. Numbered Comment Hack For Blogger Blogs.

How To Highlight Author Comments in Blogger.

First,Login to Blogger.
Go to Design/Layout→→Edit HTML.[Backup your template in case something goes wrong.]

Check the box next to
Expand Widget Template and search for the following piece of code by pressing CTRL+F

<p><data:comment.body/></p>

Note»
The above code will be seen twice,you have to use the second

Next,Replace the code found above with the following snippet of code.

<b:if cond='data:comment.author== data:post.author'>
<p style='border:1px dotted#008e00; color:#00ff00;background:#d80000;width:auto;padding:4px;'>
<data:comment.body/></p>
<b:else/>
<p>
<data:comment.body/></p>
</b:if>

Having done that,preview your template then finally save it.

To change the color,background,border style etc of the comment,simply play around with the css codes highlighted in the snippet above and that will be all.

Read more »