Aneka Cara Membuat Widget Halaman Navigasi Menarik untuk Blogger

Aneka Widget Halaman Navigasi Menarik untuk Blogger - Halaman navigasi atau page navigation adalah deretan angka yang menunjukkan nomor halaman pada sebuah web atau blog. Halaman navigasi ini sangat penting bagi visitor. Mereka akan lebih mudah mencari postingan yang dicari dengan mengklik tombol angka navigasi. Selain itu, halaman navigasi ini berguna untuk melihat 2, 3, hingga terakhir halaman tanpa harus melewati halaman selanjutnya. Seperti yang terlihat pada default template bawaan blogger yang membuat halaman navigasinya berupa old posts dan newest posts.

Aneka cara membuat widget halaman navigasi

Sekarang saya akan bagikan kepada sahabat blogging semua, bagaimana membuat aneka widget halaman navigasi yang menarik. Cara ini sangat mudah, karena hanya meletakkan kode script pada gadget layout, tanpa harus utak-atik HTML template. Berikut caranya.

1. Masuk akun blogger.

2. Menuju ke menu layout. Pilik Add a new gadget. Klik HTML/Java script.

3. Letakkan kode-kode berikut pada area HTML. Silakan memilih widget yang disukai atau menyesuaikan dengan desain dan tampilan blog.

<style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx-vFZMxIdI5Fsjqdbv-1hd3M3_Ph-Tmpl-3Zc4Lx6focO-F6ZxPxcJKrdYXizwQrDx9sbhY85yJ8U4_KA3MEZnutsosbTO51Pc8TRxpXtm05RiW8Pdul-QQzwlrD1ry8VxVHGzd953Wk/s1600/wp1.jpg) 0 -50px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx-vFZMxIdI5Fsjqdbv-1hd3M3_Ph-Tmpl-3Zc4Lx6focO-F6ZxPxcJKrdYXizwQrDx9sbhY85yJ8U4_KA3MEZnutsosbTO51Pc8TRxpXtm05RiW8Pdul-QQzwlrD1ry8VxVHGzd953Wk/s1600/wp1.jpg) 0 -25px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx-vFZMxIdI5Fsjqdbv-1hd3M3_Ph-Tmpl-3Zc4Lx6focO-F6ZxPxcJKrdYXizwQrDx9sbhY85yJ8U4_KA3MEZnutsosbTO51Pc8TRxpXtm05RiW8Pdul-QQzwlrD1ry8VxVHGzd953Wk/s1600/wp1.jpg) 0 0 repeat-x;text-decoration:none} </style><a href="http://bloging-gampang.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://bloging-gampang.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://bloging-gampang.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 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='https://dl.dropboxusercontent.com/s/icju1ieawjolg4n/theblogger911.navi.js'></script>

<style type="text/css"> #blog-pager{padding:5px 0 !important;} .showpageArea {font-weight: bold;margin:5px;}/* theblogger911.blogspot.com */ .showpageArea a {text-decoration:underline;color: #fff;}/* theblogger911.blogspot.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: #9dd53a; background: -moz-linear-gradientundefinedtop, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0%,#9dd53a), color-stopundefined50%,#a1d54f), color-stopundefined51%,#80c217), color-stopundefined100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradientundefined startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* theblogger911.blogspot.com */ .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradientundefinedtop, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); background: -webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0%,#6db3f2), color-stopundefined50%,#54a3ee), color-stopundefined51%,#3690f0), color-stopundefined100%,#1e69de)); filter: progid:DXImageTransform.Microsoft.gradientundefined startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } /* theblogger911.blogspot.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-gradientundefinedtop, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0%,#e2e2e2), color-stopundefined50%,#dbdbdb), color-stopundefined51%,#d1d1d1), color-stopundefined100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradientundefined startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* theblogger911.blogspot.com */ .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* theblogger911.blogspot.com */ .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* theblogger911.blogspot.com */</style> <a href="http://bloging-gampang.blogspot.com/" target="_blank" title="Tutorial Blogging"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://bloging-gampang.blogspot.com/" target="_blank" title="Tutorial Blogging"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://bloging-gampang.blogspot.com/" target="_blank" title="Tutorial Blogging"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><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='https://dl.dropboxusercontent.com/s/icju1ieawjolg4n/theblogger911.navi.js' type='text/javascript'></script>

<style type="text/css"> #blog-pager{padding:5px 0 !important;} .showpageArea {font-weight: bold;margin:5px;}/* http://theblogger911.blogspot.com */ .showpageArea a {text-decoration:underline;color: #fff;}/* http://theblogger911.blogspot.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: #789EB1; background: -moz-linear-gradientundefinedtop, #789EB1 0%, #618FA7 100%); background: -webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0%,#789EB1), color-stopundefined100%,#618FA7)); filter: progid:DXImageTransform.Microsoft.gradientundefined startColorstr='#789EB1', endColorstr='#618FA7',GradientType=0 ); }/* http://theblogger911.blogspot.com */ .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;background: #7d7e7d; background: -moz-linear-gradientundefinedtop, #7d7e7d 0%, #6B6B6B 100%); background: -webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0%,#7d7e7d), color-stopundefined100%,#6B6B6B)); filter: progid:DXImageTransform.Microsoft.gradientundefined startColorstr='#7d7e7d', endColorstr='#6B6B6B',GradientType=0 ); }/* http://theblogger911.blogspot.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-gradientundefinedtop, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0%,#e2e2e2), color-stopundefined50%,#dbdbdb), color-stopundefined51%,#d1d1d1), color-stopundefined100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradientundefined startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* http://theblogger911.blogspot.com */ .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* http://theblogger911.blogspot.com */ .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* http://theblogger911.blogspot.com */</style> <a href="http://bloging-gampang.blogspot.com/" target="_blank" title="Tutorial Blogging"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://bloging-gampang.blogspot.com/" target="_blank" title="Tutorial Blogging"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://bloging-gampang.blogspot.com/" target="_blank" title="Tutorial Blogging"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><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='https://dl.dropboxusercontent.com/s/icju1ieawjolg4n/theblogger911.navi.js' type='text/javascript'></script>

<style type="text/css">#blog-pager{clear:both;margin:20px 0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float: left;}#blog-pager-older-link{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em 0;}.profile-textblock{line-height:1.6em;margin:0.5em 0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px 0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghwmnD99-OEP8OBZd1HAR371jL5gpfWCr1FGLYAgmKAAPy1WaXBfoPOQVubc0KQh13Nd4KosKMg0dzqn2Y_tsIOoyX3x2ktejYWTXGkoImpYr8VdrBr4umYAL5ALt_GOFOSW2GmHB2DTg/s1600/nav.jpg) repeat-x;border:1px solid #ae4402;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpageOf,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYr0_dg0e4fB-frnP_FkpPjMAJESp_FspWe2c5mQkeF9wa3IqSc07TTClomZiMISfFvxazxylkcc9ddb8k0S_e9B5tDGJcgcGa5vofQ_28Sp1H6HCJWeFjo_BuQWVD7TlVBX5_l_OYsfE/s1600/nava.jpg) repeat-x;border:1px solid #000000;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;} </style> <a href="http://bloging-gampang.blogspot.com/" target="_blank" title="Tutorial Blogging"><img src="https://bitly.com/24workpng1" alt="Tutorial Blogging" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://bloging-gampang.blogspot.com/" target="_blank" title="Tutorial Blogging"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://bloging-gampang.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 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='https://dl.dropboxusercontent.com/s/icju1ieawjolg4n/theblogger911.navi.js'></script>

<style type="text/css">#blog-pager{height: 28px; padding: 10px 0 0; overflow:hidden; text-align:center; }.showpageArea a {text-decoration:underline; font-size: 16px; text-align: center;}.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}.showpage a:hover {text-decoration:none;background: #cccccc;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;} </style> <a href="http://bloging-gampang.blogspot.com/" target="_blank" title="Tutorial Blogging"><img src="https://bitly.com/24workpng1" alt="Tutorial Blogging" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://bloging-gampang.blogspot.com/" target="_blank" title="Tutorial Blogging"><img src="https://bitly.com/24workpng1" alt="Tutorial Blogging" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://bloging-gampang.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 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='https://dl.dropboxusercontent.com/s/icju1ieawjolg4n/theblogger911.navi.js'></script>
Akhiri dengan Save pada kode HTML yang dipilih. Lalu lihat hasilnya. Sedangkan untuk menambahkan widget penjaring visitor, sahabat bisa menyimak caranya pada artikel Aneka Macam Cara Membuat Widget Subscribe.

Demikian beberapa widget halaman navigasi yang bisa digunakan untuk blogger. Semoga bermanfaat dan selamat mencoba.