CARA GAMPANG MEMASANG NAVIGASI HALAMAN

Kali ini blog Cara Gampang akan membahas perihal memasang navigasi halaman pada blog yang kita miliki, memasang navigasi halaman pada blog versi Cara Gampang ini sangat mudah dilakukan, disamping untuk meningkatkan performa blog, pemasangan navigasi halaman ini juga untuk mengurangi kesan blog gratisan, sehingga mampu tampil bersaing dengan blog-blog berbayar lainnya.

Membuat Navigasi Nomer Halaman Blog untuk blogger / blogspot. Navigasi nomer halaman blogger ini intinya sebagai pengganti dari blog pager. Tentunya navigasi halaman bernomer ini terlihat lebih elegant dan profesional dengan menampilkan juga total page yang ada. Lihat contohnya di bawah ini.

Lihat juga contohnya pada blog Template Blogger, nah kalau yang ini beda lagi desainnya hehe. Buat anda yang sudah bisa edit css, bisa langsung edit sendiri tampilannya. Tapi tanpa di edit sudah bagus kok, terlihat lebih profesional dari pada tampilan "Older Post" atau "Posting Sebelumnya" dll. Bagaimana cara membuat navigasi nomer halaman blog di blogger? yoi lanjut baca tutorialnya di bawah ini.

Cara Membuat Navigasi Nomer Halaman Blogger

• Login ke blog anda  kemudian menuju halaman Design dan Edit HTML, jangan lupa di back up dulu templatenya untuk keamanan soalnya akhir akhir ini sering error blogger.
• Cari kode ]]></b:skin> lalu paste Css di bawah ini tepat di atas kode ]]></b:skin>

<blockquote class="tr_bq" style="color: blue;"> .showpageArea a {<br /> text-decoration:underline;<br /> }<br /> .showpageNum a {<br /> text-decoration:none;<br /> border: 1px solid #cccccc;<br /> margin:0 3px;<br /> padding:3px;<br /> }<br /> .showpageNum a:hover {<br /> border: 1px solid #cccccc;<br /> background-color:#cccccc;<br /> }<br /> .showpagePoint {<br /> color:#333;<br /> text-decoration:none;<br /> border: 1px solid #cccccc;<br /> background: #cccccc;<br /> margin:0 3px;<br /> padding:3px;<br /> }<br /> .showpageOf {<br /> text-decoration:none;<br /> padding:3px;<br /> margin: 0 3px 0 0;<br /> }<br /> .showpage a {<br /> text-decoration:none;<br /> border: 1px solid #cccccc;<br /> padding:3px;<br /> }<br /> .showpage a:hover {<br /> text-decoration:none;<br /> }<br /> .showpageNum a:link,.showpage a:link {<br /> text-decoration:none;<br /> color:#333333;<br /> }</blockquote>


Langkah selanjutnya anda cari kode </body> , kalau sudah ketemu paste kode berikut ini tepat di atas kode </body>

<!--Page Navigasi-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
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>
</b:if>
<!--Page Navigasi -->

Simpan template dan lihat hasilnya

Keterangan :

Anda bebas mengubah tulisan yang saya kasih warna hijau, angka 6 adalah jumlah posting yang tampil tiap halaman sedangkan yang 5 adalah tombol navigasi yang tampil. Next adalah text untuk ke halaman selanjutnya, sebaliknya previous untuk kembali kehalaman sebelumnya.