Jumat, 20 Juli 2012
Cara membuat tombol navigasi next page nomor
Hari ini saya akan postingkan tips untuk membuat next page dengan "nomor". Memang cara seprti ini memng sudah bnayak di jelaskan di berbagai macam blog, Tapi setelah membaca refrensi dari berbagai sumber saya akan mempostingkan cara yang sangat sederhana dan mudah dipahami. Oke langsung saja :
- Pertama login terlebih dahulu ke blog anda.
- Pilih rancangan , kemudian plih templete dan edit HTML
- Centang expand widget
- Kemudian cari code ]]></b:skin> (Tekan Ctrl+f agar lebih gampang)
- Lalu letakkan code berikut tepat diatasnya .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;Setelah itu
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 cari code </body> dan letakkan script berikut tepat di atasnya<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='◄';
var downPageWord ='►';
</script>
<script src='http://belajarblogging.googlecode.com/files/pagenav.js' type='text/javascript'/>
</b:if> - Kemudian sve templete
Gimana mudah kan??? silahkan isa di coba.... jika terdapat kesulitan bisa coment di kota komentar di bawah .
Sekian postingan kali ini dari saya.... SEMOGA BERMANFAAT
