Membuat Number Page Navigation Blogspot

Umumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.

CSS

Silahkan anda masuk ke halaman HTML blogspot. Karena disini kita akan menambahkan serangkaian kode CSS dan Javascript di dalamnya.

Carilah kode ]]></b:skin> , dan letakan kode CSS berikut ini diatas nya.

/* -- NUMBER PAGE NAVIGATION -- */
.totalpages{color:#333; padding-right:7px}

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;}

.showpageArea a{text-decoration:none}

.showpageNum a{padding:1px 8px; margin:0 4px; text-decoration:none; border:1px solid #CDCDCD; background:#fff; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}

.showpageNum a:hover{border:1px solid #CDCDCD; background:#DDD}

.showpagePoint{color:#333; text-shadow:#333 0 1px 2px; padding:1px 8px; margin:2px; font-weight:bold; border:1px solid #FF9900; background:#FFBF00; text-decoration:none;-moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}

.showpageOf{margin:0 8px 0 0}

.showpage a{padding:1px 8px; margin:0 2px; text-decoration:none; border:1px solid #CDCDCD; background:#fff;-moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}

.showpage a:hover{color:#fff; text-shadow:#333 0 1px 2px; padding:1px 8px; margin:2px; font-weight:bold; border:1px solid #CDCDCD; background:#DDD; text-decoration:none;-moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}

.showpageNum a:link, .showpage a:link{text-decoration:none; color:#333}

Javascript

Selanjutnya, carilah kode </body> .
Masukan kode javascript berikut ini diatas nya.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=9;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!--Page Navigation Ends-->

Keterangan :
var pageCount=9; » Varian tersebut menjelaskan bahwa setiap halaman akan menampilkan 9 postingan / artikel.

var displayPageNum=5; » Varian tersebut menjelaskan jumlah page number ( contoh : 1, 2 , 3 , 4, 5 » Next )

Anda bebas mengubah varian tersebut sesuai dengan kebutuhan.

Setelah semua selesai, coba anda lihat dulu hasilnya dengan menekan tombol Preview.

Apabila tampilan Navigasi tersebut muncul dan tidak terjadi error, silahkan SAVE TEMPLATE anda.

Share this history on :

Tweet

Tips-Trik Blogger

• Cara Membuat Related Post Dua Kolom
• Cara Modifikasi Kotak Komentar Blogger
• Membuat Related Post dengan Efek Ceklis
• Membuat Breadcrumb Terindex Google
• Cara Membuat Menu Navigasi Kwicks Dengan jQuery
• Load Page Blog Lebih Keren Dengan Keyframes
• Cara Memasang Script Iklan Melayang (Ads popout)
• Menu Rocking Rolling Rounded Dengan jQuery
• Trik Mempercepat Loading Home Page Blog
• Cara Membuat Title Otomatis Pada Semua Posting
• Cara Membuat Efek Rotate Miring Dengan CSS3
• Pengertian SEO On Page Dan Off Page
• Cara Membuat Valid XHTML Blogger
• Script Untuk Menghindari Para Tukang Copas
• Cara Meningkatkan Traffic Blog Dengan (Manual)
• Cara Mudah Meningkatkan Traffic Blog dengan AutoSurf
• Cara Vertifikasi Ulang Blog Ke Google Webmaster Tools
• Cara Remove Broken Link Dengan Webmaster Tools
• Cara Membuat Kota Komentar Admin Berbeda
• Menghilangkan Tulisan "Langgan: Entri (Atom)"
• Black Devil Red Horns Emoticon
• Cara Pasang Iklan di Bawah Posting
• Ablewise | Tool Buat Memprediksi PageRank
• Google Index Pages Checker
• Blogger Support Upload Favicon Sendiri

Title : Membuat Number Page Navigation Blogspot
URL : http://blogcunayz.blogspot.com/2011/06/membuat-number-page-navigation-blogspot.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Membuat Number Page Navigation Blogspot sebagai Sumbernya.