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.
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
- 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>
.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;}
- 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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</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, sebalikanya previous untuk kembali kehalaman sebelumnya.
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.
ReplyDeleteTerima kasih
kode skrip link nya yang mana gan?
ReplyDeleteSangat membantu
ReplyDeletebagus sih bro, tapi takutnya tambah berat blognya ntar :D Nice info :)
ReplyDelete@Blog Gedek: Yang tepenting gunakan widget yang perlu-perlu saja.. atau juga satu widget untuk beberapa conten..
ReplyDelete