4 Cara Membuat Halaman Navigasi Blog Dengan Angka

Ada banyak sekali cara untuk membuat blog anda terlihat semakin proffessional, di antaranya adalah menggunakan script navigasi halaman dengan menggunakan angka seperti yang akan saya share di postingan ini, dan tentu cara ini sangatlah mudah dan tidak memakan waktu yang lama untuk penerapannya sehingga waktu anda untuk melakukan update postingan tidak akan terganggu dengan kegiatan dekorasi ini, sebenarnya tutorial ini sangat bermanfaat selain untuk meperindah blog anda juga untuk memudahkan pengunjung menjelajahi blog anda, karena tampilan dari navigasi yang menunjukkan halaman selanjutnya dari blog anda akan kita rubah dengan navigasi angka 123, ada 4 model yang akan saya bagikan di sini dan tentunya memiliki style berbeda setiap scriptnya, jadi bisa anda pilih salah satu dan sesuaikan dengan keinginan masing masing ya

Model pertama ini saya dapatkan dari blognya madamvia yang hasilnya akan seperti ini

Berikut penerapannya
Letakan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

.showpageNum a {
color:#FFF;padding:4px  10px;
margin:0 2px;
text-decoration:none;
-webkit-border-radius:2px;-
moz-border-radius:2px;
background:#848484
}        
.showpageOf {
color:#222;
margin:0 6px 0 0
}        
.showpageNum a:hover {
background:#222;
color:#FFF
}        
.showpagePoint {
color:#FFF;
text-shadow:0 1px 2px #333;
padding:4px  10px;
margin:0 2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
background:#222;
text-decoration:none
}

Selanjutnya letakkan javascript ini dibawah tag </body> 

<script  type='text/javascript'>      
var  home_page=&quot;/&quot;;      
var  urlactivepage=location.href;      
var  postperpage=10;      
var  numshowpage=7;      
var upPageWord  =&#39;&#9668;&#39;;      
var downPageWord  =&#39;&#9658;&#39;;      
</script>      
<script  src='http://miscah.googlecode.com/files/pagenav.js'  type='text/javascript'/>

Dari kode javascript di atas silahkan sobat ganti angka 10 pada postperpage dengan jumlah postingan yang ingin sobat tampilkan pada halaman selanjutnya blog sobat, sedangkan angka 7 bisa sobat ganti dengan jumlah navigasi page yang ingin ditampilkan (navigasi 123 pada bagian bawah post)

Model kedua saya dapatkan dari tipsbloggerkita dan tampilannya seperti ini

Letakkan kode ini dibawah tag <b:includable id='mobile-index-post' var='post'>

<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 10,
numPages: 7,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}
</script>
<script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

Dari kode javascript di atas silahkan sobat ganti angka 10 pada perpage dengan jumlah postingan yang ingin sobat tampilkan pada halaman selanjutnya blog sobat, sedangkan angka 7 bisa sobat ganti dengan jumlah navigasi page yang ingin ditampilkan (navigasi 123 pada bagian bawah post)

Selanjutnya cari dan ganti kode <b:include name='nextprev'/> dengan kode di bawah ini

<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>

Kemudian letakkan CSS ini dibawah ini diatas kode ]]></b:skin>

#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;
}

NB//* Model ketiga dan keempat cukup mengganti CSS nya saja, sedangkan script HTML masih sama dengan script model kedua

Model ketiga tampilannya akan seperti ini

Letakkan CSS ini dibawah ini diatas kode ]]></b:skin>

    #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);
}

Model Keempat dan terakhir nih, tampilannya akan seperti ini

Letakkan CSS ini dibawah ini diatas kode ]]></b:skin>

#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) );
}

Jangan lupa di simpan template untuk melihat perubahannya, dan ingat juga untuk backup template terlebih dahulu untuk jaga jaga bila ada kesalahan. Cukup sekian tutorial cara membuat halaman navigasi blog dengan angka yang bisa saya bagikan, semoga bisa bermanfaat.

↞Harap sertakan link sumber(aktif) bila ingin mempublikasikan ulang artikel ini↠

Monggo di share ➥➥➥

Facebook Google+ Twitter

Postingan terkait:

— Rabu, 01 Juni 2016 — Add Comment — Tutorial Blog