Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Trik dan Tutorial Blog

Cara Mengganti Halaman Navigasi Blog Dengan Angka


Halaman Navigasi merupakan elemen penting di sebuah blog yang berfungsi untuk menampilkan artikel per halaman mulai dari halaman utama hingga postingan terakhir. Dengan adanya elemen tersebut, pengunjung dapat melihat setiap artikel di blog kita yang menarik untuk mereka baca.

Halaman Navigasi merupakan elemen penting di sebuah blog yang berfungsi untuk menampilkan Cara Mengganti Halaman Navigasi Blog Dengan Angka

Halaman Navigasi di blog pada umumnya memakai fitur Button Text (Previous - Home - Next). Namun kebanyakan blogger mengubah tampilan halaman navigasi mereka dengan fitur angka. Kenapa? Agar loncatan per halaman dapat lebih terlihat mulai dari postingan terbaru hingga yang terlama, sehingga pengunjung dapat leluasa mencari artikel tanpa harus membukanya per-halaman.

Kali ini saya akan mencoba mengganti fitur halaman navigasi button text tersebut dengan halaman navigasi angka. Lihat screenshoot halaman navigasi angka blog di bawah ini:

  Halaman Navigasi merupakan elemen penting di sebuah blog yang berfungsi untuk menampilkan Cara Mengganti Halaman Navigasi Blog Dengan Angka
Saya punya beberapa koleksi Halaman Navigasi Angka yang cukup manis untuk dipasang di blog. Jika templatenya cocok dan mendukung, maka navigasi ini akan muncul persis di bawah halaman posting. Tertarik untuk mencobanya? Bagaimana caranya?

Cara Mengganti Halaman Navigasi Blog Dengan Angka
  1. Login ke akun Blogger
  2. Pilih Template >> Edit HTML
  3. Cari aba-aba <b:includable id='mobile-index-post' var='post'> lalu copy-paste script berikut di bawahnya:
    4. <b:includable id='page-navi'>
    <div class='pagenavi'>
    <script type='text/javascript'>
    var pageNaviConf = {
    perPage: 7,
    numPages: 5,
    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>
    Ganti goresan pena yang berwarna Biru sesuai kebutuhan Anda.
  4. Setelah itu cari aba-aba <b:include name='nextprev'/> lalu ganti aba-aba tersebut dengan script berikut:
    5. <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. Cari kode: ]]></b:skin> lalu copy paste script berikut di atasnya.

    6. Pilih style yang cocok untuk template Anda:
    Style Pertama:
    Halaman Navigasi merupakan elemen penting di sebuah blog yang berfungsi untuk menampilkan Cara Mengganti Halaman Navigasi Blog Dengan Angka

    #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 Kedua
    Halaman Navigasi merupakan elemen penting di sebuah blog yang berfungsi untuk menampilkan Cara Mengganti Halaman Navigasi Blog Dengan Angka

    #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 Ketiga
    Halaman Navigasi merupakan elemen penting di sebuah blog yang berfungsi untuk menampilkan Cara Mengganti Halaman Navigasi Blog Dengan Angka
    #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;
    }
  6. Simpan dan lihat hasilnya.
Itulah sekilas pemahaman saya wacana Cara Mengganti Halaman Navigasi Blog Dengan Angka. Semoga bermanfaat. Jika mencari artikel lain yang serupa silahkan cek di bawah ini:

Anda mungkin menyukai postingan ini :