Skip to main content

Unique Page Navigation Bar Below Posts[Blogger]

Page navigation is made to beautify the blog pages and also to make it easier for readers to navigate to all pages of the blog instead of using standard Older Post - Newer Post and Home.
This paging bar placed below your posts will let you to choose which page you wan to go to your blog

Related Blogger Posts :
Flash clock for blogger [without ADS]
Change your Default Cursor

Features :
  • Simple and easy to use without taking much space.
  • user can browse pages by direct imputing page number
  • Has features of first ,prev ,next ,last and an input space for directly jumping to particular page.
 Before editing your template see the image below which will give you clear idea about how its like .


First backup your template .
Click Edit HTML Layout ► ► Click Expand Widget Templates.

Step 1.
Find this line of code <b:include name='nextprev'/>
And place this code below <b:include name='nextprev'/>

 <b:if cond='data:blog.pageType == &quot;index&quot;'> <style type='text/css'> .blogpager { font-size:16px; color: #060; font-weight:bold;} A.blogpager:hover { background:transparent; color:white;} #vwg-pager-first, #vwg-pager-last, #vwg-pager-next, #vwg-pager-prev{ padding:2px 5px; border:1px #cccccc solid; font-weight:bold; margin:2px;} #vwg-pager-first:hover, #vwg-pager-last:hover, #vwg-pager-next:hover, #vwg-pager-prev:hover{ padding:2px 5px; border:1px navy solid; background-color:#24618E; color:white; font-weight:bold;} </style> </b:if> <div align='center' style='margin:5px;'> <form action='#' name='pager20'> <span id='vwg-pager-first'/> <span id='vwg-pager-prev'/> <input name='showingpage' onfocus='this.select()' size='4' title='Enter page number that You want to go' type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/> <span id='vwg-pager-next'/> <span id='vwg-pager-last'/> </form> </div> <script type='text/javascript'> var blogID = &quot;3972232990891503524&quot;; var home_page = &quot;http://myfundoo-blog.blogspot.com/&quot;; var pager_max_main = 3; var pager_first_text = &quot;First&quot;; var pager_last_text = &quot;Last&quot;; var pager_prev_text = &quot;Prev&quot;; var pager_next_text = &quot;Next&quot;; </script> <script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js" type="text/javascript"></script>
 Click preview to make sure that everything is alright.

Step 2:
There are three red places in the above code you need to make changes according to your blog.
3972232990891503524 -this is your blog id which is unique for every blog.(see image below)


 http://myfundoo-blog.blogspot.com/-replace this with your blog address.
3-Which represents number of posts on the main page .

♦ Click on Save Changes.


Some more Points :
  • It is advisable to host javascript yourself .    pager-script-v20.js
  • You can put this java script code directly to your  template avoiding external linking.
Replace
 <script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js" type="text/javascript"></script>

With
 

Comments

  1. I KNOW U HAVE BUT MANY PEOPLE WANT
    SCRIPT TO PASTE IN PAGE ELEMENT NOT TO EDIT THE TEMPLATE

    ReplyDelete
  2. Thanks for sharing this. This is exactly what I needed!

    I have read your instructions carefully, but unfortunately it doesn't work properly:
    http://farm5.static.flickr.com/4132/5020259227_c7fc2369d3_m.jpg

    This is the template I am using:
    http://showcase-demo-dantearaujo.blogspot.com/

    Please advice. My email is
    irky79{at}yahoo{dot}com{dot}sg

    ReplyDelete
  3. nice working but most antivurus blocked this script :/

    ReplyDelete

Post a Comment


Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.
Thanks for reading,
Admin

Popular posts from this blog

Best DoFollow Blog directories list for seo

List of Dofollow Blog directories,
Note: some items have profile information some do not, doesn’t matter, they’re all DoFollow Blog directories so submit your blogs to them all.
DOFOLLOW BLOG DIRECTORIES

Bloghop.com
Year Site Created: 2000
Indexed Pages in Google: 103,000
Backlinks in Yahoo: 542,700
PageRank: 6
Link Status: Dofollow
Quantcast Rank: 200,223
Editorial Policy: Yes
Spam in index: No
Submission rules: From the website:
We will reject: Spam blogs, hate blogs, stolen blogs, links to non-blog websites, links to illegal or illicit topics like child pornography. Blogs with under 5 posts are no longer accepted, but they might be waitlisted for later review if they look cool.
Commercial blogs are fine, but they must be “fun and useful.” Because of the huge amount of robot-generated blogs being submitted, blogs with the following will not be approved for listing: Acne, Mesothelioma, Real Estate, Lawsuits, Insurance, Gambling, SEO, Web Marketing, Medical Procedures and En…

Get ip-address widget for your blogger

Here is a unique collection of  IP address widgets which shows your visitors their Ip address,operating system,country,browser and the version of the browser.It is cool thing to display  ip address to your visitor's specially if you have TECH related blog.
Now you can get these any of these widgets and add these to your blogs by following these steps -

Get Ip Address Widget for your blog

1 .Choose any widget they are in different size and shapes,choose any according to your blog requirement.
2. Login to blogger dashboard ,and the click on Layout - > page Elements .
3. ADD a new HTML/Javascript gadget anywhere in your blog.
4. Copy any code from below(all are working) and paste in to HTML / Javascript gadget and then save your gadget.
5 Done,Your widget is Now live


1 .Square Ip Address Widget (Height=125px, Width=125px)<!--Ip Address Widget Starts--><span style="display: block; text-align: center;"><a href="http://myfundoo-blog.blogspot.com">…

Add a reply option to blogger comments like Wordpress

If you Are using blogger platform for your blog than during some stage of your blogger life you must have noticed that blogger does not have Reply option to it comments.This is one of the major reason why people migrate towards Disqus or IntenseDebate comment Platform.
I suggest you to read this - Readers can't comment on your blog - Tip For You

With a very little change to your template you can add this hack to your blog.
This hack was originally posted on thisischen

ScreenShot :
Update - Previous Reply code was not working for some blogger templates.This is an updated version and work well with all templates
Adding Comment Replies to your blog.

Step [1] In your dashboard Click 'Layout' > 'Edit Html'> Tick the 'Expand Widget templates' box.

Step[2] Find the following code in your blogs Html : <data:commentPostedByMsg/> 

Step[3]. Paste the following code Directly Below/After <data:commentPostedByMsg/>  




<span class='comment-reply'…