Menu Close

Buat Navigasi Seperti WordPress di Blogspot

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.

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.

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 > (tanpa spasi, saya beri spasi karena akan otomatis hilang jika tidak) 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: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
</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 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.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *