Tutorial : Tambah Widget "Numbered Page Navigation" Pada Blog Blogspot

Tweet

Contoh "Numbered Page Navigation" yang digunakan pada blog ini

Sebelum bercerita tentang "Numbered Page Navigation" untuk blog (khususnya blogspot), adalah lebih baik kita fahami apakah maksud "Page Navigation" itu sendiri. "Page Navigation" atau "Navigasi Halaman" bermaksud: "A navigation page is a special type of page that can be added to other pages to provide a consistent set of navigational elements. A typical navigation page might contain a logo, the page title, a login link, and a link to the home page." (Navigasi halaman ialah sejenis halaman khas yang boleh ditambah ke laman-laman lain untuk menyediakan satu set elemen navigasi yang konsisten. Navigasi halaman yang biasa mungkin mengandungi logo, tajuk halaman, link login, dan link ke halaman rumah. (Sumber: http://www.istc.org)). 

Secara amnya, "Page Navigation" bagi blog (khususnya, blogspot), biasanya terletak di bahagian bawah setiap post (dekat ruang komen), dan juga laman utama (home). Kebiasaannya, terdapat 3 label button "Page Navigation" sahaja yang digunakan, iaitu:

• Home (Laman Utama)
• Newer Post (Catatan Terbaru)
• Older Post (Catatan Lama)

Page Navigation yang standard dalam blog Blogger.com (*.blogspot.com) 

Berbeza dengan blog wordpress self-hosted dan sesetengah website biasa, "Page Navigation" yang digunakan adalah jenis bernombor. Bezanya, jenis ini yang lebih dikenali sebagai "Numbered Page Navigation", cuma terdapat di bahagian bawah laman utama (home) bagi blog WP dan website sahaja (bergantung pada template blog dan website itu sendiri). Sebaliknya, di bahagian bawah ruang komen setiap post (blog dan website), ia juga menggunakan format "Page Navigation" biasa, seperti label "Home", "Older Post" dan "Newer Post", sama macam blogspot, ataupun lebih cantik lagi, menggunakan ikon rumah bagi "Home" dan arrow bagi "Newer Post / Older Post".

Jadi, korang tentunya jeles bila tengok Numbered Page Navigation yang cute ini, ada pada blog ini, kan? Hehehe... Tapi korang jangan risau, korang akan dapat jugak Numbered Page Navigation yang aku pakai ni, dalam bentuk widget untuk korang bubuh kat blog korang sendiri,.... Senang sangat,....so, korang cuma ikuti cara-cara nak membuatnya....

Macam mana caranya?

Mula-mula, korang login akaun blogger.com korang sendiri.

Seterusnya: Dashboard > Klik Nama Blog > Layout > Add a Gadget > Pilih "HTML/Javascript"

Copy kod HTML di bawah ini.


Oren

<style type="text/css"><br /> #blog-pager{padding:5px 0 !important;}<br /> .showpageArea {font-weight: bold;margin:5px;}/* www.bloggertricksandtoolz.com*/<br /> .showpageArea a {text-decoration:underline;color: #fff;}/* www.bloggertricksandtoolz.com*/<br /> .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 */<br /> .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 */<br /> .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 */<br /> .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.bloggertricksandtoolz.com*/<br /> .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.bloggertricksandtoolz.com*/<br /> </style><br /> <script type='text/javascript'><br /> var home_page="/";<br /> var urlactivepage=location.href;<br /> var postperpage=6;<br /> var numshowpage=3;<br /> var upPageWord ='Previous';<br /> var downPageWord ='Next';<br /> </script><br /> <script src='http://bloggertrickandtoolz.googlecode.com/files/www.bloggertricksandtoolz.com-bloggerpagenavi.js' type='text/javascript'></script>

Kemudian, perhatikan 2 kod ini:

var postperpage=6;
var numshowpage=3;

- Kod var postperpage=6; ialah jumlah post yang terpapar pada setiap page (Home). Contohnya, nombor 6 yang ditunjukkan pada kod tersebut, bermaksud 6 post disetkan secara tetap pada setiap page, sama ada page 1, page 2 dan seterusnya.  

- Kod var numshowpage=3; ialah jumlah kotak bernombor (1 kotak bernombor = 1 page) yang terpapar di page Home sahaja. Nombor 3 yang ditunjukkan tadi, bermaksud hanya 3 kotak bernombor sahaja yang disetkan untuk dipaparkan pada page Home.  

Korang cuma ubah nombor-nombor yang di'BOLD'kan pada kedua-dua kod di atas tadi, mengikut kesesuaian blog korang sendiri. 

Kemudian, save dan preview hasilnya.

(Nota: Dicadangkan korang heret (drag) kod HTML bagi Numbered Page Navigation tadi ke bahagian bawah "Catatan Blog (Blog Post)" dan save, seterusnya preview hasilnya.) 

Eh! Ada lagi.... yang atas tu, baru kaler oren jer, ada lagi kaler lain,....so, korang boleh la cuba kaler lain plak.... 

Hitam

<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:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border-top:2px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk-fa7Jm1JfAjlTqPyLRliE0oZFCOSfd_bnZSyw2BWdzaEQ7G8_oYnM49QQ0QV6p_DG47Qz1UDwQ0-wxawycvrN8_5IUMA96D894Q-qeB4NZWYq9hzpwg6vx3nXiRg9OHyJFLu43aynCU/s1600/wp4.jpg) 0 -25px repeat-x}.showpageNum a:hover{border-top:1px solid #999;border-left:1px solid #999;border-right:1px solid #999;border-bottom:2px solid #999;background:#999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk-fa7Jm1JfAjlTqPyLRliE0oZFCOSfd_bnZSyw2BWdzaEQ7G8_oYnM49QQ0QV6p_DG47Qz1UDwQ0-wxawycvrN8_5IUMA96D894Q-qeB4NZWYq9hzpwg6vx3nXiRg9OHyJFLu43aynCU/s1600/wp4.jpg) 0 -50px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;border-top:2px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk-fa7Jm1JfAjlTqPyLRliE0oZFCOSfd_bnZSyw2BWdzaEQ7G8_oYnM49QQ0QV6p_DG47Qz1UDwQ0-wxawycvrN8_5IUMA96D894Q-qeB4NZWYq9hzpwg6vx3nXiRg9OHyJFLu43aynCU/s1600/wp4.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0} </style> <br /> <script style='text/javascript'> var postperpage=5; var numshowpage=3; var upPageWord="Prev"; var downPageWord="Next"; var home_page="/"; var urlactivepage=location.href; </script><br /> <script style='text/javascript' src='http://bloggertrickandtoolz.googlecode.com/files/bloggertricksandtoolz.com-blogger_pnavi.js'></script>

Hijau
<style type="text/css"> #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: #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*/ .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',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><br /> <br /> <script type='text/javascript'> var home_page="/"; var urlactivepage=location.href; var postperpage=5; var numshowpage=3; var upPageWord ='Previous'; var downPageWord ='Next'; </script><br /> <script src='http://bloggertrickandtoolz.googlecode.com/files/www.bloggertricksandtoolz.com-bloggerpagenavi.js' type='text/javascript'></script>

Merah
<!--Super Numbered Page Navigation Widget By bloggertricksandtoolz/ @ http://www.bloggertricksandtoolz.com/ --><br /> <br /> <style type="text/css"> #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: #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 ); }/* www.bloggertricksandtoolz.com */ .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 ); }/* 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><br /> <script type='text/javascript'> var home_page="/"; var urlactivepage=location.href; var postperpage=5; var numshowpage=3; var upPageWord ='Previous'; var downPageWord ='Next'; </script><br /> <script src='http://bloggertrickandtoolz.googlecode.com/files/www.bloggertricksandtoolz.com-bloggerpagenavi.js' type='text/javascript'></script><br /> <--http://www.bloggertricksandtoolz.com/ -->

Biru
<!--Cool Numbered Page Navigation Widget By bloggertricksandtoolz/ @ http://www.bloggertricksandtoolz.com/ --><br /> <br /> <style type="text/css"> #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: #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 ); }/* www.bloggertricksandtoolz.com */ .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 ); }/* 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><br /> <script type='text/javascript'> var home_page="/"; var urlactivepage=location.href; var postperpage=5; var numshowpage=3; var upPageWord ='Previous'; var downPageWord ='Next'; </script><br /> <script src='http://bloggertrickandtoolz.googlecode.com/files/www.bloggertricksandtoolz.com-bloggerpagenavi.js' type='text/javascript'></script>

Biru Gelap
<!-- Stylish colored Navigation Widget For Blogger By www.bloggertricksandtoolz.com--><br /> <style type="text/css"> #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: #789EB1; background: -moz-linear-gradient(top, #789EB1 0%, #618FA7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#789EB1), color-stop(100%,#618FA7)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#789EB1', endColorstr='#618FA7',GradientType=0 ); }/* www.bloggertricksandtoolz.com */ .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;background: #7d7e7d; background: -moz-linear-gradient(top, #7d7e7d 0%, #6B6B6B 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#6B6B6B)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#6B6B6B',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><br /> <br /> <script type='text/javascript'> var home_page="/"; var urlactivepage=location.href; var postperpage=5; var numshowpage=3; var upPageWord ='Previous'; var downPageWord ='Next'; </script><br /> <script src='http://bloggertrickandtoolz.googlecode.com/files/www.bloggertricksandtoolz.com-bloggerpagenavi.js' type='text/javascript'></script>

sumber: http://www.bloggertricksandtoolz.com

======================================================================================

Nak yang transparent, cuba yang ini plak. (Sumber: way2blogging.org)

<style type='text/css'> .showpageArea a {text-decoration:none;} .showpageNum a,.showpage a { color:#333333; text-decoration:none; border: 1px solid #cccccc; margin:0 3px; padding:3px 7px; background-color:none; } .showpageNum a:hover, .showpage a:hover, .showpagePoint { color:#333333; border: 1px solid #cccccc; padding:3px 7px; background-color:#cccccc; margin:0 3px; } .showpageOf { color:#333; text-decoration:none; padding:3px 7px; margin: 0 3px 0 0; } </style><br /> <script style='text/javascript'> var pageCount=3; var displayPageNum=5; var upPageWord="Previous"; var downPageWord="Next"; </script><br /> <script style='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/bloggerpnav.js'></script><br /> <br /> <br /> <style type='text/css'> .showpageArea a {text-decoration:none;} .showpageNum a,.showpage a { color:#333333; text-decoration:none; border: 1px solid #cccccc; margin:0 3px; padding:3px 7px; background-color:none; } .showpageNum a:hover, .showpage a:hover, .showpagePoint { color:#333333; border: 1px solid #cccccc; padding:3px 7px; background-color:#cccccc; margin:0 3px; } .showpageOf { color:#333; text-decoration:none; padding:3px 7px; margin: 0 3px 0 0; } </style><br /> <script style='text/javascript'> var pageCount=3; var displayPageNum=5; var upPageWord="Previous"; var downPageWord="Next"; </script><br /> <script style='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/bloggerpnav.js'></script>

Lagi, lagi?

Kalau korang tak suka Numbered Page Navigation yang ada kaler macam kat blog ini, takpe. Tak kisah. Itu hak korang. Ada banyak pilihan. Kat bawah ni, ialah link-link blog berkaitan cara menambah Numbered Page Navigation dengan kaedah yang lebih rumit (faham-faham jer la) dan mencabar kesabaran korang (itupun kalau korang tak kisah la). So, korang boleh la terjah ke mana-mana link kat bawah ni dan mencuba sendiri cara membuatnya.... :)

• Numbered Page Navigation For Blogger ~ Blogger Widgets
• Numbered Page Navigation Blogger | TutorialWebForBlogger
• Numbered Page Navigation For Blogger | zuraidin Zuraidin's
• Numbered Page Navigation Hack For Bloggers ~ Blogger Tips And Tricks

(Link yang aku tunjukkan di atas hanya untuk memudahkan pilihan korang semua, seandainya, semua tutorial yang aku tuliskan di atas mungkin ada yang tidak menjadi atau tidak sesuai untuk blog korang.)

Selamat Mencuba! Happy Blogging !! :)

Tweet