navigasi nomor halaman blog untuk pc dan ponsel

navigasi nomor halaman blog untuk pc dan ponsel

First of all Happy New Year. Today I came up with 5 different styles of page navigation. Actually I have posted an tutorial for adding page navigation which will replace default pager links with numbered page navigation. It maybe feeling boor, for example: if a visitor want to get 5th page of a blog is difficult to get that page because visitor want to click older link again and again. So to abolish such things we have to implement numbered page navigation in blog. This tutorial will avoid that problem by adding this widget. You can select any one of 5 different styles that I had mentioned below. It is easy to add on your blog. Make something changes in your blog on the new year. Let's try it now..

How To Add Page Navigation in Blogger

1. Go to Blogger dashboardTemplate > Edit HTML > Check mark Expand Widget Templates and Find Below code.
cari kode berikut untuk tampilan halaman blog pada pc
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
dan kode berikut untuk tampilan halaman blog pada ponsel
<b:includable id='mobile-index-post' var='post'>
2. kopi script berikut ini dan letakkan pas di bagian bawah kedua kode diatas atau salah satunya saja misalnya dibagian bawah kode <b:widget id='Blog1'.. saja jika cuma menginginkan tampilan pada pc doang
<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: "»",
prevText: "«"
}
</script>
<script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>
Customize above code if you want to change following:

perpage : How many posts per page you want to display. You can change 7 (in blue color)

numpage : How many number will show in your page Navigation. You can change 5 (in red color)

3. Once again find the below code.
<b:include name='nextprev'/>
4. Replace above code with following code.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>
5. Now Find  ]]></b:skin>  and add one of the following css style code to your blogger blog.
ini tidak mutlak karena di blog saya ini script tersebut saya taroh diatas </style> baru muncul tampilannya

Style #1


navigasi nomor halaman pada blog
#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
background-color: #F8F8F8;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffcfcfc,EndColorStr=#fff8f8f8);
background-image: -moz-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: -ms-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: -o-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FCFCFC),color-stop(100%,#F8F8F8));
background-image: -webkit-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: linear-gradient(to bottom,#FCFCFC 0,#F8F8F8 100%);
padding: 5px 10px;
border: 1px solid lightGrey;
font-weight: bold;
font-size: 12px;
vertical-align: middle;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 2px 2px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover, .pagenavi a:hover {
border-color: #C6C6C6;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);
background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));
background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
border-color: #C6C6C6;
background-color: #E9E9E9;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #C6C6C6;
background-color: #E9E9E9;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}

Style #2


navigasi nomor halaman pada blog
#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
background-color: #3BB3E0;
padding:  5px 10px;
position: relative;
margin: 2px;
font-size: 12px;
text-decoration: none;
color: white;
border: solid 1px #186F8F;
background-image: linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);
background-image: -o-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);
background-image: -moz-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);
background-image: -webkit-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);
background-image: -ms-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #2CA0CA), color-stop(1, #3EB8E5) );
-webkit-box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;
-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#blog-pager a:hover, .pagenavi a:hover {
background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );
}

Style #3


navigasi nomor halaman pada blog
#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
border: 1px solid #3d8bf2;                
padding: 5px 10px;                 
text-decoration: none;                 
font-family: arial;                 
color:#fff;                 
margin: 2px;                 
background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg1.PNG');
background-position: left;            
-webkit-transition: all 0.7s ease-in-out;               
-moz-transition: all 0.7s ease-in-out;                 
-o-transition: all 0.7s ease-in-out;  
}
#blog-pager a:hover, .pagenavi a:hover {
background-position:right; 
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background-position:right; 
}

Style #4


navigasi nomor halaman pada blog
#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 15px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
border: 1px solid #3d8bf2;                
padding: 5px 10px;                 
text-decoration: none;                 
font-family: arial;                 
color:#fff;                 
margin: 2px;                 
background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg2.PNG');
background-position: bottom;         
-webkit-transition: all 0.7s ease-in-out;               
-moz-transition: all 0.7s ease-in-out;                 
-o-transition: all 0.7s ease-in-out;  
}
#blog-pager a:hover, .pagenavi a:hover {
background-position:top;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background-position:top; 
}

Style #5


navigasi nomor halaman pada blog
#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 15px;
}
.pagenavi .pages {
display: none;
}
#blog-pager a, .pagenavi span, .pagenavi a {
padding: 5px 10px;
text-decoration: none;
font-family: arial;
color: white;
margin: 2px;
background: black;
background-position: bottom;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
border-radius: 30px;
font-size: 20px;
}
#blog-pager a:hover, .pagenavi a:hover {
background: orange;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background: orange;
}

bonus navigasi untuk anda yg sudah mampir ke blog ini :D

Style #1

navigasi nomor halaman pada blog
.pagenavi{
clear:both;
margin:10px;
text-align:center;
}
.pagenavi span, .pagenavi a {
display: inline-block;
padding: 0px 9px;
margin-right: 4px;
border-radius: 3px;
border: solid 1px #32373b;
background: #3e4347;
box-shadow: inset 0px 1px 1px rgba(255,255,255, .1), 0px 1px 3px rgba(0,0,0, .1);
font-size: .875em;
font-weight: bold;
text-decoration: none;
color: #feffff;
text-shadow: 0px 1px 0px rgba(0,0,0, .5);
}
.pagenavi span:hover,.pagenavi a:hover {
background: #3d4f5d;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#547085), to(#3d4f5d));
background: -moz-linear-gradient(0% 0% 270deg,#547085, #3d4f5d);
}
.pagenavi .current {
border: none;
background: #616161;
box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
color: #f0f0f0;
text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}

Style #2

navigasi nomor halaman pada blog
.pagenavi{
clear:both;
margin:10px;
text-align:center;
}
.pagenavi span, .pagenavi a {
display: inline-block;
padding: 5px 10px;
margin-right: 4px;
background: #f7f7f7;
background: -webkit-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
background: -moz-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
background: -o-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
background: -ms-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
background: linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
padding: 5px 10px;
text-decoration: none;
color: #7e7e7e;
border: 1px solid #c6c6c6;
-webkit-box-shadow: inset 0 4px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 4px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,.2);
box-shadow: inset 0 4px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,.2);
font-weight: bold;
border-radius:3px;
}
.pagenavi span:hover,.pagenavi a:hover, .pagenavi .current {
background: #9ad6fb;
background: -webkit-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
background: -moz-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
background: -o-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
background: -ms-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
background: linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
border: 1px solid #72ade4;
color: #4879a6;
-webkit-box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
-moz-box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
-webkit-transition: all 0.25s ease 0s;
-moz-transition: all 0.25s ease 0s;
-o-transition: all 0.25s ease 0s;
transition: all 0.25s ease 0s;
}
.pagenavi { border:none; }

Style #3

navigasi nomor halaman pada blog
.pagenavi{
clear:both;
margin:10px;
text-align:center;
}
.pagenavi span, .pagenavi a {
display: inline-block;
padding: 5px 10px;
margin-right: 4px;
text-decoration: none;
color: #717171;
font: bold 11px Arial, sans-serif;
text-shadow: 0px 1px white;
padding: 5px 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
background: #f9f9f9;
background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8',GradientType=0 ); 
}
.pagenavi span:hover,.pagenavi a:hover {
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
background: #fff;
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8',GradientType=0 );
border:none;
color:#575757;
}
.pagenavi .current {
color: white;
text-shadow: 0px 1px #3f789f;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
background: #7cb9e5;
background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8',GradientType=0 );
}
.pagenavi .current:hover {
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
background: #99cefc;
background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8',GradientType=0 );
}
.pagenavi .current:active {
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
}

If there is an bug in the code you comment it below..

0 comments navigasi nomor halaman blog untuk pc dan ponsel