Home » Blogging » Cara Membuat Text Area di Blog

Cara Membuat Text Area di Blog

Posted by Unknown On Minggu, 05 Agustus 2012 0 komentar

ingin membuat tombol Next Page 1, 2, 3 >> ... di blogger? inilah salah satu alasan orang pindah ke wordpress adalah opsi navigasi penomoran halaman, tapi jangan khawatir kita bisa juga memasangnya dengan mudah di blogger sehingga pengunjung dengan mudah mengeksplorasi halaman artikel kita lebih leluasa walaupun sebelumnya kita sudah membuat fasilitas recent post dan widget artikel yang bersangkutan dengan scroll, tapi tidak ada salahnya kita mempercantik blog supaya lebih kelihatan professional lagi.
Sebenarnya untuk membuat Next Page / Navigasi Halaman itu caranya sangat mudah kita hanya perlu menambahkan script pada Fotter dari blogger kita.

caranya seperti ini :

1. Pertama Masuk ke Layout

2. Lalu tambahkan Add Page Element / Gedget --> HTML/Javascript pada bagian Fotter

3. Setelah itu copy scrip yang tersedia di bawah ini :

<style> .showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #ccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #ccc; background-color:#ccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #ccc; background: #ccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #ccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333; }  </style><br /> <br /> <br /> <br /> <br /> <br /> <br /> <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=6; var firstPageWord = 'First'; var endPageWord = 'last'; var upPageWord ='Back'; 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"></span>'+upPageHtml+' '+html +' '; } }  html = '<div class="showpageArea"><span style="color:#fff;" class="showpage"> Total '+(postNum-1)+': </span>'+html;  if(thisNum<(postNum-1)){ html += downPageHtml;  }  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><br /> <br /> <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

4. Lakukanlah Copy Paste dan Pindahkan Widget seperti gambar Di bawah ini:

Jadi deh...

Tambahan : Jika setelah melakukan ini tidak berhasil, maka setelah halaman blog kamu tampil coba kamu klik older post dulu satu kali. Di beberapa template fungsi ini muncul mulai halaman kedua. Kalau Tidak Muncul Juga, Coba Kamu klik pada label blog yang memiliki artikel banyak, nanti akan muncul di situ. Karena memang beberapa template tidak mendukung script ini. Oke, Selamat Mencoba. Terima Kasih
Semoga artikel Cara Membuat Text Area di Blog bermanfaat bagi Anda.

Jika artikel ini bermanfaat,bagikan kepada rekan melalui:

Posting Komentar