Rabu, 22 Mei 2013

Cara membuat navigasi halaman nomor di blogspot

Akhirnya ada waktu senggang buat posting artikel lagi, kali ini Scholovers Blogger akan menyempatkan waktu untuk psting artikel tentang Cara membuat navigasi halaman nomor di blogspot kalo diarikel lainnya saya pernah posting tentang Cara Membuat Halaman Navigasi Bernomor di wordpress tanpa plugin, kali ini dengan tema yang sama namun dengan platform yang berbeda.

oke langsung saja ya, untuk memasang halaman navigasi ini kita hanya perlu memasang kode javascript di template kita dan menambahkan sedikit kode CSS untuk mempercantik tampilannya

Oke langsung saja kamu login di blogger kamu kemudian pilih template :



kemudian edit HTML, cari code </body> kemudian pastekan kode ini di atasnya :
<!--Page Navigation Start-->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://ahmad-rifai-tools.googlecode.com/files/pagenavi.js'
type='text/javascript'/>
<!--Page Navigation End -->
kemudian save template.
Nah sekarang kita akan menambahkan kode CSS Untuk mengatur navigasi halaman tersebut, Cari kode ]]></b:skin> kemudian letakkan kode CSS ini diatasnya :

/* ----- Page Navigation styles ----- */
.showpageNum a {
padding: 2px 5px;
margin:0 5px;
text-decoration: none;
border:1px solid #ccc;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #eee;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #ccc;
background: #ddd;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 2px 5px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #FFA500;
background: #FFA500;
text-decoration: none;
}
silahkan save lagi templatenya dan lihat hasilnya...
Oke mungkin itu  saja artikel yang saya share kali ini semoga artikel tentang Cara membuat navigasi halaman nomor di blogspot bisa bermanfaat dan di terapkan di blog sobat.


Berkomentarlah dengan sopan dan tidak menggunakan Link aktif. EmoticonEmoticon

Diberdayakan oleh Blogger.