Trik Membuat Page Navigasi Ringan Di Blog

Trik Membuat Page Navigasi Ringan Di Blog
Bicara tentang navigasi blog bagi para blogger profesional umumnya sudah mengetahui kegunaan dan fungsinya. Yup page navigation atau bisa disebut juga dengan page navigasi adalah sebuah navigasi yang dapat memudahkan bagi para pengguna ataupun pembacanya. Karena, dengan adanya page navigasi ini maka halaman yang anda tuju akan terlihat jelas dengan memilih page number. Page navigasi biasanya diletakan dibawah postingan blog ataupun ada yang memasangnya diatasa postingan blog. Lihat Screenshootnya dibawah ini atau anda bisa lihat deminya di blog saya ini.


Page Navigasi ini tidak memberatkan dalam loading blog karena scriptnya sudah tercompress dan scriptnya juga sangat simpel. Page navigasi juga sangat berpengaruh terhadap SEO Blog kita karena dengan adanya page navigasi pengunjung dapat dengan mudah menelusuri halaman artikel yang akan dituju. Biasanya saya menemukan tutorial membuat page navigasi blog yang akan memberatkan pada loading blog tetapi kali ini ada page navigasi yang ringan dan tidak berpengaruh terhadap loading blog. Ok untuk mempraktekannya kita simak langkah-langkahnya dibawah ini.
Baca Selengkapnya : 3 Game Rekomendasi Untuk Tahun Baru 2017

1. Login Ke Blog > Pilih Template > Pilih Edit HTML, terus masukkan Kode dibawah ini tepat sebelum kode ]]></b:skin> atau</style>
.showpageArea{overflow:hidden;margin:10px 0}
.showpageOf{display:inline-block;background:#fff;padding:6px 8px;color:#222;border:1px solid #e3e3e3;margin-right:2px;border-radius:2px}
.showpagePoint{background:#f76253;border:1px solid #e2574a;color:#fff;display:inline-block;padding:6px 8px;margin-right:2px;border-radius:2px}
.showpage a,.showpageNum a{display:inline-block;background:#fff;padding:6px 8px;color:#222;border:1px solid #e3e3e3;margin-right:2px;border-radius:2px}
.showpage a{margin:0;margin-left:2px;}
.showpage a:hover,.showpageNum a:hover{background:#f76253;color:#fff;border-color:#e2574a;}

2. Lalu, Langkah selanjutnya pasang kode diabwah ini sebelum kode </body>, Ini untuk memunculkan number page navigasinya dengan menggunakan javascript.


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=3;
var upPageWord =&#39;&#171;&#39;;
var downPageWord =&#39;&#187;&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span class="showpageOf"> Pages '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span class="showpageOf"> Pages '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}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>
</b:if>
</b:if>
Demikianlah postingan kali ini tentang Trik Membuat Page Navigasi Ringan Loading Di Blog, Mudah-mudahan bermanfaat bagi anda yang menggunakannya.

Sumber

incoming search terms
cara membuat navigasi blog keren,membuat navigasi number ringan,page navigasi number ringan,membuat pagenavigation simple,how to make pagenavigation simple and easy,pagenavigation number for blog render loading,cara membuat next prev dengan number,membuat nomor pada halamn blog,trik untuk membuat ringan loading blog,page nab=vigasi seo friendly for blog.

Anda Sedang Membaca Artikel Tentang Trik Membuat Page Navigasi Ringan Di Blog Dan Artikel Ini URL Permalinknya Adalah http://www.simuiz.com/2017/01/trik-membuat-page-navigasi-ringan-di.html, Saya Harap Artikel Ini Bisa Bermanfaat Bagi Anda Yang Membacanya.


You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser