Cara Mengganti navigasi Home, Previous Dan Next Page menjadi Angka


Mungkin sobat sudah bosan melihat Navigasi Home, Previous dan Next bawaan template.
dan untuk itu saya akan membagi 3 model bentuk Navigasi angka editan saya.

Tutorial I :


Pada Dashboard, Pilih Template
Klik Edit HTML
Cari Kode ]]></b:skin>
Copy paste script dibawah ini dan letakkan tepat di atas kode ]]></b:skin> tersebut
  • Script untuk Navigasi berwarna merah
.showpageArea{float:center; color:#FF0000; font-size:12px; text-shadow:0 1px 1px black; margin:10px 0}
.showpageArea:hover{float:center; color:#FF0000; font-size:12px; text-shadow:0 1px 1px black; margin:10px 0}
.showpageArea a{color:white}
.showpageNum a:hover,.showpage:hover{background:white; border:1px solid #FF0000;color:#FF0000!important}
.showpage{margin:0}
.showpage:hover a{color:#FF0000!important}
.showpagePoint{background:white; border:1px solid #e8e8e8; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpagePoint:hover{background:white; border:1px solid #FF0000; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpageNum a,.showpageOf,.showpage{border:1px solid #e8e8e8; border-radius:5px; color: white; text-shadow:0 1px 1px black; background:#FF0000; margin:0 2px 0 0; padding:5px 12px}
  •  Script untuk Navigasi berwarna Ungu
.showpageArea{float:center; color:#7B00FF; font-size:12px; text-shadow:0 1px 1px black; margin:10px 0}
.showpageArea:hover{float:center; color:#7B00FF; font-size:12px; text-shadow:0 1px 1px black; margin:10px 0}
.showpageArea a{color:white}
.showpageNum a:hover,.showpage:hover{background:white; border:1px solid #7B00FF;color:#7B00FF!important}
.showpage{margin:0}
.showpage:hover a{color:#7B00FF!important}
.showpagePoint{background:white; border:1px solid #e8e8e8; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpagePoint:hover{background:white; border:1px solid #7B00FF; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpageNum a,.showpageOf,.showpage{border:1px solid #e8e8e8; border-radius:5px; color: white; text-shadow:0 1px 1px black; background:#7B00FF; margin:0 2px 0 0; padding:5px 12px}
  •  Script untuk Navigasi berwarna Biru
.showpageArea{float:center; color:#0022FF; font-size:12px; text-shadow:0 1px 1px #000000; margin:10px 0}
.showpageArea:hover{float:center; color:#0022FF; font-size:12px; text-shadow:0 1px 1px #000000; margin:10px 0}
.showpageArea a{color:#FFFFFF}
.showpageNum a:hover,.showpage:hover{background:#FFFFFF; border:1px solid #0022FF;color:#0022FF!important}
.showpage{margin:0}
.showpage:hover a{color:#0022FF!important}
.showpagePoint{background:#FFFFFF; border:1px solid #e8e8e8; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpagePoint:hover{background:#FFFFFF; border:1px solid #0022FF; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpageNum a,.showpageOf,.showpage{border:1px solid #e8e8e8; border-radius:5px; color: #FFFFFF; text-shadow:0 1px 1px #000000; background:#0022FF; margin:0 2px 0 0; padding:5px 12px}

Tutorial II :

Masih Pada menu edit HTML tadi
Cari kode </body>
Copy Paste kode script dibawah ini dan letakkan tepat diatas kode </body>
<!-- Start PageNavi by Dido Borneo -->
<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord='Prev';
var downPageWord='Next';
</script>
<script type="text/javascript" src="https://sites.google.com/site/didopalangkaraya/project/PageNavi3.js"></script>
<!-- End PageNavi by Dido Borneo -->

Silahkan sobat ganti kata-kata Prev dan Next diatas apabila sobat ingin berkreasi

"Semoga Bermamfaat"



Comments
0 Comments