Membuat halaman Blog tanpa edit HTML


Pada umumnya dalam membuat Navigasi halaman blog harus melalui proses edit HTML, mungkin dengan cara serperti ini sedikit agak rumit untuk netter pemula.  Kegunaan dari navigasi halaman dengan nomor atau angka  ini, sebetulnya  tombol newer post dan tombol older post secara  default sama.  jika Sobat dapat mengganti newer-older post original dari blogger  menjadi halaman bernomor urut /angka berurutan. Seperti gambar di bawah:

Di postingan sebelumnya sudah saya publikasikan, namu pada postingan ini melalui edit HTML. Sengaja saya posting dengan dua cara agar Sobat dapat memilih diantara dua cara tersebut, mana yang lebih mudah menurut Sobat. Nah, postongan yang ini, Sobat tidak perlu ribet mengedit HTML, sengaja  saya suguhkan untuk Sobat code JavaScript nya silahkan copy code di bawah: Cara menambah gadget baru Blogger atau Add a Gadget

<style>
.showpageArea {
padding:2px;
font-size:14px;
border: 0px solid #333;
margin:0px auto;
text-align: center;
}
.showpageArea a {border: 0px solid #ffffff;
color: #cc0000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:14px;
border: 0px solid #333;
color: #000000;
background-color: #FEFF5F;
}

.showpageNum a {border: 0px solid #ffffff;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:14px;
border: 0px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:13px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 0px solid #333;
color: #fff;
background-color: #006F0F;
}

.showpage a:hover {font-size:14px;
border: 0px solid #333;
color: #006F0F;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:14px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 0px solid #0066cc;
color: #006F0F;
background-color: #ffffff;}

.showpageNum a:hover {font-size:14px;
border: 0px 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=5;
var displayPageNum=8;
var firstPageWord = ‘First‘;
var endPageWord = ‘Last‘;
var upPageWord =’Previous‘;
var downPageWord =’Next’;

var labelHtml = ‘<span><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><a href=”/”>’+ upPageWord +'</a></span>’;
}
}else{
upPageHtml = ‘<span><a href=”‘+htmlMap[p]+'”>’+ upPageWord +'</a></span>’;
}

fFlag++;
}

if(p==(thisNum-1)){
html += ‘&nbsp;<span><u>’+thisNum+'</u></span>’;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+’1</a></span>’;
}else{
html += ‘<span><a href=”/”>1</a></span>’;
}
}else{
html += ‘<span><a href=”‘+htmlMap[p]+'”>’+ (p+1) +’ </a></span>’;
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = ‘<span> <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><a href=”/”>’+ firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}else{
html = ”+labelHtml + firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}
}

html = ‘<div><span style=”font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;“>Page ‘+thisNum+’ of ‘+(postNum-1)+’: </span>’+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += ‘<span><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>
<div style=”text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;”> <a href=”http://create-freeblogs-n-widgets.blogspot.com/”>Free widgets for Blogs</a> Custumized by <a href=”http://create-freeblogs-n-widgets.blogspot.com/”>s66</a></div&gt;

Catatan:

Perlu Sobat perhatikan bahwa code warna merah, var pageCount=5; ini untuk jumlah tampilan, sedangkan code var displayPageNum=8; ini menunjukkan jumlah seluruh halaman.

Sedangkan code din bawah ini seperti: First, Last, Previous dan Next, ganti dengan kata-kata Sobat, atau biarkan saja.

var firstPageWord = ‘First‘;

var endPageWord = ‘Last‘;

var upPageWord =’Previous‘;

var downPageWord =’Next’;

Untuk merubah warna tampilan halaman seperti  warna font, warna latar belakang/background color dan warna border, code warna ini yang diberi tanda warna kuning.

Pergi dan masuk ke Blogger Sobat untuk proses membuat Gadget baru

Semoga yang satu ini dapat bermanfaat

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s