03 November 2011

Membuat Page Number pada Homepage


Di blogger, secara default, Sampeyan melihat link posting lama, Baru Posting dibagian bawah halaman yang berfungsi untuk menavigasi ke posting lain dari blog sampeyan. Masalahnya adalah pengunjung sulit melihat posting yang lebih baru dan lebih lama di blog sampeyan. Jadi, untuk meningkatkan tampilan halaman blog sampeyan, sampeyan dapat menggunakan Page Number atau disebut juga Navigasi Halaman dengan menggunakan nomor atau angka yang berfungsi sebagai alat navigasi pada halaman utama (homepage) dan untuk memudahkan pengunjung dalam menjelajahi halaman website atau blog Sampeyan.
Gambar contoh dibawah ini,
Langkah Membuat Page Number-Navigasi Halaman pada blogspot.com :
Masuk ke dasbor > pilih Rancangan > Edit HTML, Beri tanda rumput / centang Option Expand Widget Templates
Backup terlebih dahulu template blog sampeyan
Selanjutnya cari kode berikut ]]></b:skin>
Letakkan kode di bawah ini diatas kode ]]></b:skin>


.showpageArea a {
text-decoration:underline;
background: #ffffff;
x 10px; } .showpageNum a {
padding: 10px 10px 10 ptext-decoration:none; border: 1px solid #cccccc;
ng:3px; } .showpageNum a:hove
border-top: 1px solid #cccccc; margin:0 3px; padd ir { border: 1px solid #cccccc; background-color:#cccccc; } .showpagePoint {
c; margin:0
color:#333; text-decoration:none; border: 1px solid #cccccc; background: #cccc c 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px;
d #cccccc; padding
margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px sol i:3px; } .showpage a:hover { text-decoration:none; }
ne; color:#333333; }
.showpageNum a:link,.showpage a:link { text-decoration:n
o



Senjutnya cari dengan tekan Ctrl +F kode berikut </body>
Letakkan kode di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
geNum=5; var upPag
var pageCount= 5 ; var displayP aeWord ='Previous'; var downPageWord ='Next';
[CDATA[ f
</script> <script type='text/javascript'> //<
!unction 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" style="padding:10px 10px 10px 10px;"><span style="COLOR: #000;" 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 style="COLOR: #000;" 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>

Selanjutnya carilah kode berikut 'data:label.url' kemudian hapus dan gantilah dengan kode di bawah ini:
'data:label.url + &quot;?&amp;max-results= 5 &quot;' 



Simpan template dan lihat hasilnya
Selesai


Pengelola Blog

Zainoel Arifin Isa'i : Penulis Blog. Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas yang bermarkas di sudut kamar belakang rumah di daerah pelosok desa terpencil lereng Gunung Arjuno.
Machfudz Arif : Teknisi Blog. Pekerjaan sebagai Web and Mobile App Developer yang bermarkas di Lembah Tlogo Krabyaan di sebuah dusun yang dikelilingi perbukitan nan elok dan berudara segar.

1 comment:

  1. koQ ga bisa om bro???
    ada tulisan kaya gene...
    Kesalahan saat mengurai XML, baris 2041, kolom 4: The content of elements must consist of well-formed character data or markup.

    ReplyDelete

Berkomentarlah yang bijak, iklan/spam langsung dihapus