Monday, June 24, 2019

Cara Mudah Memasang Navigasi Bernomor Diblog

Monday, June 24, 2019

Cara Mudah Memasang Navigasi Bernomor Di Blog


Tujuan utama dari blogging adalah untuk membuat artikel postingan blog anda dapat terlihat atau dibaca oleh para pengunjung blog anda serta untuk bisa di temukan di hasil penelusuran mesin pencari google. Namun ada kalanya anda perlu untuk di modifikasi template blog kita agar kelihatan lebih elegan pada Navigasi halaman postingan blog tentunya di Navigasi halaman homepage atau halaman depan blog.

Misalnya anda melihat pada tampilan halaman depan blog berupa link Older Post Newer Post dan Home yang terletak di bawah artikel postingan halaman beranda blognya mungkin itu masih berupa tampilan sederhana default blogger sehingga anda ingin merubah dan menggantinya dengan tampilan baru yaitu Navigasi Halaman Bernomor di blog agar anda dengan mudah bernavigasi menelusuri tab halaman postingan yang ada pada blognya.

Mungkin anda pasti bertanya dalam hati bahwa Bagai manakah Cara merubah tulisan Older Post Newer Post dan Home Itu.? Cara mudahnya yaitu anda harus mengedit template blog nya dengan memasukan kode CSS/HTML Java Script pada template blog anda. Jika anda menggunakan Blogger. Anda dapat dengan mudah melakukan pengeditan dengan mengambil beberapa langkah sederhana. Anda dapat menggunakan panduan ini untuk memulainya.

Berikut ini Cara memasang Navigasi Bernomor di Blogger



1. Silahkan anda buka akun Blogger dulu sejenak
2. Lalu masuk di tab halaman Dasbor
3. Selanjutnya silahkan pilih tab menu Dasbor
4. Klik "Tema"
5. Klik "Edit HTML"
6. Cari kode "]]></b:skin>" tanpa tanda petik untuk memudahkan anda menempatkan kode ini silahkan tekan tombol “CTRL+F” bersamaan pada keyboard kemudian kopy kan kode tadi. Jika sudah didapatkan tempatkan kode berikut diatasnya;


.showpageArea{padding:15px;background:#fff} .showpageArea a{-moz-border-radius:5px;text-decoration:none} .showpageNum a{font-weight:bold;color:#0080ff;padding:1px 8px; margin:0 4px;text-shadow:0px 2px 4px #666;border:1px solid #91bde6;background:#fff;} .showpageNum a:hover{color:#fff;background:-moz-linear-gradient(top,#cee5fc,#0080ff);text-shadow:0px 2px 2px #00a;border:1px solid #369afc;} .showpagePoint{color:#fff; text-shadow:0px 2px 2px #00a; padding:1px 8px; margin:2px; font-weight:bold;border:1px solid #369afc;background:-moz-linear-gradient(top,#cee5fc,#0080ff);-moz-border-radius:5px;} .totalpages{margin:0 8px 0 0;color:#444;background:#fff;padding:1px 10px;border:1px solid #91bde6;-moz-border-radius:5px;} .showpage a{padding:1px 8px; margin:0 2px;border:1px solid #91bde6;background:#fff;color:#0080ff;text-shadow:0px 2px 4px #999;padding-left:10px} .showpage a:hover{background:-moz-linear-gradient(top,#cee5fc,#0080ff);color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px} #showlastpage a{font-weight:bold}


Setelah itu cari kode </body> pada kode template anda dan simpan kode CSS/HTML Java Script sebelum kode </body> dibawah ini :

<div>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("blog-pager").style.display="inline";var canvas="";function writescript(a){document.write('<script src="/feeds/posts/summary?alt=json-in-script&callback='+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}function writelabelscript(a){document.write('<script src="/feeds/posts/summary/-/'+label+"?alt=json-in-script&callback="+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}var url=location.href,total;var already=new Boolean(false);var timestamps=new Array();if(url.indexOf("/search/label/")!=-1){if(url.indexOf("?updated-max")!=-1){var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?updated-max"))}else{var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?&max"))}}if(url.indexOf("#Page")!=-1){var currentpagenum=parseInt(url.substring(url.indexOf("#Page")+5,url.length))}else{var currentpagenum=1}var startindex=(currentpagenum-displayPageNum-1>0)?((currentpagenum-displayPageNum-2)*pageCount+1):1;var total=(2*displayPageNum+1)*pageCount;if(url.indexOf("?q=")==-1&&url.indexOf(".html")==-1){if(url.indexOf("/search/label/")==-1){var islabel=new Boolean(false);do{writescript("buildtimestamps");startindex+=100}while(total>startindex)}else{var islabel=new Boolean(true);do{writelabelscript("buildtimestamps");startindex+=100}while(total>startindex)}document.write('<script type="text/javascript">printnav();<\/script>')}function buildtimestamps(b){if(already==false){total=parseInt(b.feed.openSearch$totalResults.$t)}init=pageCount-1;for(var a=init;post=b.feed.entry[a];a+=pageCount){timestamps[timestamps.length]=encodeURIComponent(post.published.$t.substring(0,19)+post.published.$t.substring(23,29))}}function printlast(b){var a=encodeURIComponent(b.feed.entry[0].published.$t.substring(0,19)+b.feed.entry[0].published.$t.substring(23,29));if(islabel==false){link="search?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}else{link="/search/label/"+label+"?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}document.getElementById("showlastpage").innerHTML='<a href="'+link+'">'+maxpages+"</a>"}function printnav(){maxpages=Math.ceil(total/pageCount);canvas=canvas+'<span class="totalpages">Page ['+maxpages+"]</span>";var a=((currentpagenum+displayPageNum)<maxpages)?currentpagenum+displayPageNum:maxpages;var c=((currentpagenum-displayPageNum)>1)?currentpagenum-displayPageNum:1;if(currentpagenum>1){if(islabel==false){if(currentpagenum==2){link="/"}else{link="search?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}else{if(currentpagenum==2){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9668</a></span>'}if(c!=1){if(islabel==true){canvas=canvas+'<span class="showpageNum"><a href="/search/label/'+label+"&max-results="+pageCount+'">1</a></span>'}else{canvas=canvas+'<span class="showpageNum"><a href="/">1</a></span>'}canvas=canvas+"..."}for(var b=c;b<=a;b++){if(islabel==true){if(b==1){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}else{if(b==1){link="/"}else{link="search?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}}if(a!=maxpages){canvas=canvas+' .. <span id="showlastpage" class="showpage"></span>';startindex=Math.floor((total-1)/pageCount)*pageCount;if(islabel==true){writelabelscript("printlast")}else{writescript("printlast")}}if(currentpagenum<maxpages){if(islabel==false){link="search?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9658</a></span>'}document.getElementById("blog-pager").innerHTML=canvas};
//]]>
</script>
</b:if>
</div>


Note:
Anda Ubah angka 6 pada var pageCount sesuai dengan jumlah post yang tampil di halaman depan blog kalian.  

var pageCount=6;  var displayPageNum=6;   

Angka 6 pada var displayPageNum adalah jumlah page yang akan ditampilkan. Ganti sesuai yang anda inginkan. Simpan, dan lihat hasilnya.


Nah Itulah Cara Mudah Memasang Navigasi Bernomor Di Blog Blogger semoga dapat bermanfaat selamat menggunakan aplikasi nya dan salam blogger.

Show comments
Hide comments