Skip to main content

Numbered Page Nagivation In Blogger

Lets have a look how to add page number navigation in blogger (blogspot) blogs:

What is Numbered Page Navigation ?
In blogger, by default, you see Older posts, Newer Posts links near the bottom of the page which is useful to your blog visitors to navigate to other posts of your blog. But, the problem is.. people hardly notice those newer and older posts links.. which means.. less pageviews to your blog.

So, to increase your blog pageviews you can use this cool looking, advanced numbered page navigation to your blog.

How to add this to your Blogger blog ? (first backup your blog template before editing anything)

1. Login to Blogger Dashboard
2. Navigate to Design(Layout) > Edit HTML
3. Dont Click on Expand Widget Templates
4. Now Find ]]></b:skin>.Copy and Paste the following code right above ]]></b:skin> tag.

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

This is the CSS code which defines the look and feel of the page navigation.

5. Now Find </body>. Copy and Paste the following code right above </body> tag.

<!--Page Navigation Starts--><b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><script type='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord ='Previous';var downPageWord ='Next';</script><script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/></b:if></b:if><!--Page Navigation Ends -->

Now you could see the page navigation widget at bottom of the posts. This is how it will be:


Customization :

var pageCount=5; : This code determines the number of posts that displayed on each page

var displayPageNum=5; : This code determines navigation numbers displayed on the page navigation widget(like 1 2 3 4 5 …).

var upPageWord ='Previous';
var upPageWord ='Next';
These lines of code is for for Previous and Next page link.(Previous 1 2 3 … Next)
Labels:

Popular posts from this blog

Solving the 'Failed to load JVM DLL\bin\server\jvm.dll' Error in Android Studio and PyCharm: Easy Tips and Tricks

Are you experiencing the dreaded 'Failed to load JVM DLL\bin\server\jvm.dll' error when trying to launch Android Studio or PyCharm? Don't worry, you're not alone. This common issue can be caused by a variety of factors, but there are a few simple tips and tricks you can try to resolve it. First, make sure that you have the latest version of Java installed on your computer. If you're unsure, you can download the latest version from the official Java website. Next, try reinstalling the JDK (Java Development Kit). This can often fix issues with the JVM DLL. Another solution is to add the JDK path to your system environment variables. This can be done by going to the 'Advanced system settings' on your computer and then 'Environment Variables'. If none of these solutions work, another thing you can try is using the '-Xint' command line option when launching Android Studio or PyCharm. This will run the JVM in interpreted-only mode, which can help r...
Post a Comment
Read more

Minecraft - Pocket Edition - $4.91 game for free

Mine Craft, a widely known game name worldwide. It is one of the most favorite games in the world. This game is now available for android mobile. Mine craft - pocket edition is all about building and surviving. This game is mostly created based on graphical blocks.  Google play store has this game up for $4.91. ETT is giving away the game absolutely for free. Download Minecraft - Pocket Edition from the bellow link. Minecraft - Pocket Edition
Post a Comment
Read more

Freelance Writing: How to Build a Career as a Blogger

Freelance writing is a great way to build a career as a blogger. If you have a passion for writing and a desire to work from home, freelance writing can be a rewarding and lucrative career. In this guide, we'll cover the steps you need to take to build a successful career as a freelance blogger. Step 1: Choose a niche The first step in building a career as a freelance blogger is to choose a niche. Identify a topic that you are passionate about and that has a market demand. Research your niche and identify your target audience. Make sure your niche is broad enough to provide a steady stream of writing opportunities. Step 2: Build your portfolio The next step is to build your portfolio. Create a blog and write articles on your chosen niche to showcase your writing skills. Use platforms like Medium, LinkedIn, or guest posting to expand your reach and build your brand. Make sure your portfolio showcases your best work and highlights your expertise. Step 3: Network and pitch The third s...
Post a Comment
Read more