How To Add Stylish Numbered Pagination On your Blogger Blog

Blogger platform provides its users with a traditional style of pagination which shows two links OLDER and NEWER, or PREVIOUS/NEXT, to browse through the index.

The above method however, has become mundane and you need to update your design to a numbered pagination if you want to keep your visitors, as you know, quality contents and a good design are the two major keys to a successful blog.

I will discuss two methods in this tutorial so you choose the one that best matches your template.

Now lets get straight to the steps.

This tutorial involves two steps

1. Adding the CSS
2. Adding the javascript.

How to add stylish numbered pagination to your blogger blog.

METHOD 1:Grey paged navigation with a red selected page.

• Login to your blogger dashboard
• Click on template and backup your template (precaution measure)
• Now click edit html
• Use CTRL F to find the following code on your HTML.

]]></b:skin>

• then add the below code  after ]]></b:skin>

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }.blog-pager {background: none;}.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;} .showpageOf{display:none!important}#blog-pager .pages{border:none;}

NOTE:if you want to hide the "first" and "last" buttons, then add the following code below the css code above.

.firstpage, .lastpage {display: none;}

Step 2: adding the script.

• Use CTRL F to find the following tag.

</body>

• Then add the following code just above it.

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><script type='text/javascript'>  /*<![CDATA[*/    var perPage=3;    var numPages=3;    var firstText ='First';    var lastText ='Last';    var prevText ='« Previous';    var nextText ='Next »';    var urlactivepage=location.href;    var home_page="/"; if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}if(pageStart>2){html+=' ... '}for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(pageEnd<lastPageNo-1){html+='...'}if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}location.href=pAddress}   /*]]>*/</script></b:if></b:if>

Then Click on save template

METHOD 2:

Grey paged navigation with a blue selected page

• Login to your blogger dashboard
• Click on template>Edit template
• Then find the following code using CTRL F.

</head>

• Now place the following code just above the </head> tag

<style type="text/css">.showpageArea {    clear: both;    border: 1px solid #eee;    border-width: 1px 0;    padding: 15px;    margin: 15px 0;}.showpageOf {    color: #888;    margin-right: 10px;}.showpagePoint,
.showpageNum a,
.showpage a {    /*border-radius*/    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;    padding: 5px 10px;    display: inline-block;    margin: 0 5px;    background-color: #eee;    /*box-shadow*/    -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);    -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);}.showpageArea, .showpageArea a {    color: #333;}.showpage a: hover, .showpageNum a: hover, .showpagePoint {    background-color: #3498DB;    color: #f5f5f5;}.showpagePoint {    font-weight: 700;}</style> 

• Again you have to find this tag </body> then add the following code above it.

<!-- Begin Page Navigation --><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><script type='text/javascript'>var pageCount=6;var displayPageNum=6;var upPageWord =&#39;Previous&#39;;var downPageWord =&#39;Next&#39;;</script><script src='https://drive.google.com/uc?export=download&id=0BxdeKliyEmFxeFJkblhPd0phYUU' /></b:if></b:if><!-- End Page Navigation -->

Now save your template, and reload your blog.

That’s all.

was this article helpful?

don't forget to leave your comment

Read More »

How to Add Related Posts Widget On your Blogger Blog

The related post widget is a very essential tool for any blogger as it makes visitors to spend more time on your blog by displaying a link of posts related to the one the reader is currently reading and thereby increasing your page views.

However you should note that the related post widget works with the labels you give to your posts, therefore it won’t work on your blog if you don’t  give labels to your posts.;

Below is how you can add related post widget to your blog like the one you can see here on brownteks.com.

Read More »

How To Make Your Blogger Mobile Pagelist Drop Down Menu Display Like Webview

The default mobile view of any blogger template offers you a drop down menu Pagelist.

Most visitors finds it difficult to Navigate the blog since they expect to see same pattern of page list they see on the desktop view, and this makes it difficult for them to observe the dropdown page list on mobile.

This however reduces the user friendliness of your blog and somehow affects your page views. So there’s need for you to change this to look exactly like that of the desktop view and that’s what am going to teach you in this tutorial.

Lets get it started:

• Login to your blogger dashboard
• Click on template ==> Edit HTML, then Search for <b:widget id='PageList1'. Using CTRL F
• Or you simply use the jump to widget option to navigate to Pagelist1 widget code.

Then look for the following code:

<select expr:id='data:widget.instanceId + &quot;_select&quot;'><b:loop values='data:links' var='link'><b:if cond='data:link.isCurrentPage'><option expr:value='data:link.href' selected='selected'><data:link.title/></option><b:else/><option expr:value='data:link.href'><data:link.title/></option></b:if></b:loop></select><span class='pagelist-arrow'>&amp;#9660;</span>

Then replace the highlighted code with the following code.

<div align='center' class='tabs-outer'>
<strong>
<b:loop values='data:links' var='link'>
<span> <a expr:href='data:link.href'><data:link.title/></a> </span><!--separator-->
</b:loop>
</strong>
</div>
<div class='clear'/>

==> then Click "Save Template"

Next Step:

==> Go to "Template" > "Customize" > "Advanced" > "Add CSS"

==>Then  Copy and paste the below code, in the "Add CSS" box

.mobile .tabs-outer {
color: #333;
text-align:center;
width:auto;
overflow:hidden;
margin:0;
padding:0px 0px 0px 0px; }
  .mobile .tabs-outer span a {
color: #fff;
padding:0 7px;margin:0;} .mobile .tabs-outer span a:hover {text-decoration:none;color: #fff;font-size:1.0em;padding:0 5px;margin:0;}

Finally Click on “Apply to Blog”

And that’s all about it; you should have a desktop like page list on your mobile view if you have followed the above steps correctly.

DON'T FORGET TO LEAVE YOUR COMMENTS AND ALSO SHARE THIS POST

Read More »

Easy Step To Recieve Your Payoneer Card In Nigeria

In this tutorial I will show you the easiest way to get your payoneer MasterCard here in Nigeria.

Payoneer is a virtual bank that allows bloggers and freelancers to receive payments from USA and European countries as if they are residing in those locations.

This is the account you will use to receive your adsense earnings so it’s very essential.

Sign up here 

After signup and approval, Payoneer will send you your MasterCard debit card to the address you provided during registration, this is just like any other ATM card that you can use to withdraw your payoneer funds at any master card supported ATM/POS anywhere in the world.

But the problem is that many people who signed up and got approved for payoneer do not receive their payoneer MasterCard because of so many reasons. Maybe the card lost Enroute because of the poor mailing system or the post masters could not locate your address to deliver the card to you. In any case it becomes so difficult to receive your payoneer MasterCard here in Nigeria.

But not to worry, l gat a solution for the above problem!

USE EXPEDITE DELIVERY (DHL)

This is the best way to get your payoneer MasterCard in Nigeria. Delivery is just 4-8days.

You will be charged only $50 for this. Follow the steps below:

• Fund your payoneer account with at least $50

Its better if you already have this amount on your payoneer account. But if not, contact your fellow payoneer user that has funds to help you fund your payoneer for you.

• Request for Expedite delivery

Once you have up to $50, login to your payoneer account and click the support section. In the support section, click on contact. Select your funding source, Pick card delivery and tell them that you will need your card to be delivered to you via DHL.

After that, within few minutes the payoneer customer support will contact you telling you the information you need to send them, these are typically your mailing address and phone number.

Make sure you reply them accordingly and wait the subsequent message.

After all these, the payoneer MasterCard will be shipped to your location. Wait for few days and you will receive a call from DHL telling you that you have a package with them.

That’s how to get your payoneer MasterCard here in Nigeria.

Source:MakeMoneyOnline

DON'T FORGET TO LEAVE YOUR COMMENTS AND ALSO SHARE THIS POST

Read More »

how to drive massive traffic to your blog from Nairaland

Are you looking for a site you can generate huge traffic from? The solution is here with you today, l urge you to read this post carefully as its going to take your traffic rate to the next level.

Perhaps you have heard about Nairaland and as a blogger you just go there to read posts? Today l will teach you how to take full advantage of Nairaland and boost your traffic rate to 100%.

What is Nairaland:

Nairaland is an online community created in March 2005, by Seun Osewa a Nigerian man. The Community has 1,682,786 members as at the time of this post (3^rd November2016) and its ranked the 7^th most visited site in Nigeria.

Haven known what nairaland is; lets see how to take full advantage of this great community to increase your blog’s traffic.

What Next?

• First you have to visit www.nairaland.com
• Then click on Join Nairaland or click here 
• After your registration it will take two weeks before you can comment on a post or be able to create a topic.

Next Step:

• Login to your account.
• Create a good topic.

Note:Naiaraland has over 1,682,786 members, therefore only the best topics makes it to front page.

How Can I make the front page?

First you should take note of the rules on the screenshot below:

Haven taken note of the rules,make sure your topic is catchy and relevant.

Ensure the post is original and at the End of your post include any of the following.

CC:Lalasticlala

CC:Ishilove

CC:Mynd24

CC:Seun

• The above names are usernames of some of the admins, including those names after your posts gives them the impression that you are an older member or a regular visitor of the community, hence that’s why you knew the above trick.

That gives your post a better chance of making it to the front page.

Also; do not forget adding a backlink to your blog on the post, and monitor the post constantly and reply to comments.

If you carefully follow the above tutorial, then the magic is done. You will amazed at the amount of traffic it’s going to drive to your blog.

READ ALSO: How this Dude changed his name to Iphone 7 in order to earn Iphone 7


DON'T FORGET TO LEAVE YOUR COMMENTS AND ALSO SHARE THIS POST

Read More »

How To Add Floating Share Buttons To Your Blog's Side Bar

Here in this tutorial you will learn how to add a floating social share buttons to the side bar of  your blog or website.

This is very easy to achieve, but l always advice you backup your template before implementing this code just in case an error occurs .

Read More »

How To Add An Admin Bar To Your Blogger Blog

Bloggers always want to do something unique in order to be ahead of their competitors, this is pretty cool, well l found something new on my research today that l felt we will all wanna try on our blog.

Today am going to teach you how you can have all the necessary admin controls right on the top of your homepage with no need to go through your blogger dashboard again.

This will show your admin control panel at the top of your blog with all the necessary controls from your blogger dashboard such as:

• Blogger dashboard
• Quick link to create a new page or a new post
• Access to view all posts on the blog
• Access to your comments
• Access to your blog’s layout where you can add or rearrange your gadgets
• Access to your blog template where you can edit the HTML
• Refresh button, you can use it to refresh the current page
• New Tab, which lets you open a new tab on your browser from within your homepage
• Access to your blog settings
• Access to your blog's stats
• And finally a Logout button

Note: these controls will only be visible to the blog admins, so visitor won’t be able to see it.

The Result will look like the screenshot below, click on “View original size” to see the original size in new tab.

How to add an admin-bar to blogger?

There is no much task to do this; all you have to do is follow these simple steps below:

• Go to your blogger dashboard
• Click on template
• Click Edit HTML
• Find the following code on your html using CTRL+ F

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

• If you are unable to find the above code, simply search for :

<body

and paste the below code just after any of the above tag.

<span class='item-control blog-admin'>

<style>

.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; }

.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;}

.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;}

.control-panel a:hover {text-decoration:none; color:#FC8F44;}

</style>

<div class='control-panel'>

<ul>

<li><a href='http://www.blogger.com/home'>My Blogs</a></li>

<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/src=sidebar'>New Post</a></li>

<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/target=page'>New Page</a></li>

<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#posts'>All Posts</a></li>

<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#comments'>Comments</a></li>

<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#pageelements'>Layout</a></li>

<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#templatehtml'>Edit HTML</a></li>

<li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li>

<li><a href='/' target='_blank'>New Tab</a></li>

<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#basicsettings'>Settings</a></li>

<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#overviewstats'>Stats</a></li>

<li><a href='http://www.blogger.com/logout.g'>Logout</a></li>

</ul>

</div>

</span>

Replace the xxxxxxxx with your blog I.D which you can find by login into your blogger dashboard then click on the address bar and copy the I.D as indicated on the Screenshot below.

Was this article helpful?

Please leave us a comment on the comment box below

Read More »