You are here → Home √ Navigasi Halaman Untuk Blogger

Navigasi Halaman Untuk Blogger

Dipublikasikan oleh Ilham Bachtiar pada Tuesday, November 20, 2012

sumber http://google.com
Page Navigation Numbered Blogger And Different Color - Menu Navigasi bernomor untuk blogger dengan gaya warna yang berbeda. Widget ini memiliki beberapa fungsi selain hanya untuk menambah style blog, seperti untuk melangkah kehalaman yang lebih lama atau lebih baru widget navigasi ini sangat membantu pengunjung.

ScreenShot

JavaScriptnya  saya dapatkan dari template Blog Kang Ismet, Sedangkan CSSnya saya dapatkan dari way2blogging.

Navigasi Halaman Untuk Blogger

1. Masuk Akun Blogger kamu
2. Pada menu Tata Letak, klik Tambah Gadget
3. Kemudian pilih HTML/JavaScript, dan masukan kode dibawah ini

<style type="text/css">
#blog-pager{padding:5px 0 !important;clear:both;}
.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #3b679e; background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca),  color-stop(100%,#7db9e8)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); }
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

</style><script type="text/javascript">
var home_page="/";
var urlactivepage=location.href;
var postperpage=6;
var numshowpage=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://obachti95.googlecode.com/files/pagenavigasi.js' type='text/javascript'></script>
4. Simpan

Keterangan : 

    Angka 6 yang berwarna merah adalah jumlah postingan yang akan tampil pada setiap halaman nomor.
    Angka 5 yang berwarna merah juga adalah nomor yang akan ditampilakan pada navigasi. 
    Yang saya beri warna biru adalah cssnya (gaya navigasi) dapat kamu sesuaikan sesukanya.

21 Komentar:

  1. Navigasi halaman pake JS sepertinya lebih mudah pasangnya ya sob, hanya mungkin sedikit bikin berat, okelah nanti saya bisa nyobanya soalnya waktu pake template yang kemarin saya juga pake JS...trims sob:}

    ReplyDelete
    Replies
    1. wah, itu yang jadi masalah sob javascript selalu ada konsekuensi dengan berat loading blog. repot ya :D

      Delete
    2. udah saya coba, di templateku ga work sob, ga tahu kenapa, mungkin karena 1 colom kali yah:}

      Delete
  2. memang tampilan akan menjadi lebih baik.. :)

    ReplyDelete
  3. Replies
    1. cocok pak, tinggal disesuaikan sendiri untuk wrnanya :)

      Delete
  4. Tapi sepertinya kode tersebut lagi eror atau templatenya sudah tidak sinkron lagi, saya sudah lama ingin membuat postingan ini tapi tidak pernah berhasil , saya sudah mencoba dengan dua blog yang saya punya hasilnya tetap nihil. Tapi tidak ada salahnya saya ingin mencobanya lagi semoga berhasil.

    ReplyDelete
    Replies
    1. Tapi mas, lihat hasilnya diblog saya. masih bisa digunakan dengan sempurna koq :)

      Delete
  5. Terima kasih sob atas tutornya,semoga yang belum punya navigasi bisa kesini untuk membuatnya :)

    ReplyDelete
  6. pernah sempet make sebelum nya.....mau pengen masang lagi nih...

    baru main ke sini lagi.... Blog nya semakin ok nih sob :)

    ReplyDelete
  7. bisa dicoba neh gan.
    thx ya.oea jngan lupa kunjungi situs baru ane di http://qqseo.blogspot.com

    ReplyDelete
  8. kayknya keren juga nih sob, tapi blog ane kayaknya sudah cukup deh..

    ReplyDelete
  9. mantaf kang, langsung running makasih tutorialnya

    ReplyDelete

 
Copyright © 2013 Obachti 95 . Powered by Blogger . All Rights Reserved