Subscribe

Advertisement

Ad

Expandable Posts New Feature "Insert Jump Break" added in Blogger by Default

Sep 12, 2009

Blogger
What is Expandable posts ?
A link option to read Full story. This setup avoid loading page time without necessary. Generally this link display various types as "Full Story" or "Continue Reading" or "Read More" or any text to expand.
Various Blogging platforms provides various options to enhance readership. Wordpress has already plugin to post break from displaying of Full story. Expandable Blogger posts is normally possible by slightly changing the Blogger Template.
Now 10th anniversary of of Blogger introduces some New features like "Default expandable Posts" "Custom Labels Widget". To activate blogger Read More option, Login to Blogger in Draft. Change the setting to Make Blogger in Draft my default dashboard. Now you can find a New Option "Insert Jump Break" in post editor.
Insert Jump Break
Type the content as you want before and after the Insert Jump Break. This option gives more control to Blogging in Blogspot hosted Blogs.

Read This:How do Add Meta Tags for Blogspot Blogger ?

Read More

Display Post Titles as Slideshow in Blogger Blogs

Sep 11, 2009

Actually Blogger providing display your Blog Feed in sidebar. This limits the number of post Titles to 5. Many Blogging guys like to display around Ten posts in sidebar. You can control the number of post Links to display, This widget is Slideshow Type.

This widget is Ajax code based, Create Ajax Code for your site and Need to add in widget. Add the following code into your blog whereever you want to Display Post Titles Slideshow.
<!-- Begin Dynamic Feed Wizard Generated Code -->
<!--
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->

<!--
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
-->
<div id="feed-control">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>

<!-- Google Ajax Api
-->
<script src="http://www.google.com/jsapi?key=notsupplied-wizard"
type="text/javascript"></script>

<!-- Dynamic Feed Control and Stylesheet -->
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
</style>

<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [{ title: 'Tech News', url: 'http://www.indiamore.com/feeds/posts/default/-/Technology' },
{ title: 'Top News Stories', url: 'http://www.indiamore.com/feeds/posts/default/-/India' }];
var options = {
stacked : false,
horizontal : true,
title : "TITLE NAME"
}

new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
<!-- End Dynamic Feed Control Wizard Generated Code -->


Important:Please change the highlighted red text suitable to your blog, Replace the text "notsupplied-wizard" with a Ajax Code Create here. See my blog sidebar for preview of post Tiles Slideshow. If you want more feel free to reply via comments.

Read This: Blogger Custom Domain setup Error unfixed yet. Why?

Read More

Add Background Image to Blog

May 9, 2009

Beautiful or Favourite Theme to Blog background makes a Good look. How do add Background Image to Blog? This post special focus on Blogger Blogs. But Wordpress, Typepad or any Blogging platform follows the same basic method to show image in background of the blog. You can add Image to Websites on self hosted also, You requires image uploading to Root Directory if Self Hosting.
First create suitable image to Blog Background, Next Follow the simple Template Modification steps to Display Image as Background to Blogger Blogs.

Login to Blogger >> Dashboard >> Layout >>Edit HTML >> [Backup your Blogger Template before any Modify]
Find the following line
body {
(or)
body{

Copy and Paste the following code after the above line
background-image: url(http://www.yourimageurladdress.com);
background-attachment: fixed;

Note: Change the URL address to your image in the code. Paste the code in appropriate location after Background or Background-color and This is may vary to custom templates.
Warning: Images must be small size(Format:Gif, Jpg, Jpeg), Don't use .Png extension images. Large images may take long time to loading, Use small as possible.

Preview and save Template.

Read This : Optimize Images to Search Engines

Read More

How do Add Social Bookmarking Widget to Blogger

May 3, 2009

Online Social Bookmarking is Essential to High Traffic to any Blog or Website. Already Post about Social Bookmarking Widgets, Read that to select a Suitable widget. Create a Custom code from the Social Bookmarking Websites(Addthis.com , Addtoany.com, Sociallist.org) and add this to Blogger Template.

How do Add Widget to Blogger ? Actually has Two options to add
1. Blogger Template Edit Method
2. Widget Style Method


First Method
Login to Blogger >> Dashboard >> Layout >>Edit HTML >> Expand Widget Templates [Backup your Blogger Template before any Modify]
Find the following line, Add your Widget code after this line.
<data:post.body/>

Check Preview and Save Template.

Second Method
Go to Layout >> page elements >> Add a Gadget >> HTML/JavaScript >> Paste your Code >> Save Widget.
Locate place of Widget in Sidebar or any your suitable area.

Related Post : How do add Tweet This link to Blogger ?

Read More

Social Bookmarking Websites to Blogger or any Websites

Traffic is the basic factor to Blogging success. Spread the Blog content to all over the Internet world is the key to get High Traffic. Webmasters impossible to spread the readers favourite content to all Bookmarking Sites. Search Engines create traffic, But no Bookmarking facility to readers. So Bookmarking Widget has plays important role to spread content via readers.
Social Bookmarking Websites not only used to Blogger(Blogspot Hosted) Blogs. This widget useful to all Websites and Blogs including Wordpress Platform. I find some useful Websites to get Widget codes and add to your site.

Addtoany.com : Appearance of this widget looks best and multiple options in Mouseover Display Window. Subscribe, Bookmark and Email options available. readers can easily Share their favourite content.

Addtoany Mouseover Window Preview
Addtoany Bookmarking

Socialistlist.org : This is more flexible widget. Bloggers or Webmasters can change the number of Bookmarking Websites to display in Mouseover Window. This provides advanced mode to Display Social Bookmarking Sites Rank wise. This Network provides above One Thousand Websites.

Sociallist Mouseover Window Preview
Socialist Bookmark

Addthis.com : This Website provides Widget code. After adding this code, Readers can Both Bookmark and Share favourite content to the world.

AddThis Mouseover Window Preview
Addthis Bookmarking

Check the All above Websites and pick your favourite widget to your Blog or Website.

Read This: How do add Social Bookmarking Widget to Blogger ?

Read More

Rounded Corners by CSS Style to Blogger Blogs

May 2, 2009

What is Rounded Corners? This is a Round Shape corners instead of Square type corner. This round type corners not important to Blogging, But need to Beautiful design. Actually this type corners made by images in Blogger Templates. Default Rounded type Blogger(Blogspot Hosted) Templates using images to Style Corners. This type of images takes long time to load. If continue using this type, May loss Low Speed Internet Users as Readers.

Before and After Rounded Corners
Before and After Rounded Corners
I find many Websites to Generate CSS(Cascading Style Sheets) Codes for Rounded Corner Style. You can customize values like Color, Border width and Many more. This Change is simple no any critical Steps to Follow. I think the following two Websites Generate suitable codes with your Custom Options.

Spiffy Corners : This is simple and easy Code Generator, But unfortunately works only 5PX option. Color palette gives very high user friendly colors.

Roundedcornr : This Website has lot of options to customize CSS Style Corners than the previous website. This site has lack of Onsite color choosing option. So choose best one based on requirements.

How do Add Generated CSS Code into Blogger Template?
I choosed Spiffycorners code to explain here.
Login to Blogger >> Dashboard >> Layout >>Edit HTML [Backup your Blogger Template before any Modify]
First Step :
Copy and Paste the generated CSS code before </b:skin>
Your Template code must be the following style(Preview)
CSS Code Rounded Corners
Next Step :
Add Generated HTML code where you want. You can choose Header, Main, Sidebar, Footer or any place you likes to show Rounded Shape Corners.
Actually split the code into Three parts.
Remove the line(This is centre part) <!-- content goes here -->

I choose Main Blog Posts Layout for Rounded Corners here.
Find the following code in your template

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Note : This code may vary in some Custom Templates, If you face any difficult, Try based on "Blog1" or "Blog Posts".
Add the First part of the HTML Code before this line and Last part of the HTML Code after the line.
Preview of Blogger Template Code must be the following style:
HTML Code Rounded Corners

Check preview of Blog, If you satisfy, Save Template.
Note : Color Matching of Blogger Template Layout Backgrounds and CSS Style Code are necessary for best Appearance.
If you Find any errors or Having any easy method Share Here via valued Comments.
Read : How do better Posting to Blogger

Read More

How Do Show Related Posts in Blogger Blogs

Apr 30, 2009

This post about displaying of Related Posts Category Wise, Labels count as categories. Wordpress Blogging Platform has very high customizable plugins for display Related Posts. Can customize How many Labels you want to Show and How many Posts per Label. This is not ordinary widget like show posts without Category Analyze.

How do add this widget to Blogger Template.
Login to Blogger >> Dashboard >> Layout >>Edit HTML >> Expand Widget Templates [Backup your Blogger Template before any Modify]
Actually I have know knowledge about this so Check out the following links:

1.Latest Update on related posts by - Hactro

2.Related posts widget from - Techie Blogger

3.Find related posts hack from - Jackbook

I think the above links are sufficient to find best one. I used Hactro style in This Blog.

Read More

How Do Customize Image Size in Blogger Posts

Original image size gives Naturalness for Pictures. In some times Change of image size is necessary for layout adjustments in Blogger Template. So Image Size Customization is a tool for Best Blogging.
Generally Blogger Platform give Three size options for publish images.
Small Size : 200PX
Medium Size : 320PX
Large size : 400PX
Default Maximum size of images is up to 400PX. So if you upload maximum than 400pixel images display with Compressed. Both width and height compress with suitable ratio, So only change image size not any width versus height ratios.
How Do Change Image for Custom Size?After uploading images to Blogger Posts, Find HTML code of image in HTML Mode of Post editor. See the following Image previews for easy understanding.
HTML Mode of Post Editor
HTML Mode
Image Code on Post Editor
Image Code
In the above image find the highlighted code. You may found s200 or s320 or s400, Change this value into s800. Next step is Customize the Width and Height of Image Size. If you want to show Big images than 800 pixels, Modify the s800 to your suitable size.
Note : Don't try to show very large images. Large size images takes longer loading time and Extra Bandwidth. If you change any major modification for layout, These modifications may disturb for display of Large size images due to Layout Problems.

Related Post : How do Optimise Images in Blogger Posts ?

Read More

Blogger Posts Image Optimization for Search Engines

Search Engines likes text format than any other scripts. So Optimize Blogger Posts Images when posting. Search Engines find text based content for index,So images indexing is based on Text names of Images.Flicker Image supporting is another drawback for Blogger users. Blogging in Wordpress platform has no problems,Have special plugins to optimize Images. So a Simple Technique need for "Blogspot" hosted "Blogger" Blogs.

After Loading Images When Posting in Blogger modify image code in HTML Mode of Post Editor.
HTML Mode
Find the HTML code for image and Type the Name of The Image in ALT tag. Name to images is very important. For example display a image relating to Car Technology, image name must be "Car Technology". If image fail to load by any reason, Display the Text "Car Technology" alternative to Image.
See the following Image Preview for "Code Modification".
Before Image Optimization
Before Image Optimise
After Image Optimization
After Image Optimize
Note : Image name is "HTML Mode" highlighted with yellow color.

After change you can Publish in your way. This trick is essential for images Display in Image Search.
Related Posts : How Do Display Images Big or in Your Custom Sizes in Blogger Posts and Add Footer Navigation Bar Blogger Blog.

Read More

How do Show Alexa Rank in Website or Blog

Displaying of Alexa Rank is a Advertisement for your Website or Blog among Readers.
This Widget installation method generally for all, But special focus to Blogspot Blogger Blogs. Follow the simple steps to show Alexa Ranking for your readers.
How do Show Alexa Rank Figure?
Login to Blogger account >> Dashboard >> Layout >> Add a gadget >> Html/JavaScript.

Next open Alexa Website in another Window, Go to For Site Owners in top menu bar. Select site Widgets in Left Sidebar,Type your Blog URL in your favourite widget style bar and Click on build widget.

Alexa URL
Copy and Paste the Code into your Previously opened HTML/JavaScript and Save. Place the widget in your appropriate place and Save. Check the Blog for display Alexa Rank for your blog.

Blogger Widget
Preview of Alexa Rank


Note:This rank may not show for New and Low Traffic Sites.Install Alexa Toolbar for Best Results.
Also read:Alexa Rank is not Favour to Low Traffic Sites,But have some Advantages.

Read More

Blogger Title Optimization For Search Engines

Apr 27, 2009

Blogspot Hosted Blogs display Page Titles for all pages start with Default Home Page Title. This is not optimal for Search Engine Optimization(SEO). Self Hosting Wordpress Blogging Platform has many plug ins for SEO. Search engines count the letters from Home Page Title Name.Actually Individual Page name display next to Main Blog Title.
How do hack this for Better Search Engine Rankings and Top in Search Results.Modify Blogger Template with simple steps for inner page titles as Page Titles instead of Home Page Title.
Login to Blogger >> Dashboard >> Layout >>Edit HTML [Backup Blogger Template before any Modify]

Find the following line
<title><data:blog.pageTitle/></title>


Replace the above code with the following Code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Save Template.Check the Individual Page Titles Display without Home Page Title,OK.This is very important for Index your pages easily and to create Heavy Blog Traffic.

Read More

Optimize Blogger Meta Tags for Best Search Engine Rankings

First you should add Meta Tags to Website or Blog,If you didn't add still, Check out How do add Meta Tags?(This is not only for Blogger Blogs applied to all blogs or Websites)
Many Search engine spiders crawl any website based on "Meta Tag Instructions" in the "Header" part of the Website. Meta tag optimization is necessary for Best crawl rate and also Top Search Engine Rankings.

Important Tips for Optimise "Meta Tags" particularly "Title Name", "Description", "Keywords", "Robots".Other than this four tags are not important.

Title Name : Write Title tag within 80 Characters, But 60 Characters is best for all Search Engines.Different Search Engines indexing different number of letters from 60 to 80 letters.

Description : Select your description Tag below 250 Characters,I think this optimal.Various search engines fix Character limit from 150 to 500 letters.Avoid character repeat as possible.

Keywords : Standard Keywords is 25. But some search engines count complex keywords into multiple keywords. Fix your key word limit 20 to 23 is better.Select your best keywords using Google Webmaster Tools or any Word tracker.Ex:Blogging,Meta Tags...

Robots : This is crucial, use only "All" tag.If you expert use "Index, Follow, Any".

The above four tags plays maximum role for indexing in search engines.
After Optimize your tag check using online "Meta Tag Checker"
Submit Express or Meta checker.net.
If you find better results from these checking leave it or re optimize to reach Blogging Success.

Read More

Create Expandable Posts in Blogger Blogs for Fast Browse

Apr 23, 2009

Now compare Blogger with Wordpress,Blogspot Blogs have less widgets and plug ins for Publishers.In this way we need manually add some special features to blogs hosted in Blogspot platform.
This post explains How do Create Expandable Posts for blog posts.This hack may also called as "Read More" or "Continue Reading". Following steps explain th code installation process into Blogger Template.
Login to Blogger >> Dashboard >> Layout >>Edit HTML >> Expand Widget Templates [Backup your Blogger Template before any Modify]
Find the following line

<data:post.body/>

Replace the above line with following code


<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<data:post.body/>
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>

Code Preview:
Code Preview
Save your template.Template editing is completed.

Next step is Go to Settings >> find post template box.Copy and paste the following code into box, Save settings.

<span class="fullpost">

</span>

Setting Preview:
Read More
Check the function by a Test Post.Now you find a code in your post text editor(HTML mode).Now text or any content between code not displayed,Display only Continue Reading.
Post Preview:
Test Post
OK are you ready.This hack need for Fast Browse Readers
If you find any error recheck your process.Remain you face any fault comment here.

Read More

Traffic Redirection From Blogger Blog to Any URL

Apr 19, 2009

Traffic Redirection from one URL to another Blog or Website is very important for Webmasters.
Why redirect? When and How do redirect your traffic to new URL? When create new new website instead of old one,New domain for better popularity or any reason can attract URL Redirection.
This posting focus on Blogger platform Blogs,But may function to other web applications also. You can easily redirect From Blogger to any URL using simple code.
Method for URL Redirection:
Login to Blogger >> Dashboard >> Layout >> Edit HTML [Take Blogger Template Backup Before any Modify]
Cut and Paste the following Code immediately after <head> tag

<meta content='0;url=http://www.indiamore.com/' http-equiv='refresh'/>


Save Template
Note: Change the BOLD letters to your new URL. This is not Custom Domain setup for Blogger,Just only redirection purpose.
If you face any errors please reply through comments or Share any other method.

Read More

How Do Remove Nofollow To Dofollow Blogger

Apr 11, 2009

Before remove Nofollow Links,Read -What is Dofollow and Nofollow Links?

Remove in your Blogger Template "Nofollow" attribute(Default) and go your Blog as "Dofollow"
Dofollow
Method to Remove
Login to Blogger >> Dashboard >> Layout >> Edit HTML >> Expand widget Templates >> Find the following code(Comments Section)


<a expr:href='data:comment.authorUrl' rel='nofollow'>


Remove "Nofolow" or "no" and save your template.Now Comments are "Dofollow"

Note:Before any modification Backup your Blogger Template.

Read More

Add Popular Posts To Blogger Blog

A simple blogger widget gives you chance to access Popular Posts of Your Blog to your Readers. You can easily add the Popular Posts or Highly Commented Posts Widget in your Sidebar.
You Must submit Your Blog for popular search engines like Google, yahoo ,etc.

Popular Posts

Login to to your Blogger account >> Layout >> Add Page elemnt >> Add Feed.

Copy the following code and paste it in the Feed URL box


http://pipes.yahoo.com/pipes/pipe.run?_id=1cf38ae68efbe859c4ba1ee239cec099&_render=rss&num=50&url=http%3A%2F%2Findiamore.com



Remember: You change URL of your blog highlighted in Bold text, don't add any http: or https:.Save your widget.

You can see the Popular Posts in your Blog as my Screenshot.This post focus specially for Blogger Blog,May function other platforms like Wordpress also.

Do you know any other Method to Add Popular posts in Sidebar of Blog or Website.Share here.

Read More

Add Favicon to Blogger Blog for Brand Name

Apr 9, 2009

Every Blogger likes to made his blog beautiful and special Brand name.In this way Favicon is very useful to Bloggers or Web masters.

Actually, What is Favicon ? Simplification of Favourite Icon.See in My Website Address bar you found a small image[IM], This is the Favicon.

Blogger Favicon Generator from Iconj.com
Blogger Favicon

Why do add Favicon to your blog or Website? This small symbol gives special identification for your blog.You can also display this image in your Feedburner Feeds also.You can add the image URL in Feedburner feed settings.

Simpe procedure to add Favicon to your Blog.This method generally applicable for all types of blogs like Blogger,Wordpress or any standard blogs.But special focus to Blogspot Blogs.

Create your favourite small Picture. Sizes 16*16 or 32*32,16px is preferrable.Upload you image to any one of Online Icon creators.I used Iconj.com.You can find using Google search for more more Icon hosting sites.

After creating image Two options
1. If you use self hosting blog or Website upload your picture to Top level root directory.
2.If you use Blogger, Copy and paste URL in your Template header part.Take note of your icon Url.
Login to Blogger >> Layout >> edit HTML >>

Find the line in top of template

<title><data:blog.pageTitle/></title>

After this line copy and paste the following one code.

<link href='Your image URL' rel='shortcut icon' type='image/ico'/>

Another method

<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Use any one method. Don't forget to change the URL of your Favourite Icon.




Save your template.Refresh your blog for your.

Read More

How do Add Tweet This Link to Blogger Blogs

Apr 1, 2009

Twitter is now a days Popular Social Boomarking site.Many Bloggers compete to increase Followers in Twitter
.Social bookmarking is very important to share the site content and increaes traffic to your blog. I particularly write this post focus on Blogger(Blogspot Blogs).
Make backup your Blogger Template before any modifications.

Login to Blogger account >> Dashboard >> Layout >> Edit HTML >> Expand widget templates.
Search the following lines in your template.
<div class='post-footer-line post-footer-line-1'>

[If,you hany problem to findout this line,try this lines"post-footer" immediately add the code after <p><data:post.body/></p>]

Copy and paste the code after "post-footer-line" you located.

<b:if cond='data:blog.pageType == "item"'><span style='float: left; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8CXxZHMifAvLjbr66dB6VXNrSIWZafFXTpy_6_Vm4OLX4F6OU3gvG_T9ZzIBrEYzUUOYb3zY8_6-Nvf2Qzo1sNj9LfhwgtMx0F9yViR7wEzqFXSyJjsdxV-ELctds44MkQPJ00ylZqXA9/s128/twitter-16x16.png) left no-repeat; padding-left: 20px;'><script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<script charset='utf-8' src='http://s.bit.ly/TweetAndTrack.js?v=1.01' type='text/javascript'/>
<a expr:onclick='"return TweetAndTrack.open(this, \"" data:post.url "\");"' href='#'>
<span style='display:none;'>I'm reading: <data:post.title/></span>Tweet this!</a></span></b:if>


Before saving your Template, Check th preview.If you have still any problems Find here.
This is a simple method to Twitter Link to below posts.

Read More

Links in New Tab or Blank Window In Blogger Blogs

Mar 30, 2009

Due to various reasons Some Publishers like to open links in New tabs or another Window,At the sametime some Readers also like Tabbed Browse.
Main reasons for Links open in New Windows is,Links target to Another Website or Present Viewing webpage is want still opening.This post write Special focus to Blogger Blogs.

What are the Advantages by Links Open New Window?
Some Visitors like Tabbed Browsing,They change fans to your site.I am Fan for Tabbed Browsing.
Your website may protect from closing,can still open for Readers.
In some cases Links go to any External sites,In this way your site not closed. The other sites open in new or blank Window.

Disadvantages:
Readers close the window every time they surf to new content.Readers may avoid your website by the reason of Links Open in New Window.This leads system uses more RAM to open many Windows at the same time,Results slow Computer Performance.
How Protect Readers by Customize your Links Open In New Window

Read More

Blogger Footer Navigation Widget Style Method

Mar 26, 2009

Is Footer Navigation is Important Blogger Blogs? Yes, Readers can easily Visit more pages,This leads Increase Alexa page rank, Increase Google Search results rank and also Search Engine OPtimization.
Wordpress Blogs have some plugins to Navigation Bar below posts section.Blogspot Blogs has also Three links, But these links give some limit Option to access webpages.

Older Footer Navigation Bar
Blogger Footer Navigation Hack

Newer Footer Navigation bar
Blogger Footer Navigation
So you need add a Footer Navigation Trick to Your Blog, I already posted a code to modify your Blogger Template. If you any Uncomportable by previous method, you can try this Simple method.Previous Method is Template modify and This is Widget Style Footer Navigation.

In this Method You can easily add Footer Navigation Bar To Your Blog.

Log in to your Blogger Account >> Layout >> Add a Gadget >> HTML/javascript

Copy and Paste the below code

<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</style>

<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)=="indiamore.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=5;
var displayPageNum=3;

var firstPageWord = 'First';
var endPageWord = 'Last';
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 = '&nbsp;<span class="showpagePoint"><u>' thisNum '</u></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 = '<span class="showpage"><a href="/">' firstPageWord ' </a></span>' upPageHtml ' ' html ' ';
}else{
html = '' labelHtml firstPageWord ' </a></span>' upPageHtml ' ' html ' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page ' thisNum ' of ' (postNum-1) ': </span>' html;

if(thisNum<(postNum-1)){
html = downPageHtml;
html = '<span class="showpage"><a href="' htmlMap[htmlMap.length-1] '"> ' endPageWord '</a></span>';
}

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>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>


Save your Widget.
Note:Change the default values to Suitable for your blog.

Indiamore.com - to Your Site Name

pageCount=3; - Customize Number of posts to display per page

displayPageNum=3; - Page count to display in Footer bar

Important:Locate Widget Immediately Below Posts

I used this method in My Blog.

If you want you can also check another Method to Template Modification to Blogger Navigation Setup.

Read More
Admn CPanel
New/ Edit/ Dash/ Lay/ Lgt

Sponsers

Ad

Friends Corner