MEMBUAT NAVIGASI NOMOR HALAMAN VARIASI-1

MUSIK DIGITAL kali ini akan berbagi tips-trik blogging berkaitan dengan membuat navigasi nomor halaman variasi-1, yang menurut kami, MUSIK DIGITAL Blog, merupakan sarana navigasi utama pada bagian home-page untuk memunculkan kesan blog yang profesional dan berbeda dengan blog-blog yang lainnya (tentu saja yang masih menerapkan tombol new-post, home dan older-post).

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>

<div style="text-align: justify;"> .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 /> } </div>

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

<!--Page Navigasi--><br /> <b:if cond='data:blog.pageType != &quot;item&quot;'><br /> <b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /> <script type='text/javascript'><br /> var pageCount=<span style="color: #38761d;">6</span>;<br /> var displayPageNum=<span style="color: #38761d;">5</span>;<br /> var upPageWord =&#39;<span style="color: #38761d;">Previous</span>&#39;;<br /> var downPageWord =&#39;<span style="color: #38761d;">Next</span>&#39;;<br /> </script><br /> <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/><br /> </b:if><br /> </b:if><br /> <!--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.

Sumber inspirasi : http://www.bamz.us/2012/01/membuat-navigasi-nomer-halaman-blog.html

Tweet