Banyak cara untuk menampilkan navigasi Halaman Berurut dengan bermacam versi yaitu melakukan instalasi script melalui mekanisme edit HTML. Cara ini mungkin akan bermasalah dan potensial terjadi error karena pada saat install kode HTML tersebut tidak semua Tamplete bisa dengan mudah dibangun Navigasi Halaman ini.
Ada cara lain yang lebih mudah untuk membangun Navigasi Halaman Berurut yang letaknya di bagian bawah posting dengan contoh berikut :
Langkah-langkahnya dapat mengikuti urutan berikut:
1. Login ke blog anda.
2. Klik 'Layout/Tata Letak'
3. Klik 'Tambah Widget'
4. Pilih 'HTML/Java Script'.
5. Masukkan kode HTML di bawah ini.
<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;
margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {font-size:11px;
border: 1px solid #333;color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;
font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;
margin:0px 4px;text-decoration: none;
}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;font-weight: bold;
border: 1px solid #333;
color: #fff;background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;border: 1px solid #0066cc;
color: #0066cc;background-color: #FFFFFF;
}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;color: #000000;
background-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function showpageCount(json) {var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-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 pageCount=10;
var displayPageNum=5;
var firstPageWord = 'Home';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';
var labelHtml = '<span class="showpageNum">
<a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i];
i++) {var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){if(title!=''){if(post.category){for(var c=0, post_category;
post_category = post.category[c];
c++) {if(encodeURIComponent(post_category.term)==thisLable){if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1 ){thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;}}}}//end if(post.category){itemCount++;
}
}else{
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+'T00%3A00%3A00%2B08%3A00&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){if(isLablePage){upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
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"><u>'+thisNum+'</u></span>';
}else{
if(p==0){if(isLablePage){html = labelHtml+'1</a></span>';
}else{
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++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){if(thisNum>1){if(!isLablePage){html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' for '+(postNum-1)+': </span>'+html;if(thisNum<(postNum-1)){html += downPageHtml;html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';}if(postNum==1) postNum++;html += '</div>';
if(isPage isFirstPage isLablePage){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;
}
}
}
</script><script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
6. Letakkan di bawah ''posting blog'.
7. Simpan.
Ket: anda bisa ganti tulisan warna merah sesuai keinginan.
Misalnya Home diganti Awal, Next diganti Berikutnya, dll. Untuk pengaturan warna silakan dikreasi sendiri. Selamat mencoba.
gimana mas........ g bisa........
BalasHapus