Membuat Navigasi Seperti Wordprees Keren Untuk Blog

Tips/Cara Membuat Navigasi Seperti Wordprees Keren Untuk Blog - Wordprees merupakan salah satu saingan dari blogger yang sekarang sudah dimiliki oleh Google sendiri, wordprees bisa dibilang menjadi anak tiri dari salah satu platform yang merajaisearch engine, kelebihan wordprees sendiri salah satunya adalah mempunyai desain yang sangat berkembang sehingga dapat dibilang sangat keren, tetapi dibalik kata keren tersebut template atau dalam bahasa wordpress dapat dikatakan theme itu mempunyai kekurangan yaitu loading yang sangat berat sehingga tidak sempurna. Untuk itu saya akan sedikit memberikan kepada anda mengenai membuat navigasi halaman untuk blogger yang pastinya gak kalah keren sama punyaan wordpress.
( Baca Juga : Segera Cek Kecepatan Blog Kamu Agar Kamu Tidak Menyesal )

Bagaimana cara membuat navigasi halaman seperti wordprees ? yuk ikuti langkah langkah dibawah ini dan juga untuk melihat hasilnya anda dapat melihat ss dibawah ini.

Tips Membuat Navigasi Seperti Wordprees Keren Untuk Blog

• Pertama masuk ke Template > Edit HTML
• Cari kode ]]></b:skin> atau </style> dan tempatkan kode dibawah ini tepat diatas kode tadi.

.pagenavi{clear:both;margin:20px 0 10px;text-align:center;font-weight:bold;color:#fff !important;text-transform:uppercase}

.pagenavi span,.pagenavi a{padding:5px 15px;margin-right:3px;display:inline-block;color:#fff !important;background-color:#3498db;}

.pagenavi .current{color:#fff !important;background-color:#555;}

.pagenavi .current,.pagenavi .pages,.pagenavi a:hover{color:#fff !important;background-color:#555;}

.pagenavi .pages {margin:0 -1px 0 0}

Kemudian cari kode yang mirip seperti dibawah ini.

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>

Setelah anda menemukan kode yang mirip dengan diatas ini, silahkan anda tempatkan kode dibawah ini tepat dibawah kode tadi.

<b:includable id='page-navi'>

<div class='pagenavi'>

<script type='text/javascript'>

var pageNaviConf = {

perPage: 5,

numPages: 5,

firstText: &quot;First&quot;,

lastText: &quot;Last&quot;,

nextText: &quot;Next&quot;,

prevText: &quot;Prev&quot;

}

</script>

<script type='text/javascript'>

//<![CDATA[

function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();

        //]]>

</script>

    </div>

    </b:includable>

• Selanjutnya cari kode <b:include name='nextprev'/>, setelah anda menemukannya segera ganti kode tersebut dengan kode dibawah ini.

<b:if cond='data:blog.pageType == "index"'>

    <b:include name='page-navi' />

    <b:else/>

    <b:if cond='data:blog.pageType == "archive"'>

        <b:include name='page-navi' />

    </b:if>

</b:if>

Setelah semuanya telah terpasang silahkan anda simpan templatenya.

Demikianlah Tips Membuat Navigasi Seperti Wordprees Keren Untuk Blog semoga dapat bermanfaat bagi anda semua dan jika anda berminat silahkan anda baca cara membuat auto read more ringan seo untuk blog.

Share

Tweet