Cara Membuat Tombol Navigas

Cara Membuat Tombol Navigasi Dengan Nomor 1 2 3 … Di Halaman Blog

Ngrumpi lagi dengan tutor26 disini yang akan mengulas Cara Membuat Tombol Navigasi Dengan Nomor 1 2 3 … Di Halaman Blog.

Memang cara ini sudah banyak sekali yang membahas, tapi tidak apa-apa saya bahas lagi untuk pengunjung setia blog ini. Navigasi halaman ini saya padukan dengan sedikit sentuhan css3 gradient, border radius, dan text shadow. Bagi kalian yang sudah terbiasa dengan kode css, silahkan di modifikasi agar jadi lebih menarik sesuai template.

Oke langsung saja dengan menambahkan kode css berikut DI ATAS ]]></b:skin>

.showpageArea a{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;text-decoration:none}

.showpageNum a{font-weight:bold;color:#0000FF;padding:1px 8px; margin:0 0px;text-shadow:0px 2px 4px #666;border:1px solid #fff;background:#fff;}

.showpageNum a:hover{color:#fff;background: #0000FF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#0000FF’);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#0000FF));
background: -moz-linear-gradient(top, #fff, #0000FF);text-shadow:0px 2px 2px #00a;border:1px solid #ddd;}

.showpagePoint{color:#fff; text-shadow:0px 2px 2px #00a; padding:1px 8px; margin:2px; font-weight:bold;border:1px solid #ddd;background: #0000FF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#0000FF’);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#0000FF));
background: -moz-linear-gradient(top, #fff, #0000FF);border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}

.totalpages{margin:0 8px 0 0;color:#444;background:#fff;padding:1px 10px;border:1px solid #ddd;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}

.showpage a{padding:1px 8px; margin:0 2px;border:1px solid #ddd;background: #0000FF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#0000FF’);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#0000FF));
background: -moz-linear-gradient(top, #fff, #0000FF);;color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}

.showpage a:hover{background: #0000FF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#0000FF’);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#0000FF));
background: -moz-linear-gradient(top, #fff, #0000FF);color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}
#showlastpage a{font-weight:bold}
Setelah itu tambahkan script berikut DI ATAS tag </body>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<script type=’text/javascript’>
var pageCount=8;
var displayPageNum=8;
var upPageWord =’Kembali ◄’;
var downPageWord =’Berikutnya ►’
</script>
<script src=’http://pphoo-file.googlecode.com/files/pagenav.js.txt&#8217; type=’text/javascript’/>
</b:if>
Dan terakhir save template dan lihat hasilnya. Bagaimana, mudah kan? Kalau ada yang kesulitan, silahkan bertanya di kotak komentar di bawah.

Semoga bermanfaat.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s