Log in ke blog anda
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Kemudian masukkan salah satu script di bawah ini
Navigasi Orange Juice Style
<style type="text/css">Contohnya seperti gambar di bawah ini
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.bloggertricksandtoolz.com*/
.showpageArea a {text-decoration:underline;color: #fff;}/* www.bloggertricksandtoolz.com*/
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #ffb76b; background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); }/* www.bloggertricksandtoolz.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* www.bloggertricksandtoolz.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.bloggertricksandtoolz.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.bloggertricksandtoolz.com*/
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.bloggertricksandtoolz.com*/
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggertrickandtoolz.googlecode.com/files/www.bloggertricksandtoolz.com-bloggerpagenavi.js' type='text/javascript'></script>
Navigasi Chunky Style
<style type='text/css'>Contohnya seperti gambar di bawah ini
#top_navigation{background:transparent; width:800px; height:77px; list-style:none; margin-top:7px; margin-bottom:11px; width:100%}
ul.nav{background:transparent; width:800px; height:57px; line-height:31px; list-style:none; padding:0 10px; font-size:14px}
ul.nav li{display:inline; padding:0; background:transparent}
ul.nav a{background:transparent; height:30px; font-size:16px; color:#808080; float:left; padding:11px 19px 11px 16px; text-decoration:none; border-top:1px solid #252525; border-bottom:4px solid #252525; border-left:1px solid transparent; border-right:1px solid transparent; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px}
ul.nav a:hover{background:#252525; border-top:1px solid #252525; border-bottom:4px solid #000; border-left:1px solid #252525; border-right:1px solid #252525; color:#FFF; padding:11px 19px 11px 16px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px}
</style>
Navigasi Blue Style
<style type="text/css">Contohnya seperti gambar di bawah ini
#blog-pager{padding:5px 0 !important}
.showpageArea{font-weight:bold; margin:5px}
.showpageArea a{text-decoration:underline; color:#fff}
.showpageNum a, .showpage a{color:#fff; text-decoration:none; border:1px solid #999; -webkit-border-radius:3px; -moz-border-radius:3px; margin:0 3px; padding:3px 5px; background:#3b679e; background:-moz-linear-gradient(top,#3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3b679e),color-stop(50%,#2b88d9),color-stop(51%,#207cca), color-stop(100%,#7db9e8)); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e',endColorstr='#7db9e8',GradientType=0 )}
.showpageNum a:hover, .showpage a:hover{border:1px solid #ccc; background:#aebcbf; background:-moz-linear-gradient(top,#aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#aebcbf),color-stop(50%,#6e7774),color-stop(51%,#0a0e0a),color-stop(100%,#0a0809)); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf',endColorstr='#0a0809',GradientType=0 )}
.showpagePoint{color:#aaa; text-decoration:none; border:1px solid #999; -webkit-border-radius:3px; -moz-border-radius:3px; margin:0 3px; padding:3px 5px; background:#e2e2e2; background:-moz-linear-gradient(top,#e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e2e2e2),color-stop(50%,#dbdbdb),color-stop(51%,#d1d1d1),color-stop(100%,#fefefe)); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',endColorstr='#fefefe',GradientType=0 )}
.showpageOf{text-decoration:none; padding:3px; margin:0 3px 0 0}
.showpageNum a:link, .showpage a:link{text-decoration:none; color:#fff}
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/blogonol-pagenavigation.js' type='text/javascript'></script>
Selanjutnya klik Simpan dan tempatkan di bawah posting area anda
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu
Special Thank to blogger tricks and toolz for the script
"keep blogging smiley"
sib mantab ane pake yang ini...hasilnya yahud bro. makasih sekali lagi. nice posting