Farhan Share - selamat pagi sobat, selamat berakhir pekan. Ya hari ini farhan ingin kembali mengulas tentang tutorial blog, yakni tentang cara memasang nomor halaman di blog navigasi halaman page number di blog, apa sih page number? ya sobat pada template yang standard yang di sediakan oleh blogger di bagian paling bawah blog akan menunjukan "Postingan Baru" dan "Postingan Lama", tapi kebanyakan para blogger mengeluhkan hal itu karena dianggap tampilanya kurang menarik, nah hari ini farhan akan memberikan solusi bagi para blogger yang bingung untuk membuat page number seperti gambar di atas, tentunya dengan navigasi page halaman seperti gambar di atas memudahkan pengunjung untuk mengetahui di page berapa dia berada, dan sebagainya. Baik pastinya sobat sudah tidak sabar kan ingin tahu langkah-langkahnya, baik kita mulai ini dia langkah-langkahnya, di simak ya sobat.
1. Login Ke Blogger.
2. Pilih Template.
3. Download Full Template terlebih dahulu.
4. Pilih Edit HTML.
5. Centang Box "Expand Template Widget".
6. Lalu sobat cari kode ]]></b:skin>, lalu sobat letakkan kode di bawah ini persis 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;
}
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;
}
7. Masih Di dalam Edit HTML, Selanjutnya sobat cari kode </body>, lalu sobat letakkan kode di bawah ini persis 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 -->
<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 -->
8. Klik "Save Template" dan Selesai.
Selamat mencoba sobat farhan, bila ada pertanyaan comment di bawah.
EmoticonEmoticon