Membuat Navigasi Halaman Blogspot. Banyak cara kita lakukan untuk memudahkan visitor untuk mengakses halaman demi halaman dari webiste atau blog kita. Memberikan bradcrumbs dan navigasi adalah salah satu cara yang bisa kita lakukan, oleh sebab itu pada hari ini saya akan mencoba untuk mengajarkan cara yang paling mudah untuk membuat tombol navigasi halaman.
Gambar di atas adalah contoh Navigasi Halaman yang akan kita buat, sebelumnya lakukan backup template blog atau website anda.
Note: Mohon backup template blog anda sebelum menambahkan navigasi halaman ke blog anda.
Langkah - langkah Membuat Navigasi Halaman Blogspot :
1. Login ke blogger.com, Masuk ke Dashboard > Template > Edit HTML
2. Cari kode di bawah ini
]]></b:skin>
3. Tambahkan kode dibawah ini tepat di atas nya.
.pagenavi{
clear:both;
margin:10px auto;
text-align:center;
border-bottom: 1px solid #DFDFDF;
padding-bottom: 10px;
}
.pagenavi span,.pagenavi a{
padding:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
background:#FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.pagenavi a:hover,.pagenavi .current{
background:#48d;color:#fff;text-decoration:none
}
.pagenavi .pages,.pagenavi .current{
font-weight:bold
}
.pagenavi .pages{border:none}
clear:both;
margin:10px auto;
text-align:center;
border-bottom: 1px solid #DFDFDF;
padding-bottom: 10px;
}
.pagenavi span,.pagenavi a{
padding:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
background:#FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.pagenavi a:hover,.pagenavi .current{
background:#48d;color:#fff;text-decoration:none
}
.pagenavi .pages,.pagenavi .current{
font-weight:bold
}
.pagenavi .pages{border:none}
<b:includable id='post' var='post'>
5. Tambahkan kode di bawah, tepat diatas nya.
<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 7,
firstText: "First",
lastText: "Last",
nextText: "»",
prevText: "«" }
</script>
<script src='https://droidvan.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 7,
firstText: "First",
lastText: "Last",
nextText: "»",
prevText: "«" }
</script>
<script src='https://droidvan.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>
6. Anda bisa mengatur sendiri berapa hanya artikel yang ingin di muncul, dengan mengatur variable perPage, untuk panjang angka yang akan di tampilkan bisa di atur dengan merubah variable numPages
7. Click Save....
Selamat Mencoba
0 comments:
Post a Comment