An easy way to make the numbers next page, this widget is used to facilitate the visitors search for previous articles by selecting the number posted on the back. is also very easy to not need to fuss over just a bit ago entered code to html / java script.
This sample of images
1. Login Blogger
2. Go to Edit Layout
3. Add Page Element
3. Copy code below and paste into an empty area
<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</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)==&
quot;.blogspot.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=3;
var displayPageNum=4;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';
var labelHtml = '<span class="showpageNum"><a href=&
quot;/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="/"&
gt;' upPageWord '</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'
htmlMap[p] '">' upPageWord '</a></span>';
}
fFlag ;
}
if(p==(thisNum-1)){
html = ' <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="/"&
gt;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="/"&
gt;' firstPageWord ' </a></span>' upPageHtml ' '
html ' ';
}else{
html = '' labelHtml firstPageWord ' </a></span>'
upPageHtml ' ' html ' ';
}
}
html = '<div class="showpageArea"><span style="font-
size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color:
#000000;border: 1px solid #333; background-color: #FFFFFF;"
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&
amp;callback=showpageCount&max-results=99999" type="text/javascript"&
gt;</script>
On line 5, you may need to change the "blogspot.com" to reflect your domain extention if you use a custom domain.
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&<br/>
quot;.blogspot.com/";This default installation should work fine for anyone hosted on Blog*Spot or a dot.com domain, but you will need to alter this section if your custom domain ends in .co.uk or .info for example.
In lines 19 and 20, you can change these values to alter how many posts are displayed on each page, and how many links will be visible at the same time.
The var pageCount = 5; section defiines the number of posts displayed on each page, while var displayPageNum = 5; defines the number of links which are displayed (eg: 1 - 2 - 3 - 4 - 5) beneath the posts section.
