Friday, September 13, 2013

Membuat Navigasi Halaman Blogspot

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.


Membuat Navigasi Halaman Blogspot

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
Membuat Navigasi Halaman Blogspot
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}
4. Cari kode di bawah ini
<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: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</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

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger