3 HOW TO ADD “WORD/CHARACTER COUNTER” TOOL TO BLOGS.

In one of our previous posts,we discussed a topic which is “HOW TO ADD HTML ENCODE/DECODE-TOOL WIDGET TO BLOGS.”.
And just as mentioned in that tutorial,the tool being made mentioned here was also provided by http://centricle.com.

Many at times,you might be asked to include a keyword while registering for a service online not 'More than or Below' a specified number of words and/or character.
This tool comes really handy in such a situation as you do not have to start counting every single letters manually.

Likewise as a blogger, you might want to count the number of characters in your post title as its often said that "Maintaining a below 60 is best".

Now,to add this tool to your blog,here's an easier way of doing that.

1. Login to your Blogger dashboard.
2. Navigate to Layout » 'Add a Gadget' » 'HTML/JAVASCRIPT' and Copy-Paste the code below into the text box.
*Alternatively,you can create a page for it [Learn how to create pages in Blogger.]

3. <form action="http://centricle.com/tools/word+character-counter/" method="post" target="blank"> <fieldset> <label for="pad">String:</label> <textarea cols="60" rows="15" name="pad" id="pad"></textarea> <input class="submit" type="submit" name="countem" value="How Many?" /> </fieldset> </form>

4. Save the widget and that'll be all.

HERE'S A LIVE DEMO OF THE WIDGET.

String:

That's all!!!

Read more »

6 HOW TO EMBED “WINDOWS MEDIA PLAYER” IN BLOGS.

Writing a great article sometimes,isn't complete without embedding a video and/or an audio file to it.

It is highly required when you are posting a practical tech-related tutorial or most times on a news niche,whereby the file makes the post even more explanatory.

So,what if you have the link to a video,how do you embed it in a blog(post)?

In this tutorial,I'll be showing you two easy ways to embed the Windows Media Player in a blog to stream live videos & audio files for visitors to easily watch and listen to.

[Video adapted from google.]

Here's How...

1. The first way is by adding the media player as a gadget in the sidebar.
   • Login to Blogger.
   • Navigate to Layout » `Add a gadget` » HTML/JAVASCRIPT
   • Copy-Paste the code below and save the widget.
2. The second method is by embedding the player in each blog-post.
   This can be done by pasting the code below in each post.

Here's the Media-player's code...

<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaplayer1" ShowStatusBar="true" EnableContextMenu="false"
autostart="false"
width="350"
height="250" loop="false"
src="VIDEO/AUDIO LINK" />

<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaplayer1" ShowStatusBar="true" EnableContextMenu="false" autostart="false" width="350" height="250" loop="false" src="VIDEO/AUDIO LINK" />

CUSTOMIZATION.

Change the settings of this player to suit you (Optional).

Autostart→ Change this value to "True" if you want the video/audio to start streaming automatically upon visiting the post[Not recommended].
Width/Height→ Change these values respectively to suit you taste.
Loop→ Force the video/audio to loop constantly.

That's all.Just make sure you get a valid url.

Read more »

3 HOW TO ADD HTML ENCODE/DECODE TOOL WIDGET TO BLOGS.

There are times whereby you might need to post an Html tag as plain text most especially for bloggers in “Blog niches”.
It is also needed when a visitor has to write some codes in the comment box.

Although,Blogger has really made it easier to post “html” codes as plain text in the New blogger dashboard,it still isn't helpful in situations when you need some other tags to function in a post.
So,to solve this,a tool has been provided by Centricle.com to make posting of codes easier and faster.

Here's How It Works...

When a html code is inputed in the textbox,the “Encode” button needs to be pressed,and the result when posted,is shown as live codes.

To integrate this widget in your blog,just Copy-Paste the following code snippet preferably into a Page[Learn how to create pages on blogger.]

Here's the code...

<form action="http://centricle.com/tools/html-entities/" method="post" target="blank">
<fieldset>
<input value="y" name="s" type="hidden"/> <label for="pad">Convert text to HTML entities and vice-versal:</label> <textarea id="pad" rows="15"cols="60" name="pad"></textarea> <input value="Encode" name="submit" type="submit"/> <input value="Decode" name="submit" type="submit"/>
</fieldset>
</form>

Live Demo

Convert text to HTML entities and vice-versal:

That's all.If you need further information about the usage of this tool,do not hesitate to leave a comment behind.

Read more »

0 HOW TO ADD A “PRINT PAGE” BUTTON TO BLOGGER BLOGS.

Adding a “Print Page” button to a blog is another way of generating little traffic to it,as visitors are given the option to print an entire article without stress,and by so doing can boost the traffic of your blog through Word-of-mouth,online forums etc.

So,if you'd love to include this button on your blog,this post will show you how…

1. Login toBlogger.
2. Navigate to Templates » Edit HTML[Always remember to backup your template.]
3. Check the box next to
   Expand Widget Template and search for </head> by pressing CTRL+F.
4. Next,Copy-Paste the code below directly above/before it.
<style type="text/css" media="print">
#noprint {display: none;}
// Hide unwanted elements
body {background:fff; color:000;}
// Black text on White background
a {text-decoration: underline; color:00f;}
//Underline Hyperlinks in blue}
</style>
5. Once done,search(again) for <p><data:post.body/></p>
6. When found, Copy-Paste the following code snippet directly below/after it.
<a href="javascript:window.print()">Print Page</a>
7. Preview the template to avoid errors and thereafter, Save it.

That's all.

Read more »

25 RANDOM BANNER WIDGET FOR BLOGGER BLOGS.

There are so many reasons you might want to add a banner to your blog site.
Adding a “Random banner widget” makes it better for any website.

It helps to manage space and is very useful in promoting affiliate links.
So in this tutorial,I'll be giving you an easy-to-use widget which can be modified to suit your taste.

Steps On How To Add Random Banner To Blogs.

1. Login to Blogger.
2. Navigate to Layout » “Add a Gadget” » HTML/JavaScript
3. Next,Copy - Paste the code snippet below
   <script language="JavaScript">images = new Array(3); images[0] = "<a href='ADVERTISER'S URL' rel='nofollow'>
   <img src='URL OF BANNER'S IMAGE' border='0' height='60px' width='450px'> </a>";images[1] = "<a href = 'ADVERTISER'S URL' rel='nofollow'>
   <img src='URL OF BANNER'S IMAGE' border='0' height='60px' width='450px'> </a>"; images[2] = "<a href='ADVERTISER'S URL' rel='nofollow'>
   <img src='URL OF BANNER'S IMAGE' border='0' height='60px' width='450px'>
   </a>";index = Math.floor(Math.random() * images.length); document.write(images[index]);
   </script>

4. Finally,SAVE the widget and preview your blog to ensure it's working.

If you need further information about this widget,please leave your comments behind.

Also Read

HOW TO ADD ADVERTISE WITH US WIDGET TO BLOGGER.

Read more »

1 AWESOME FACEBOOK LIKE,STUMBLE,RETWEET & DIGG COUNTER WIDGET FOR BLOGS.

Here's another cool Share-buttons widget for blogs. It's a 4-in-1 share widget with an awesome look and counters.

Well,I must confess,this is one of the most widely-used Social-media widget in the Blogosphere.

It includes the Facebook Like button,Digg Counter button,Stumble and Retweet buttons.

How To Add These Buttons To Blogger

Login to Blogger.
Go to Template » Edit HTML & Check the box next to
Expand Widget Template.

Next,search for <data:post.body/> by hitting CTRL+F.
Just add the following codes directly above/before it.

<b:if cond='data:blog.pageType ==&quot;item&quot;'> <table border='0'> <tr> <td><div style='padding-top:6px;'> <script type='text/javascript'> tweetmeme_style = &quot;compact&quot;; </script> <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/> </div></td> <td> <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot;+ data:post.url'/> </td> <td><div style='margin-left:35px;'> <script type='text/javascript'> (function() { var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0]; s.type = &#39;text/javascript&#39;; s.async = true; s.src = &#39;http://widgets.digg.com/buttons.js&#39;; s1.parentNode.insertBefore(s, s1); })(); </script> <a class='DiggThisButton DiggCompact'/> </div></td> <td> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;+ data:post.url +&quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:35px; width:100px; height:20px;'/> </td> </tr> </table> </b:if><br />

That's it. Do not forget to share your testimony with others[If it worked or not].

Read more »

0 HOW TO ADD “ONLINE HTML CALCULATOR” TO BLOGS.

Here's a quick tool-script you can add to your website/blog to display online calculator.

Once a number or sign is clicked on,the page reloads with the option in the text area.

Here's a demo of this online application.

Script by:SOLJAR2

So,to add this application on your blog,Copy-Paste the codes in the box below into a Page,Post or gadget.<form name="Calc"> <center> <input disabled="disabled" type="text" style="font-weight: bolder; font-size: large;" name="Input"/> <input type="hidden" name="PHPSESSID" value="6be315796135a9d9627813b4af5fb2ad" /> </center><table> <tr> <th> <input type="button" name="one" value=" 1 " OnClick="Calc.Input.value += '1'"/> </th> <th> <input type="button" name="two" value=" 2 " OnCLick="Calc.Input.value += '2'"/> </th> <th> <input type="button" name="three" value=" 3 " OnClick="Calc.Input.value += '3'"/> </th> <th> <input type="button" name="plus" value=" + " OnClick="Calc.Input.value += '+ '"/> </th> </tr> <tr> <th> <input type="button" name="four" value=" 4 " OnClick="Calc.Input.value += '4'"/> </th> <th> <input type="button" name="five" value=" 5 " OnCLick="Calc.Input.value += '5'"/> </th> <th> <input type="button" name="six" value=" 6 " OnClick="Calc.Input.value += '6'"/> </th> <th> <input type="button" name="minus" value=" - " OnClick="Calc.Input.value += ' - '"/> </th> </tr> <tr> <th> <input type="button" name="seven" value=" 7 " OnClick="Calc.Input.value += '7'"/> </th> <th> <input type="button" name="eight" value=" 8 " OnCLick="Calc.Input.value += '8'"/> </th> <th> <input type="button" name="nine" value=" 9 " OnClick="Calc.Input.value += '9'"/> </th> <th> <input type="button" name="times" value=" * " OnClick="Calc.Input.value += '* '"/> </th> </tr> <tr> <th> <input type="button" name="zerozero" value="00" OnClick="Calc.Input.value += '00'"/> </th> <th> <input type="button" name="zero" value=" 0 " OnClick="Calc.Input.value += '0'"/> </th> <th> <input type="button" name="point" value=" . " OnClick="Calc.Input.value += '.'"/> </th> <th> <input type="button" name="div" value=" / " OnClick="Calc.Input.value += ' / '"/> </th> </tr> </table> <table> <tr> <th> <input type="button" name="clear" value=" Clear " OnClick="Calc.Input.value = ''"/> </th> <th> <input type="button" name="DoIt" value=" Ans " OnClick="Calc.Input.value = eval(Calc.Input.value)"/> </th></tr> <tr> Script by: <a href="http://freebie-planet.blogspot.com">Soljar2.</a> </tr> </table></form>Hope you found it useful.

Read more »

0 HOW TO ADD “ADVERTISE WITH US” WIDGET TO BLOGS.

Nowadays,almost every blog has an “Advertise with us” widget in their sidebar. The widgets in most cases,are in the dimension '125 by 125' which is the most commonly used in the blogosphere.

So,if you'd like to embed this widget in your blog,all you have to do is follow these easy & straightforward steps.

Steps on how to add the advertise widget on your blog.

Before we begin with this tutorial,make sure you have a page you can direct your patronizers to when the widget is being clicked on.

If you do not already have,create one[Learn how to create a page],and specify the amount you charge for each “ad-space”. Name the page “ADVERTISE” and publish it.

Once that's done,we are ready to start.

1. Login to Blogger
2. Navigate to Layout » Add a gadget and selectHtml/Javascript
3. Next,Copy-Paste the code below into the box →
   <center> <table border="0"><tr> <th width="125" height="125" align="center"> <a href="YOUR PAGE'S URL HERE" target="_blank"><img src="http://i44.tinypic.com/2v97vv9.jpg"/> </a> </th> <th width="125" height="125" align="center"> <a href="YOUR PAGE'S URL HERE" target="_blank"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></a> </th> </tr> <tr> <td width="125" height="125" align="center"> <a href="YOUR PAGE'S URL HERE" target="_blank"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></a> </td> <td width="125" height="125" align="center"> <a href="YOUR PAGE'S URL HERE" target="_blank"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></a> </td> </tr> </table> </center>

4. Replace all YOUR PAGE'S URL HERE in the code snippet with the one you derivated after creating your page. Likewise,you can decide to increase/decrease the widget-image's size by replacing '125' in the code.
5. Finally, SAVE the widget.

If you encountered any challenges,please let us know...

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 »

4 RECENT COMMENT WIDGET FOR BLOGS.

The default 'Recent comment widget' for blogger is something that doesn't work on most blogs {mine inclusive},and this made me explore Google in search of a valid recent comment gadget.

After searching for days,I finally came across one and decided to share it with those who might have thesame questions..

Even though there are some html/javascripts to carry out this order,the usage of gadgets is much more viable,as too much of html/javascripts in a web page can slow it down.

This also has its own uniqueness,as you are able to decide whether you would show post dates,post title,decide the number of comments to display etc.

To do this,just visit this site,and fill out the form appropriately.

The widget will then be automatically sent to the site you specify.

Note:This widget does not include any backlink to the site I specified above,because I thought so and decided not to try it at first.

Here's the site again.

I'm sure this will save you a whole lot of stress to using javascripts which might sometimes include backlinks.

Read more »

5 PAGE-LOAD TIMER SCRIPT FOR BLOGGER BLOGS.

Have you seen websites displaying web-page load time? Do you want this feature in your blog? If yes,then Read-on.

In this post,I will be explaining how you can easily add this widget to your blog.

How to add load timer to blogger blogs

To add this widget to your blog,follow the steps below.

Step 1:

Login to Blogger & go to Design/Layout » Edit HTML[Always remember to backup your template.] Check the box next to Expand Widget Template and search for <head> by pressing CTRL+F. Once you get that,copy-paste the codes below directly after it.

<!-- page load timer --> <script type='text/javascript'> var d = new Date(); var starttime = d.getTime(); //Get the start time </script>

Step 2:

Find </body> in your template and immediately before that,copy-paste this code:

<!-- page load timer begins --> <script type='text/javascript'> var d2 = new Date(); var endtime = d2.getTime(); //Get the end time //Find the difference between the start and end times var totaltime = (endtime - starttime)/1000; //Round 2 decimal places var result = Math.round(totaltime*100)/100; //Output results to a&quot;P&quot; element document.getElementById(&quot;loadtime&quot;).innerHTML = &quot;Page loaded in:&quot; result &quot; seconds&quot;; </script> <!-- page load timer ends -->

Preview and Save template.

Step 3:

Login to Blogger » Design »Page element and select 'Add a gadget'. Next,scroll down till you find "HTML/JAVASCRIPT" and click on ADD. Now,copy-paste the following codes in it:

<!-- Widget portion --> <p id="loadtime">Your custom message goes here</p>

Finally,save widget and view your blog to see the load-timer. If you are not satisfied with the “Page loaded in:” that displays together with the load-time,simply change it in “step 2” above.

Read more »

16 CREATE CUSTOM PERMALINKS FOR ALL BLOGGER POSTS.

You might have noticed some blogs having shortened urls at the top/bottom of every post with a “Share this post” text. This is a very nice widget which can help increase your blog's traffic as visitors won't have to go through the stress of manually getting your posts url.

How to add shortened url to your blog.

In this tutorial,I 'll be making use of bit.ly i.e twitter's default service. To begin,you will have to create an account with bit.ly to get your API KEY.Once gotten,we can begin with the tut.

STEP BY STEP TUTORIAL.

Login toBlogger&go to Design/Layout » Edit HTML.[Always remember to backup your template.] Check the box next to Expand Widget Template and search for </head> by pressing CTRL+F. On getting that,Copy-Paste the code below directlyabove/before

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=USERNAME&amp;apiKey=YOURAPIKEY"></script> <script type="text/javascript" charset="utf-8"> BitlyClient.addPageLoadEvent(function(){ BitlyCB.myShortenCallback = function(data) { // this is how to get a result of shortening a single url var result; for (var r in data.results) { result = data.results[r]; result['longUrl'] = r; break; } document.getElementById("shorturl").innerHTML = "Share this link: &lt;input type='text'value='" + result['shortUrl']+ "' name='bitlyurl'/&gt;"; } BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback'); }); </script>

Replace USERNAME with the name you supplied while registering at bit.ly and also replace YOURAPIKEY with the key assigned to your account.

STEP 2»

Search for this line of code[CTRL+F]

<div class='post-footer-linepost-footer-line-3'>PLACE SCRIPT HERE</div>

Replace “PLACE SCRIPT HERE” in the code above with this»»

<b:if cond='data:blog.pageType =="item"'><form id='shorturl'/></b:if>

Now,Preview & Save your template.

You should now have a shortened url in all your blog posts. If you encountered any problem trying this,don't hesitate to leave a commen behind.

Read more »

2 “BOOKMARK THIS SITE” WIDGET FOR BLOGGER.

́Bookmarking widget̀ in my perspective,is one of the ways you can retain your blog's visitors. Some people tend to forget/ignore bookmarking a site even if they like the post. Having the widget installed in your blog can help prevent that.

Bookmark script.

<script type="text/javascript"> /*********************************************** * Bookmark site script- © Dynamic Drive DHTML code library. * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/for full source code * Shared by SOLJAR2 @ http://freebie-planet.blogspot.com/ ***********************************************/ function bookmarksite(title,url){ if (window.sidebar) // firefox window.sidebar.addPanel(title, url, ""); else if(window.opera && window.print){ // opera var elem = document.createElement('a'); elem.setAttribute('href',url); elem.setAttribute('title',title); elem.setAttribute('rel','sidebar'); elem.click(); } else if(document.all)// ie window.external.AddFavorite(url, title); } </script> <a href="javascript:bookmarksite('YOUR BLOG/SITE NAME', 'YOUR BLOG URL')">BOOKMARK THIS SITE!</a>

HOW TO USE THIS WIDGET

Login to your Blogger acc.,then go to Design >> Page element and select 'Add a gadget'. Now scroll down till you see "HTML/JAVASCRIPT" and select ADD. Just copy/paste the code above and select SAVE.

CUSTOMIZATION.

Change the texts in red above accordingly i.eYOUR BLOG/SITE NAME and YOUR BLOG URL.

To make the bookmark button appear as an image instead of a text,replace BOOKMARK THIS SITE! in the code above with» <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdSOLEatVWj_gvpeGYsH58cVR060nfX2qbnPcxKsUgfCBENZYDs8__aZ_SjHIIABkKV1gA9tTkvhMi6Tf6c4HJwU1so78zPQzAFCF0Nsytz_SSdxAM22cj65Q5lkLXuOfUnUGTgGg8a3E/" alt="Text to be displayed if browser's image is turned off"/>

THAT'S ALL.

Read more »

0 HOW TO SHOW/HIDE BLOGGER WIDGETS ON PARTICULAR PAGES.

When you add a new widget/gadget on your blog,it automatically displays on your blog's homepage,static pagesand post-pages.
Whereas,there are some widget which is not needed in particular areas of your blog.
E.G,Widgets like Recent comments,Related posts,Recent posts,Top commentatorsetc...which are not needed in static pages &sometimes homepage are displayed everywhere,thereby flooding your blog with extraneous widgets.

Fortunately,there are some conditional tags which will help solve this problem.
A Conditional tag consists of two sections of codes i.e,A <b:if+condition> and a matching end tag which is </b:if>

HOW TO DISPLAY/HIDE WIDGETS ON BLOGGER.

• To display/hide widgets on specific pages,you have to know that particular widget's id first[You can leave a comment below if you don't know how to get it.]
• Login to Blogger » Design/Layout » Edit HTML.
• Check the box next to
  Expand Widget Templateand search for the widget's Id.

APPLYING CONDITIONAL TAGS.

On getting the widget's id,you will get something like this»
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
CONDITIONAL TAG GOES HERE <!-- only display title if it's non-empty -->
<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'/>CLOSING TAG.
</b:includable>
</b:widget>

Below are the conditional tags to replace with the ones in the widget above.

TO SHOW A WIDGET ONLY IN HOMEPAGE.

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

SHOWING WIDGET ONLY IN LIST PAGES.

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

SHOW WIDGET ON ONLY POST PAGES.

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

SHOW WIDGET ON A SPECIFIC PAGE.

<b:if cond='data:blog.url == "URL OF PAGE"'>

SHOW WIDGET ON ARCHIVE PAGES ONLY.

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

SHOW WIDGET ONLY ON STATIC PAGES.

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

SHOW WIDGET ON BOTH POST & STATIC PAGES.

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

SHOW WIDGET ON ONLY LABEL-SEARCH PAGES.

<b:if cond='data:blog.searchLabel'>

NOTE:-Whenever you use any of the codes above,do not forget to include the matching end tag,i.e </b:if>

ENCOUNTERED ANY DIFFICULTY?
DO NOT FORGET TO LEAVE A COMMENT BEHIND!!!

Read more »

0 SOCIAL SHARING WIDGET FOR BLOGSPOT.

Previously,I wrote on how to add stylishopen heart bookmarking widget on blogger& today,I'll be giving some cool sharing widget to integrate on your blog.

This widget contains: facebook,twitter,digg,stumble linkedin and technorati buttons which will appear at the buttom of all your posts.
Sharing widget as we all know,is very useful on blogs to make it easier for your blog visitors to mention an article on their favourite social site,thereby increasing the number of traffic & obtaining favourable S.E.O on search engines.

HOW TO ADD THE SHARE WIDGET ON YOUR BLOG.

Login to Blogger » Design/Layout » Edit HTML.[Backup your template in case something goes wrong.]
Check the box next to
Expand Widget Template and search for <data:post.body/> by pressing CTRL+F.

Now,copy/paste the code below just after <data:post.body/>.

<b:if cond='data:blog.pageType =="item"'><div style='border:1px solid#E2E2E2;width:100%;position:relative;margin-top:15px;'></div><div style='margin-left:auto;margin-right:auto; width:600px;position:relative;'><div style='color:red;position:relative;top:12px;'><center>If you found this article useful,kindly take 5 seconds to share it!!!</center></div><table align='center' cellpadding='8' cellspacing='1' id='shareit'><tr><td><a class="external" expr:href="&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url +&quot;&amp;title=&quot; + data:post.title" rel="nofollow" target="_blank" title="Share this on Facebook"><img alt="Share on facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFCRdkwAgejaIyJDfQFBcWcDm2_L5qW1sLf4wCixc3YN0GXjgzEcJbaULdULAc3_5w0Fw_z2ZAeYt3KpWuae7zViqezs_vI7i51s8pfqRv0odW4kYbTg5qjH3_FU5zxl8EaOHdItU81Ps/h120/1.PNG"/></a></td><td><a class="external" expr:href="&quot;http://twitter.com/home?status=Reading:&quot; + data:blog.title +&quot; - &quot; + data:post.url + &quot; (@NAME)&quot;" rel="nofollow" target="_blank" title="Tweet This!"><img alt="Tweet" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie1ir2lgJf1S35F_bALLdr-QB0Mv-jfjTwWY5n4T8q_S7V0coJisMjuRqNAshkHJGmjr1_R0hn6Z0v8znabR_krOObioaq9fIyCF91qS2DfQU00w7MH1vszi55C5AlGuNV8OJzgt4rnRo/h120/6.PNG"/></a></td><td><a class="external" expr:href="&quot;http://technorati.com/faves?add=&quot;+ data:post.url +&quot;&amp;title=&quot; + data:post.title" rel="nofollow" target="_blank" title="Share this on Technorati"><img alt="Technorati" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVKsk-Kzy2r1AoO5M-Zuhb18qB6FBOTow_Z4neVHprIqZubUX8Djymdi6xQUklJ0hEa2DLVEWf5HVSZZPv1IenSS_5XLw7MqD_cRdJWB5iQ-OfT_EhBpcUOO1v4ITOESYSqk0llPmDq94/h120/5.PNG"/></a></td><td><a class="external" expr:href="&quot;http://del.icio.us/post?url=&quot;+ data:post.url +&quot;&amp;title=&quot; + data:post.title" rel="nofollow" target="_blank" title="Share this on del.icio.us"><img alt="Delicious!!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggVjbqGfhHcYuZpSIh2RZv4PCkhPTbYCXzVS33bM8SQ6VvnqPlhWT21zgQheMSEtyuLhI6p2xebxgWm_JyAYFaKSew5nHq1qNqvcRZlYew3DOE6vQYV6jbY-TE8LqMFR4jtyoj8szao_g/h120/3.PNG"/></a></td><td><a class="external" expr:href="&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url +&quot;&amp;title=&quot; + data:post.title" rel="nofollow" target="_blank" title="Digg this!"><img alt="digg it!!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzoFBrFbImRW2yOmcbnmVCDNj-ioD9znuHrw5RuXaR7ZfUKPQO03IBxXi7FWIe_io9fCCw1W9mOmNrC1RqaxJYBENAnWvZmc31PXQdUjn5O0NB3jbfcqwme55TQlm0dR1m1FpbiT0_67Q/h120/2.PNG"/></a></td><td><a class="external" expr:href="&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url +&quot;&amp;title=&quot; + data:post.title" rel="nofollow" target="_blank" title="Share this on Linkedin"><img alt="linkedin" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ZwxCa_cCjgD_pFAkvl0m7gHWdIeZVM5MTXdw125HRoap2gCRCw2aKgqjYfqPHWZeGqYosx2XJRySqovUWqeBlCg-n_NB3x8ocY9pKonJcaWVAaFWNMogHTcJAYHwNdm6Oygfq5JnBDE/h120/4.PNG"/></a></td><td><a class="external" expr:href="&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url +&quot;&amp;title=&quot; + data:post.title" rel="nofollow" target="_blank" title="Stumble upon somethinggood? Share it on StumbleUpon"><img alt="Stumbleupon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGrmdXV6LVZFBhOPWBCv5E_ewegk8-QwApkf8uKJBsLTSAVCvSprL9zDZ9BlHdLIlZdVRxEOeGOehUHtMzem37BItk2cD0I1UJd7z9px6kfITqCW6GqQFBOST3ukjP_3qvxEAOcAbkfgE/h120/7.PNG"/></a></td></tr> </table></div></b:if>Next,search for ]]></b:skin> and paste the codes below directly above/before it.#shareit{width:100%px;height:50px;border:0px solid red;position:relative;} #shareit tr td img{width:50px;height:50px;position:relative;}DONE!!!.Just preview your blog & save it if there are no errors.

Read more »

0 STYLISH OPEN-HEART BOOKMARKING WIDGET/GADGET FOR BLOGSPOT.

This is one of the best bookmarking widget I've come across.
The bookmarking widget is made in form of heartlike seen in the image above,and whenever you mouse hover it,the heart slides open and several bookmarking buttons such as facebook,twitter,linkedin,stumbleupon,pinterest etc are revealed for your blog visitors to use.

You can also visit this post for another method of adding bookmarking widget in floating form.

STEPS ON HOW TO ADD THE WIDGET ON YOUR BLOG.

First,login to your Blogger Account.
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 </head> by pressing CTRL+F.

On getting that,just copy/paste the code below,directly above/before it.

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher:&quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Having done that,the next step is to search for </body>[CTRL+F]
Now,copy/paste the code below directly above/before</body>

<div style='position:fixed; bottom:2%;left:2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script><a href="http://freebie-planet.blogspot.com/2012/05/stylish-open-heart-bookmarking.html" target="_blank"><span style="color:red">[GET THIS]</span></a>

Just preview and save your template.
NOTE:-THIS WIDGET HAS BEEN SET TO BE DISPLAYED AT THE BOTTOM-CORNER OF YOUR BLOG.TO CHANGE IT,PLAY AROUND WITH THE NUMBERS HAVING WHITE BACKGROUND ABOVE TILL YOU'RE SATISFIED.
That's all.

Read more »

0 CSS RELATED POST WIDGET.

In one of my previous posts,I gave out a site to add the "Related post widget" to your blog,but for those who might prefer to embed the codes into their template,this is a nice way of doing that.

HOW TO ADD THE WIDGET ON YOUR BLOG.

First,login to your Blogger Account.
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 </head>by pressing CTRL+F.

On getting that,just copy/paste the code below directly before/above it.

<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType ==&quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia,&#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://farm8.staticflickr.com/7104/7267555714_285261d73d_t.jpg";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->

NOTE»
When a post has no image,a default image is shown.To change the picture,get the address of an image,then change it with the url in red above.
Likewise,to change number of posts,replace 5 in the code above.

Next,search for either of these codes

<div class='post-footer-line post-footer-line-1'>

Can't find that?,search for this instead.

<p class='post-footer-line post-footer-line-1'>

On getting any of those two,copy/paste the code below directly after it.

<!-- Related Posts with Thumbnails Start-->
<!-- remove --> <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast!= &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name+ &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp; max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --> </b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://freebie-planet.blogspot.com'>Home of internet freebies.</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails End-->

CHANGE 5 ABOVE TO THE NUMBER OF POSTS YOU WANT SHOWN.

Now most importantly,save your template,and that's it.
Adapted from HELPLOGGER!!!.

Read more »

8 GOOGLE +1 BUTTON FOR BLOGS.

As we all know,'google +1' button is one of the essential buttons a blog should have to become more popular.

This button is similar to facebook & twitter send buttons.

HOW TO ADD THE BUTTON TO YOUR BLOG.

To add this button,just follow the steps below carefully.

First,login to your Blogger Account.
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 </head> by pressing CTRL+F.

On getting that,copy/paste the code below directly ABOVE/BEFORE it.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">{lang: 'en-US'} </script>

Now,to add this button directly below your post title,search for <data:post.body> and paste the codes below directly above/before <data:post.body>,but if you would like it after your blog posts,then paste the code below/after <data:post.body>.

HERE'S THE CODE

<div style='float:left'><g:plusone size="standard" expr:href="data:post.url"/></div>

You can also change the size of the button above by changing the text in red to either small,medium or tall.
All that is left for you to do now is preview your blog to ensure there are no errors,and afterwards SAVE YOUR TEMPLATE.

Read more »

0 PAGE NAVIGATION/PAGINATION FOR BLOGGER BLOGS.

Page Pagination/navigation widget is a very useful widget every blog should have.
The widget replaces blogger default 'next','previous' and 'home' link at the buttom of every post.Likewise,it makes your blog look more professional.

HOW TO ADD THE PAGINATION WIDGET.

Login to your Blogger acc.,then go to Design >> Page element and select 'Add a gadget'.
Now scroll down to where you see "HTML/JAVASCRIPT" and select ADD.
Just copy/paste the code below and save the widget.<style type="text/CSS"> .showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #7AA1C3; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #7AA1C3; background-color:#F6F6F6; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #7AA1C3; background: #F6F6F6; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #7AA1C3; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#7AA1C3; } </style><br /> <script type="text/JavaScript"> function showpageCount(json) { var thisUrl = location.href; var htmlMap = new Array(); var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==" .com /"; var isLablePage = thisUrl.indexOf("/search/label/")!=-1; var isPage = thisUrl.indexOf("/search?updated")!=-1; var thisLable = isLablePage? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : ""; thisLable = thisLable.indexOf("?")!=-1? thisLable.substr(0,thisLable.indexOf("?")) : thisLable; var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= ''; var upPageHtml =''; var downPageHtml =''; var pageCount = 2; var displayPageNum = 5; var upPageWord = 'Previous'; var downPageWord = 'Next'; var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">'; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp = post.published.$t.substr(0,10); var title = post.title.$t; if(isLablePage){ if(title!=''){ if(post.category){ for(var c=0, post_category; post_category = post.category[c]; c++) { if(encodeURIComponent(post_category.term)==thisLable){ if(itemCount==0 || (itemCount % pageCount==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } postNum++; htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount; } } } }//end if(post.category){ itemCount++; } }else{ if(title!=''){ if(itemCount==0 || (itemCount % pageCount==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!='') postNum++; htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount; } } itemCount++; } } for(var p =0;p< htmlMap.length;p++){ if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ if(fFlag ==0 && p == thisNum-2){ if(thisNum==2){ if(isLablePage){ upPageHtml = labelHtml + upPageWord +'</a></span>'; }else{ upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord+'</a></span>'; } }else{ upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>'; } fFlag++; } if(p==(thisNum-1)){ html += '<span class="showpagePoint">'+thisNum+'</span>'; }else{ if(p==0){ if(isLablePage){ html = labelHtml+'1</a></span>'; }else{ html += '<span class="showpageNum"><a href="/">1</a></span>'; } }else{ html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>'; eFlag++; } }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ }//end for(var p =0;p< htmlMap.length;p++){ if(thisNum>1){ if(!isLablePage){ html = ''+upPageHtml+' '+html +' '; }else{ html = ''+upPageHtml+' '+html +' '; } } html = '<div class="showpageArea"> <span style="COLOR:#000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += '</div> '; if(isPage || isFirstPage || isLablePage){ var pageArea = document.getElementsByName("pageArea"); var blogPager = document.getElementById("blog-pager"); if(postNum <= 2){ html =''; } for(var p =0;p< pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&&pageArea.length>0){ html =''; } if(blogPager){ blogPager.innerHTML = html; } } } </script><br /> <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>THAT'S ALL!!!
Note:-Save the widget below 'Blog posts'.

Read more »