CARA MEMBUAT TOMBOL NAVIGASI HALAMAN

Blog BLOGGER ANTI KEKERASAN kali ini akan membahas tips-trik tentang Cara membuat tombol Navigasi Halaman (next page). Menurut BLOGGER ANTI KEKERASAN, tombol navigasi halaman ini cukup penting utamanya dalam rangka menambah performa blog agar dapat tampil lebih maksimal alias lebih profesional.

Berikut ini cara membuatnya  :

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

.showpageArea{padding:10px;background:#fff}

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

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

.showpageNum a:hover{color:#fff;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);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: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);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: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);;color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}

.showpage a:hover{background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);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=5;
var displayPageNum=5;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script src='http://belajarblogging.googlecode.com/files/pagenav.js' 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.

Demikianlah Cara membuat tombol Navigasi Halaman, semoga bermanfaat.

Sumber tulisan : http://sutry95.blogspot.com/2011/08/cara-membuat-tombol-navigasi-next-page.html

Posted in: tips-trik