BerlanggananBerlangganan Artikel Gratis Langsung Di Email Anda

Cara Buat Navigasi Seperti WordPress

Cara Buat Navigasi Seperti WordPress, Tidak jarang para blogger ingin tampilan blog mereka seperti wordpress , dan kebetulan sekali anda membaca artikel ini karena saya akan berbagi sedikit tentang Cara Buat Navigasi Seperti WordPress.

Cara Buat Navigasi Seperti WordPress

Menu atau navigasi sangat direkomendasikan oleh google karena akan sangat membantu pengunjung anda untuk melihat artikel yang sesuai dengan minatnya pada blog anda. Memberikan navigasi yang jelas akan membuat orang oran yang mamir di blog menjadi dimudahkan. Silahkan anda simak dan terapkan pada blog anda.

Cara Buat Navigasi Seperti WordPress

Login ke akun blog anda, dan masuk ke kemenu “Template” Setelah itu silahkan klik “Edit HTML”

Jika sudah masukan kode CSS berikut diatas kode ]]></b:skin> ataupun kode </style>

.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}

Jika Sudah, Selanjutnya anda cari kode seperti ini

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

Lalu letakkan kode ini dibawah kode tersebut

<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>

Jika Sudah, langkah selanjutnya adalah cari kode seperti ini <b:include name=’nextprev’/> dan silahkan hapus dan ganti menjadi seperi 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 semua proses diatas selesai sekarang tinggal tahap akhir yaitu “Simpan” dan Navigasi Ala WordPress anda sudah selesai.Itu dia “Cara Buat Navigasi Seperti WordPress” semoga artikel ini bermanfaat dan dapat di terapkan pada blog sobat. Jika ada kritik dan saran silahkan berkomentar pada kolom yang tersedia, Terima Kasih.

Jika anda merasa artikel ini dapat memberi manfaat kepada teman teman yang lainnya maka silahkan di share di media sosial yang anda gunakan, terima kasih.