Hai..sob...kali ini saya akan membahas mengenai "Cara Membuat Page Number Navigation With Colour", pasti di sobat semua udah penah kan lihat Page Number, Klo tidak pernah lihat, lihat aja gambar di bawah ini, Page Number ini sering di gunakan untuk melihat postingan selanjutnya dan menjadikan blog kita tampil elegan, nah gimana sobat sudah tau kan..apa sobat berminat untuk memasangnya di blog sobat,..?
Nieh ane kasi caranya..!!!
- Login ke Blogger
- Pergi ke Tata Letak >> Tambah Gatget >> HTML/Java Script
- Pilihlah slah satu dariu model Page Number berikut.
<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTPPrVOPkLhj2oIbmxL-iSZtHXRwyOEvJ1cdqbBGiaj53pd-6DIoQsp84jZOpcy80ds2L16pSKSUgL_E2qlbzN9m9g-ogzAD7KgPPjf8Im6M5nPlhcT2vRt8gk142sSlUI2VKrjQgPooM/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
margin:0px 1px 0 1px;padding:3px 10px;color:#EEEEEE;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTPPrVOPkLhj2oIbmxL-iSZtHXRwyOEvJ1cdqbBGiaj53pd-6DIoQsp84jZOpcy80ds2L16pSKSUgL_E2qlbzN9m9g-ogzAD7KgPPjf8Im6M5nPlhcT2vRt8gk142sSlUI2VKrjQgPooM/s1600/yellow-butt.png) repeat-x;background-position:-10px -43px;
border:1px solid #FB5106;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTPPrVOPkLhj2oIbmxL-iSZtHXRwyOEvJ1cdqbBGiaj53pd-6DIoQsp84jZOpcy80ds2L16pSKSUgL_E2qlbzN9m9g-ogzAD7KgPPjf8Im6M5nPlhcT2vRt8gk142sSlUI2VKrjQgPooM/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-height:30px;padding:3px 10px;color:#ffffff;}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTPPrVOPkLhj2oIbmxL-iSZtHXRwyOEvJ1cdqbBGiaj53pd-6DIoQsp84jZOpcy80ds2L16pSKSUgL_E2qlbzN9m9g-ogzAD7KgPPjf8Im6M5nPlhcT2vRt8gk142sSlUI2VKrjQgPooM/s1600/yellow-butt.png) repeat-x;background-position:-55px -43px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:1px solid #FB5106;-webkit-border-radius:7px; -moz-border-radius:7px;border-radius:7px;color:#FFFFFF;text-decoration:underline;font-weight:bold;} </style>
<a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqNHQZfH7RE-huEcHesKXbS6tj1tCK27Z_fw8aPvgtLq5L7vRIx7e9QEkYJGSq9f46WCPl23vwotfdsqAIeijNnUud8-CpBzOGu7Xn-19WMADo2HzFKUoB9VMNJ1L65fii0eueU4TFCrA/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script> <script style='text/javascript' src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>
<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpWtl-P2XIwMrECNsQqekZUirzBiJf0e2WME5I-oa8bEk62phpm3bAp9dJu4zC8ske4mxKqeg2i72zMaRc4FO4qUnVxcc5gRsN5ae4z79r33ZkV6KTgYmSTgcls8E7A_fYW2Ker8XFp3Y/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;margin:0px 1px 0 1px;padding:3px 10px;color:#EEE;line-height:30px;cursor:pointer;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpWtl-P2XIwMrECNsQqekZUirzBiJf0e2WME5I-oa8bEk62phpm3bAp9dJu4zC8ske4mxKqeg2i72zMaRc4FO4qUnVxcc5gRsN5ae4z79r33ZkV6KTgYmSTgcls8E7A_fYW2Ker8XFp3Y/s1600/greendiamond.png) repeat-x;background-position:0px -30px;
border:2px solid #006666;-webkit-border-radius:20px;
-moz-border-radius:20px;border-radius:20px;color:#FFF;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpWtl-P2XIwMrECNsQqekZUirzBiJf0e2WME5I-oa8bEk62phpm3bAp9dJu4zC8ske4mxKqeg2i72zMaRc4FO4qUnVxcc5gRsN5ae4z79r33ZkV6KTgYmSTgcls8E7A_fYW2Ker8XFp3Y/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;line-height:30px;padding:3px 10px;color:#EEE;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpWtl-P2XIwMrECNsQqekZUirzBiJf0e2WME5I-oa8bEk62phpm3bAp9dJu4zC8ske4mxKqeg2i72zMaRc4FO4qUnVxcc5gRsN5ae4z79r33ZkV6KTgYmSTgcls8E7A_fYW2Ker8XFp3Y/s1600/greendiamond.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #007777;-webkit-border-radius:20px; -moz-border-radius:20px;border-radius:20px;color:#EEE;text-decoration:underline;font-weight:bold;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);} </style>
<a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqNHQZfH7RE-huEcHesKXbS6tj1tCK27Z_fw8aPvgtLq5L7vRIx7e9QEkYJGSq9f46WCPl23vwotfdsqAIeijNnUud8-CpBzOGu7Xn-19WMADo2HzFKUoB9VMNJ1L65fii0eueU4TFCrA/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>
<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR4t0dZKHSGcozxdlGWIAnVSdKt3MnNc_mjzpOyRG8amubCKFrkIAY7VWd5mFhytv3MYnYI0V0eT7uSRUToPDpeU2YCb-BQPZgYyM5qpnqDuxxKvbBwYoey8ikgXGniK7_QIV_aIyW88I/s1600/darkblue.png) repeat-x;border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;margin:0px 1px 0 1px;padding:3px 10px;color:#FFF;line-height:30px;cursor:pointer;white-space:nowrap;}.showpageNum a:hover,.showpage a:hover {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR4t0dZKHSGcozxdlGWIAnVSdKt3MnNc_mjzpOyRG8amubCKFrkIAY7VWd5mFhytv3MYnYI0V0eT7uSRUToPDpeU2YCb-BQPZgYyM5qpnqDuxxKvbBwYoey8ikgXGniK7_QIV_aIyW88I/s1600/darkblue.png) repeat-x;border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:none;}.showpageOf{margin:0 8px 0 0;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR4t0dZKHSGcozxdlGWIAnVSdKt3MnNc_mjzpOyRG8amubCKFrkIAY7VWd5mFhytv3MYnYI0V0eT7uSRUToPDpeU2YCb-BQPZgYyM5qpnqDuxxKvbBwYoey8ikgXGniK7_QIV_aIyW88I/s1600/darkblue.png) repeat-x;border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-height:30px;padding:3px 10px;color:#FFF;}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR4t0dZKHSGcozxdlGWIAnVSdKt3MnNc_mjzpOyRG8amubCKFrkIAY7VWd5mFhytv3MYnYI0V0eT7uSRUToPDpeU2YCb-BQPZgYyM5qpnqDuxxKvbBwYoey8ikgXGniK7_QIV_aIyW88I/s1600/darkblue.png) repeat-x;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #5C8CFF;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:underline;font-weight:bold;} </style><a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqNHQZfH7RE-huEcHesKXbS6tj1tCK27Z_fw8aPvgtLq5L7vRIx7e9QEkYJGSq9f46WCPl23vwotfdsqAIeijNnUud8-CpBzOGu7Xn-19WMADo2HzFKUoB9VMNJ1L65fii0eueU4TFCrA/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><script style='text/javascript'>var postperpage=5;var numshowpage=3;var upPageWord="Prev";var downPageWord="Next";var home_page="/";var urlactivepage=location.href;</script><script style='text/javascript' src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>
Selamat Mencoba, Semoga sukses....!!!
This comment has been removed by the author.
ReplyDeleteternyata udah bisa bang, izin pakee gan...terima kasih
ReplyDeleteOke...sipp,,langsung sedott...
Deletekeren mas
ReplyDeletemas? gmana ya cara membuat artikel terkait kayak punya mas tuu.
trus cara membuat border dari html, kayak punya mas tu lagii
Sma2 mas,
Deleteitu sudah bawaan dari blogger dan template sendri, masing template mgkin berbeda warna dan bentuk, namun pada intinya sama...nama fitur itu adalah " Blockquote ". mgkin belum saya posting, coba search saja digoogle ya,,