Blog Cinangka

Menambahkan Page Navigation 1 2 3 di Blog

Posted by Taufiq Rohman Friday, October 14, 2011
Share this Article on :

page navigasi digunakan untuk berpindah dari halaman satu ke halaman lain.
di blogger, umumnya pake "newer post" dan "older post"
silahkan ikuti langkah dibawah ini:


1. masuk ke akun blogger kamu
2. masuk ke "Rancangan" kemudian pilih "Edit HTML"
3. centang "Expand Template Widget"
4. tekan "f3" untuk membuka tab search
5. cara kode ini ]]></b:skin>
6 letakan kode dibawah 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;
}



7. kemudian cari kode </body>
8. letakkan kode berikut ini tepat di atas kode </body>

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



9. kemudian cari kode berikut 'data:label.url' lalu ganti kode tersebut dengan kode

'data:label.url + &quot;?&amp;max-results=5&quot;'



10. save template

jika langkah tersebut sudah di ikuti dengan benar, tetapi page navigasi tetap tidak muncul, lakukan cara dibawah ini

1. cari kode #blog-pager-newer-link (lihat gambar di bawah)



Perhatikan kode yg saya bold di dalam gambar. masing2 template memiliki kode yg berbeda (tapi gk beda2 amat sih :p)
nah, karena itulah saya hanya menyuruh mencari kode #blog-pager-newer-link bukan kode yg ada di dalam gambar. supaya kalian bisa menemukan kode yg sama maksud tanpa mengalamai masalah
2. Ganti kode dalam gambar yg dibold dengan kode dibawah ini

#blog-pager-newer-link{float:left;line-height:1.8em; font-weight:bold}
#blog-pager-older-link{float:right;line-height:1.8em; font-weight:bold}
#blog-pager{ width:565px; float:left;text-align:center; line-height:1.8em;font-weight:bold; color:white}



3. Save template

Related Post:

Post a Comment