Cara Memasang Page Number Cantik di Blog

 

Cara Memasang Page Number Cantik di Blog~"~ Baru-baru ini saya terinspirasi oleh beberapa website yang terdapat didalamnya ada page number sehingga dapat memudahkan melompat ke halaman berikutnya, saya coba edit-edit blog saya ternyata berhasil memasangkan pagenumber tersebut kedalam blog saya ternyata bagus juga dan memudahkan untuk melompat ke halaman yang kita inginkan, disini saya mendapatkan dua cara untuk memasangkan page number tersebut kedalam blog, mau tau caranya? okeh memang bener disini saya akan berbagi ilmu tentang Cara Memasang Page Number Cantik di Blog kepada kalian semua jadi tidak usah risau gitu saya kasih dah cara-caranya coba ikuti langkah-langkah dibawah ini dengan teliti dan benar oke siap:

Cara yang termudah dulu ya, sebenarnya dua-duanya mudah silahkan pilih saja yang kalian sukai,
1.  Masuk ke Blog kalian
2. Pilih Tata Letak dan tambahkan gadget baru [HTML/Javascript]
3. Tambahkan kode dibawah ini kedalam konten [HTML/Javascript] tersebut,

 <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/AVvXsEh37mxQrhVKCzS0n3skc200uzOVKPaLw6GWRCWvd2qKVG_-izCO35hQe76IqXQJOUh8bomMAFonq1_sVfD0b9QrFxVsQcdgcdT_nEnehdUfy7UZDzEvn3qS8FWl-r7tcPlOrp3dOuCPFyQ/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/AVvXsEh37mxQrhVKCzS0n3skc200uzOVKPaLw6GWRCWvd2qKVG_-izCO35hQe76IqXQJOUh8bomMAFonq1_sVfD0b9QrFxVsQcdgcdT_nEnehdUfy7UZDzEvn3qS8FWl-r7tcPlOrp3dOuCPFyQ/s1600/greendiamond.png) repeat-x;background-position:0px -30px;
border:2px solid #006666;-webkit-border-radius:10px;
-moz-border-radius:20px;border-radius:10px;color:#FFF;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh37mxQrhVKCzS0n3skc200uzOVKPaLw6GWRCWvd2qKVG_-izCO35hQe76IqXQJOUh8bomMAFonq1_sVfD0b9QrFxVsQcdgcdT_nEnehdUfy7UZDzEvn3qS8FWl-r7tcPlOrp3dOuCPFyQ/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/AVvXsEh37mxQrhVKCzS0n3skc200uzOVKPaLw6GWRCWvd2qKVG_-izCO35hQe76IqXQJOUh8bomMAFonq1_sVfD0b9QrFxVsQcdgcdT_nEnehdUfy7UZDzEvn3qS8FWl-r7tcPlOrp3dOuCPFyQ/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/AVvXsEh8cj_FRQjbH3REyIuHBLZjvEZvh0DnhFzHt5SGBxGUSm_DF2JRZBPhv_Y01rsX2rrQhAqvbEjWCmDybUDNvC0IYPn4dER5dmfSDy5wfp4rv0fiy9PWChytkpbJuft4RTbPUt5F9BsdATc/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. Tekan [Tombol] Simpan dan lihat hasilnya kurang lebih seperti ini :

5. Cara kedua dan dijamin kalian pasti suka daah dengan yang 1 ini, ayo simak baik-baik :

a. Kalian tadi sudah masuk ke blog
b. Sekarang pilih edit Html dan cari kode ]]></b:skin
c. Jika sudah maka paste/letakan kode dibawah ini tepat berada diatas kode ]]></b:skin, tersebut

.showpageOf{border:1px solid #7b7c7d;color:#000;margin:2px;padding:2px 5px}
.showpageNum a,.showpage a{border:1px solid #7b7c7d;color:#000;text-decoration:none;margin:2px;padding:2px 5px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint{border:1px solid #514a25;background:#fbb754;color:#333;margin:2px;padding:2px 5px}

d. belum selesai jangan disimpan dulu, sekarang cari kode sidebar-wrapper atau threaded_comments atau </b:section> ingat urutannya harus seperti diatas, dan letakan kode berikut tepat dibawah kode </b:section>

<!--Page Navigation Starts-->
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
function showpageCount(n){var h=home_page_url;var f=new Array();var m=1;var c=1;var q=0;var s=0;var d=0;var e="";var a="";var o="";for(var l=0,k;k=n.feed.entry[l];l++){var r=k.published.$t.substring(0,19)+k.published.$t.substring(23,29);timestamp=encodeURIComponent(r);var t=k.title.$t;if(t!=""){if(q==0||(q%pageCount==(pageCount-1))){if(h.indexOf(timestamp)!=-1){m=c}if(t!=""){c++}f[f.length]="/search?updated-max="+timestamp+"&max-results="+pageCount}}q++}for(var g=0;g<f.length;g++){if(g>=(m-displayPageNum-1)&&g<(m+displayPageNum)){if(s==0&&g==m-2){if(m==2){a='<span class="showpage"><a href="/">'+upPageWord+"</a></span>"}else{a='<span class="showpage"><a href="'+f[g]+'">'+upPageWord+"</a></span>"}s++}if(g==(m-1)){e+='<span class="showpagePoint">'+m+"</span>"}else{if(g==0){e+='<span class="showpageNum"><a href="/">1</a></span>'}else{e+='<span class="showpageNum"><a href="'+f[g]+'">'+(g+1)+"</a></span>"}}if(d==0&&g==m){o='<span class="showpage"> <a href="'+f[g]+'">'+downPageWord+"</a></span>";d++}}}if(m>1){e=""+a+" "+e+" "}e='<div class="showpageArea"><span style="COLOR: #111111;" class="showpageOf">Pages ('+(c-1)+")</span>"+e;if(m<(c-1)){e+=o}if(c==1){c++}e+="</div>";var b=document.getElementsByName("pageArea");var j=document.getElementById("blog-pager");if(c<=2){e=""}for(var g=0;g<b.length;g++){b[g].innerHTML=e}if(b&&b.length>0){e=""}if(j){j.innerHTML=e}}function showpageCount2(r){var l=home_page_url;var k=new Array();var g=l.indexOf("/search/label/")!=-1;var d=g?l.substr(l.indexOf("/search/label/")+14,l.length):"";d=d.indexOf("?")!=-1?d.substr(0,d.indexOf("?")):d;var q=1;var e=1;var t=0;var v=0;var f=0;var h="";var a="";var s="";var c='<span class="showpageNum"><a href="/search/label/'+d+"?&max-results="+pageCount+'">';var l=home_page_url;for(var o=0,n;n=r.feed.entry[o];o++){var u=n.published.$t.substring(0,19)+n.published.$t.substring(23,29);timestamp=encodeURIComponent(u);var w=n.title.$t;if(w!=""){if(t==0||(t%pageCount==(pageCount-1))){if(l.indexOf(timestamp)!=-1){q=e}if(w!=""){e++}k[k.length]="/search/label/"+d+"?updated-max="+timestamp+"&max-results="+pageCount}}t++}for(var j=0;j<k.length;j++){if(j>=(q-displayPageNum-1)&&j<(q+displayPageNum)){if(v==0&&j==q-2){if(q==2){a=c+upPageWord+"</a></span>"}else{a='<span class="showpage"><a href="'+k[j]+'">'+upPageWord+"</a></span>"}v++}if(j==(q-1)){h+='<span class="showpagePoint">'+q+"</span>"}else{if(j==0){h=c+"1</a></span>"}else{h+='<span class="showpageNum"><a href="'+k[j]+'">'+(j+1)+"</a></span>"}}if(f==0&&j==q){s='<span class="showpage"> <a href="'+k[j]+'">'+downPageWord+"</a></span>";f++}}}if(q>1){if(!g){h=""+a+" "+h+" "}else{h=""+a+" "+h+" "}}h='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf">Pages ('+(e-1)+")</span>"+h;if(q<(e-1)){h+=s}if(e==1){e++}h+="</div>";var b=document.getElementsByName("pageArea");var m=document.getElementById("blog-pager");if(e<=2){h=""}for(var j=0;j<b.length;j++){b[j].innerHTML=h}if(b&&b.length>0){h=""}if(m){m.innerHTML=h}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+"feeds/posts/full/-/"+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}};
//]]>
</script>
<!--Page Navigation Ends -->

Kalau yang ini kurang lebih tampilannya seperti itu :

5. nah ! Sekarang sudah selesai silahkan tekan dah [Tombol] Simpan template tersebut dan lihat hasilnya gimana menarik kan, atau bagus oke sekian saja postingan dari saya semoga bermanfaat dan terimakasih.