Select Menu

Tutorial

Bahasa

Sastra

Makalah

Tutorial Blog

Tutorial SEO

-

-

Premium Template

-

» » Membuat Navigasi Nomor Halaman Blog


Unknown Thursday, February 23, 2012 5

Membuat Navigasi Nomor Halaman Blog - 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.

Membuat Navigasi Nomer Halaman Blog

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. Untuk membuat navigasi nomer halaman blog di blogger, berikut langkah-langkahnya.

Cara Membuat Navigasi Nomer Halaman Blogger

  1. 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.
  2. Cari kode ]]></b:skin> lalu paste Css di bawah ini tepat di atas kode ]]></b:skin>

.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}

  1. 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 -->
  1. 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, sebalikanya previous untuk kembali kehalaman sebelumnya.

«
Next
Newer Post
»
Previous
Older Post

5 comments Membuat Navigasi Nomor Halaman Blog

  1. Link anda sudah terdaftar di link networking, silahkan pasang kode skrip link networking di sidebar blog anda, jika dlm wkt dekat kode tidak dipasang, link akan terhapus.
    Terima kasih

    ReplyDelete
  2. Sangat membantu

    ReplyDelete
  3. bagus sih bro, tapi takutnya tambah berat blognya ntar :D Nice info :)

    ReplyDelete
  4. @Blog Gedek: Yang tepenting gunakan widget yang perlu-perlu saja.. atau juga satu widget untuk beberapa conten..

    ReplyDelete

Tolong tinggalkanlah komentar walaupun hanya sepatah kata. Berkomentarlah dengan sopan dan sesuai dengan artikel yang dibahas.