Page Number Navigation With Colour. Bagi sobat-sobat yang suka dengan sedikit tampilan yang keren, nih vikry punya solusinya.
Page Number Navigation With Colour adalah widget yang berguna untuk navigasi ke artikel berikiutnya namun yang ini dalam bentuk nomor serta dengan berbagai warna.
Mau tahu cara membuatnya??
ok simak langkah-langkahnya berikut.
Cara Membuat Page Number Navigation With Colour
1. login
2. buka menu tata letak lalu add gadget (HTML/JavaScript)
3. lalu pilih salah satu dibawah ini sesuai selera sobat (warna)
<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/AVvXsEj7uUJeJLafp_YJUdiwASwbSZI5CiEKuy4km_uh4wiaFgJhUFz7x1hoj391qxJIHd_1fC76e7fylzfog3fGTzeGSNlqgPXfLPiGo8BzaJ-50g_8_FRqOxYGnnfAIwUiDZndNJbfbDjYVzY/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/AVvXsEj7uUJeJLafp_YJUdiwASwbSZI5CiEKuy4km_uh4wiaFgJhUFz7x1hoj391qxJIHd_1fC76e7fylzfog3fGTzeGSNlqgPXfLPiGo8BzaJ-50g_8_FRqOxYGnnfAIwUiDZndNJbfbDjYVzY/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/AVvXsEj7uUJeJLafp_YJUdiwASwbSZI5CiEKuy4km_uh4wiaFgJhUFz7x1hoj391qxJIHd_1fC76e7fylzfog3fGTzeGSNlqgPXfLPiGo8BzaJ-50g_8_FRqOxYGnnfAIwUiDZndNJbfbDjYVzY/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/AVvXsEj7uUJeJLafp_YJUdiwASwbSZI5CiEKuy4km_uh4wiaFgJhUFz7x1hoj391qxJIHd_1fC76e7fylzfog3fGTzeGSNlqgPXfLPiGo8BzaJ-50g_8_FRqOxYGnnfAIwUiDZndNJbfbDjYVzY/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/AVvXsEiEElQapa3egkzn5J-8A6NRMPDIPHuHBoC5SFBDDJG4MSJb6EvSDDe_IlPVO69wBpRsvu2k2uFmZJuip6A-UIWMySjfGl3BPVbbVtNK0nSE8hhH8CRYEJ6az5zqjLxHKovv06qB46x_3pI/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/AVvXsEikLLvJFzVp-N6iz6_KVebeQFLs42UdYZOF6t9PPZ1fYBT1095lnfBn4IcFntrGIgOzL2k_PoA8tur2gKrxHZNeoqILNW_TzOwc2oJ5eAIXWq64Ezm0L1dKIrJliHgC0tSbBin0nlHx7KQ/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/AVvXsEikLLvJFzVp-N6iz6_KVebeQFLs42UdYZOF6t9PPZ1fYBT1095lnfBn4IcFntrGIgOzL2k_PoA8tur2gKrxHZNeoqILNW_TzOwc2oJ5eAIXWq64Ezm0L1dKIrJliHgC0tSbBin0nlHx7KQ/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/AVvXsEikLLvJFzVp-N6iz6_KVebeQFLs42UdYZOF6t9PPZ1fYBT1095lnfBn4IcFntrGIgOzL2k_PoA8tur2gKrxHZNeoqILNW_TzOwc2oJ5eAIXWq64Ezm0L1dKIrJliHgC0tSbBin0nlHx7KQ/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/AVvXsEikLLvJFzVp-N6iz6_KVebeQFLs42UdYZOF6t9PPZ1fYBT1095lnfBn4IcFntrGIgOzL2k_PoA8tur2gKrxHZNeoqILNW_TzOwc2oJ5eAIXWq64Ezm0L1dKIrJliHgC0tSbBin0nlHx7KQ/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/AVvXsEiEElQapa3egkzn5J-8A6NRMPDIPHuHBoC5SFBDDJG4MSJb6EvSDDe_IlPVO69wBpRsvu2k2uFmZJuip6A-UIWMySjfGl3BPVbbVtNK0nSE8hhH8CRYEJ6az5zqjLxHKovv06qB46x_3pI/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/AVvXsEivbMVGhx400AiQR8yegH9-suPHTYKwd-hvwwVtjXctvxlaV-diTsSzuLqvNDLfxy-SO0r7Vr3uwxQRyy6I_yg74-1p9Mt1ly-xgRRL5yZKpImFlCTMEb7YxyMjsRg9q9VliPSl9XXjP9k/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/AVvXsEivbMVGhx400AiQR8yegH9-suPHTYKwd-hvwwVtjXctvxlaV-diTsSzuLqvNDLfxy-SO0r7Vr3uwxQRyy6I_yg74-1p9Mt1ly-xgRRL5yZKpImFlCTMEb7YxyMjsRg9q9VliPSl9XXjP9k/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/AVvXsEivbMVGhx400AiQR8yegH9-suPHTYKwd-hvwwVtjXctvxlaV-diTsSzuLqvNDLfxy-SO0r7Vr3uwxQRyy6I_yg74-1p9Mt1ly-xgRRL5yZKpImFlCTMEb7YxyMjsRg9q9VliPSl9XXjP9k/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/AVvXsEivbMVGhx400AiQR8yegH9-suPHTYKwd-hvwwVtjXctvxlaV-diTsSzuLqvNDLfxy-SO0r7Vr3uwxQRyy6I_yg74-1p9Mt1ly-xgRRL5yZKpImFlCTMEb7YxyMjsRg9q9VliPSl9XXjP9k/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/AVvXsEiEElQapa3egkzn5J-8A6NRMPDIPHuHBoC5SFBDDJG4MSJb6EvSDDe_IlPVO69wBpRsvu2k2uFmZJuip6A-UIWMySjfGl3BPVbbVtNK0nSE8hhH8CRYEJ6az5zqjLxHKovv06qB46x_3pI/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>
4. simpan.
Editor : Ananda Donie
Animasi|Artikel|Unik dan Menarik|Auto Text BB|Blog Code|Blog Info|Blog Tool|Cerita Rakyat|Cinema|
Download|P Ramlee|Mutiara Bijak|HJ-Split|Pendidikan|PTC|Sejarah|SEO|Kesehatan|Tutorial|
Idul Adha|Update Via App|Widget|Cerpen|News
Download|P Ramlee|Mutiara Bijak|HJ-Split|Pendidikan|PTC|Sejarah|SEO|Kesehatan|Tutorial|
Idul Adha|Update Via App|Widget|Cerpen|News
Copyright © 2012 by Ananda Donie. All rights reserved
"
"
"
Tidak ada komentar :
Posting Komentar
Accept criticism and suggestions from friends for the perfection of this Blog.
Hopefully this article useful,
Thank you :)