How To Reduce Page Load Time

All the webmasters would agree that page load time should be as low as possible. This post will focus on HOW TO REDUCE THE PAGE LOAD TIME which is a key factor to increase the functionality of the blog or site. An optimal page load time should be less than 5 seconds. Without wasting any more time, let me give you top 10 possible ways to reduce the page load time:

1) AVOID FLASH CONTENT
Flash content is header or titles should be avoided as they take a long time to load.

2) MAKE YOUR HOMEPAGE AS SIMPLE AS POSSIBLE
Another major point that you must consider is to make your homepage simple. By simple I mean to say that it should not contain any unnecessarily flash content and heavy images.

3) REDUCE THE SIZE OF IMAGES
Size of the images should be kept low. Try using gif rather than png or jpeg. Also if possible, make your blog posts continue reading enabled (which you can learn from here) and try not to show large or animated images on your front page.

4) LIMIT YOUR BLOGROLL
You should limit your blogroll to 10-15 links only. Large number of links will make your blog take a larger time to load.

5) AVOID USING TOO MANY JavaScripts
Excessive loading of javascript can increase your page loading time.Technorati and other commenting systems scripts use these kind of scripts.

6) AVOID USING LARGE AMOUNT OF WIDGETS
Widgets take a lot of time to load. You must minimize their usage.

7) AVOID SCRIPT SOURCING TO OTHER WEBSITES/BLOGS
If you have placed a link or an image by loading javascript from that site, it will consume a large number of time in linking to those websites. This must be minimized.

8) AVOID AJAX
Just like javascript, ajax is also a cause for slow loading of web pages.

9) AVOID LARGE and SLOW LOADING GRAPHICS
Clearly understandable from the heading itself, these increase the page load time.

10) CHOOSE A SIMPLE TEMPLATE
Chosing a simple and smooth template will make your page load faster. Avoid pop-ups and limit the number of widgets.

I am sure if you will follow thw above steps, you will be able to reduce your page load time. If you are facing any problems in any of the above mentioned points, you can use the comments form.

Create Tabbed Navigation in Blogger | How To

Tabbed Navigation menu in blogger provides much more things in less screen area. It is very usefull in many ways you can also use it just like I’ve used it on my site. I’ve used Javascript Tabifier to explain the use of Tabbed Navigation in your Blog. You can check out the Javascript Tabifier homepage at Barelyfitz. An Example of Tabbed Navigation is given at Tabber Example Page.
To add a menu like the one shown below-




Just follow the steps Explained-

  1. Go to your blog’s Edit HTML page by clicking on Layout.
  2. Expand your widgets template.
  3. Go on pasting following codes as specified

    • Copy and Paste the following code above ]]> by searching for ]]> as done in previous post.
      #tabsidebar-wrapper{
      width: 353px;
      /* This will manage the width of the tab content. Usually this be same as your sidebar*/
      float: left;
      margin: 0px 0px 0px 6px;
      border: 1px none #ECECEC;
      }
      .tabberlive .tabbertabhide {
      display:none;
      }
      .tabber {display:none;}
      /*--------------------------------------------------
      .tabber = before the tabber interface is set up
      .tabberlive = after the tabber interface is set up
      --------------------------------------------------*/
      .tabberlive {
      margin-top:1em;
      }

      /*--------------------------------------------------
      ul.tabbernav = the tab navigation list
      li.tabberactive = the active tab
      --------------------------------------------------*/
      ul.tabbernav
      {
      margin:0;
      padding: 3px 0;
      border-bottom: 1px solid #778;
      font: bold 12px Verdana, sans-serif;
      }

      ul.tabbernav li
      {
      list-style: none;
      margin: 0;
      display: inline;
      }

      ul.tabbernav li a
      {
      padding: 3px 0.5em;
      margin-left: 3px;
      border: 1px solid #778;
      border-bottom: none;
      background: #307396;
      text-decoration: none;
      font-size : 17px;
      font-weight: normal;
      }

      ul.tabbernav li a:link { color: #FFFFFF; }
      ul.tabbernav li a:visited { color: #667; }

      ul.tabbernav li a:hover
      {
      color: #000;
      background: #3D99C8;
      border-color: #227;
      }

      ul.tabbernav li.tabberactive a
      {
      color: #BF0000;
      background-color: #fff;
      border-bottom: 1px solid #fff;
      }

      ul.tabbernav li.tabberactive a:hover
      {
      color: #000;
      background: white;
      border-bottom: 1px solid white;
      }

      /*--------------------------------------------------
      .tabbertab = the tab content
      Add style only after the tabber interface is set up (.tabberlive)
      --------------------------------------------------*/
      .tabberlive .tabbertab {
      padding:5px;
      border:1px solid #778;
      border-top:0;
      background: #fff;
      /* If you don't want the tab size changing whenever a tab is changed
      you can set a fixed height */

      /* height:200px; */

      /* If you set a fix height set overflow to auto and you will get a
      scrollbar when necessary */

      /* overflow:auto; */
      }

      /* If desired, hide the heading since a heading is provided by the tab */
      .tabberlive .tabbertab h2 {
      display:none;
      }
      .tabberlive .tabbertab h3 {
      display:none;
      }

    • Now Paste following code just after ]]>
      <script src=’http://gohitech.googlecode.com/files/tabber.js’ type=’text/javascript’/>
    • Now search for code where Sidebar begins. It usually begins with <div id=’sidebar’>. Paste following after it
      <div id='tabsidebar-wrapper'>
      <div class='tabber' id='tab1'>
      <div class='tabbertab'>
      <b:section class='sidebar' id='tabbertab1' preferred='yes' showaddelement='yes'>
      <b:widget id='HTML31' locked='false' title='Recent Posts' type='HTML'/>
      </b:section>
      </div>
      <div class='tabbertab'>
      <b:section class='sidebar' id='tabbertab2' preferred='yes' showaddelement='yes'>
      <b:widget id='HTML30' locked='false' title='Top Posts' type='HTML'/>
      </b:section>
      </div>
      <div class='tabbertab'>
      <b:section class='sidebar' id='tabbertab3' preferred='yes' showaddelement='yes'>
      <b:widget id='HTML29' locked='false' title='Tag Cloud' type='HTML'/>
      </b:section>
      </div>
      </div>
      </div>
  4. Now go to Edit HTML => Page Elements. There you will get some thing like shown below
  5. Just go on adding content by clicking on different tabs. The other way to do this is also given at Bloganol.com

Links: Download PDF of this post | Get Blogging Tricks

Add Retweet option to your Blog

You must have seen some icons like that of Digg floating around your blog’s post and asking you to submit that article to Digg. A similar widget is now available for Twitter also. You can try this widget in your Blogger blog by following some of the very easy steps.



Retweet button comes from Tweetme which offers two types of buttons as show below-

Big SizedCompact Style

I am posting here method of Installing both versions.
Firstly, For Compact Style button-

  1. Go to Layout =>  Edit HTML => Mark Expand Widget Templates
  2. Find <p><data:post.body></p>, and just above it place the following code-
    <div style=’float:right; margin-left:8px;’>
    <script type=”text/javascript”>
    tweetmeme_style = ‘compact’;
    </script>
    <script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”></script></div>
  3. Click on Save template and see the result.

For Normal Digg like button-

  1. Step 1 and 3 are same as above.
  2. Just paste following code instead of code in step 2
    <div style=’float:right; margin-left:8px;’>
    <script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”></script>
    </div>

Get cool Yahoo Emoticons in Blogger

This post is for the persons who uses Blogger as Platform for their blog. You can get Yahoo Emoticons in your blog using blogger by two simple steps.

  1. Get Firefox Web Browser and Install Greasemonkey addon.
  2. Install the userscript for Blogger



When you will be done with above Installations, you will be able to get Yahoo Emoticons in your blog editor like shown below

Links :- Get Firefox | Greasemonkey | Yahoo Icons User Script

Add Yahoo Media Player to your Music Blog

If you are having a blog or a website which contains link to music files, and dedicated t music then you can use Yahoo Media Player on your blog/website. To do this you just need to upload your song to a direct link server like http://upload.pk. Then after getting link of your music file paste it in your site as usual as you do it using anchor tag. To use Yahoo Media Player, just add following code before </head> section in your blog or any where in your site.

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>


Link


You will get link like as shown above. If you are reading this post in your feed reader than you might not be able to see the effect of Yahoo Media Player code, to see it visit the post link.

Links :- How to Add Audio | How to Embed | How to Use

Online Blog Editor

Are you bored of your default online blog editing window that comes along with your blogging platform? So, its time to try some thing new, just check out the online Blog Editing AJAX based tool, which will help you in Blog Authoring. This service is available at WriteToMyBlog, which is a powerful online word  processor.


Some of its advanced features are listed below-

  • Supports four mode of editing
    1. Standard
    2. Advanced
    3. HTML
    4. Customizable
  • It is free.
  • Save as draft option.
  • Preview option.
  • No sign-up or membership required.

Reduce your Typing Effort by Using Texter

Texter is an AutoHot key script made by LifeHacker.com. It is a very great tool for all bloggers and also good to try out for some of the people, who feels lazy about typing. You can get the download link and more details about how to use this software at LifeHacker website.
From here you can get its source code as well as an installation package.

I’ve made a short video on how to add a string to Texter, you can see that here.


As a blogger, it is very usefull for me to create a list of HTML codes or permalinks to automatically get prased whenevr I’ll type their corresponding abbrevations.
Links : Product Homepage | Using Texter | Installation File | Portable Texter

How to add Animated Images to Blogger Blog

According to Blogger Official Blog for Known Issues, animated files does not remain animated when hosted on blogger because

Picasa doesn’t support animated images and the Blogger-hosted photos are stored in Picasa Web Albums.




 A solution to this problem is to use some other Image hosting solution such as Tinypic, Photobucket, Pictures.pk,etc.

Just upload your animated photo on any of these hosting sites and get the html code for the Image. Now, go to Edit HTML while writing the post and paste that HTML code for animated image to your post. You will get an Animated Image in your Blogger Blog Post. Here is an Example below of an Animated Image, Enjoy!

Get a Favicon to your Blog

What is Favicon ?
Have you wondered how these little icons appear next to the web addresses, like the one you see above? When you visit the sites or bookmark them, these icons will make these URLs stand out. These are “Favicons” or “Favorite Icons”.Favicon (pronounced fav-eye-con) is short for ‘Favorites Icon.’ A Favicon is a multi-resolution image included on nearly all professional developed sites. The Favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor’s browser. Often, the Favicon reflects the look and feel of the web site or the organization’s logo.Within Internet Explorer the Favicon is displayed on the Address line and in the Favorites menu.You can also add favicon to your blog. It is 16×16 pixel or 32×32 pixel image.

If you are professional Image Designer you can create your own Image in Photoshop or any other Image Editing Program and change that graphic to icon by renaming bmp format of image to ico. There are several other ways of getting icons online you can have a search for “Online Icon Generators”. Try search below


Some of Favicon Generating sites are-

  1. Dynamic drive
  2. Favicon 
  3. FaviconGenerator  
  4. Favicon Gallery 
  5. HTML Kit

Adding favicon gives your site a good professional look.You can also create animated Favicons by using favicon generating sites, or you can also use an animated gif file as favicon for your website or Blog. You can store all these images on various free Image hosting services such as TinyPic, PhotoBucket,etc. Some of animated favicon generating sites are-

  1. Animated Favicon 
  2. Favicon Box 
  3. IconJ

To get information on How to add Favicon to your Blogger Blog click here.

Hide Navigation Bar In Blogger

If you are frequent blogger and use Blogspot for blogging, you might have seen above header there is navbar or navigation bar . Most of want to hide the navigation bar in blogger , but we don’t know how to do that. Here is a simple trick to hide the navigation bar in blogger.


Just follow the steps below

  1. Log in to your blogspot account and select the Layout of the blog which you want to modify.
  2. Select the tab page Template and then click on Edit HTML
  3. Search for the text : body {
  4. Paste following code above the text in red.

    /* Cascade Style Sheet to hide navigation bar */
    #navbar
    {
    height:0px;
    visibility:hidden;
    display:none
    }

Finally HTML will appear like as shown below-