Navigasi Halaman Menggunakan Javascript

Tutorial pemasangan navigasi halaman ini sudah pernah saya bahas dulu, dengan cara meletakkan langsung seluruh kode di gadget. Namun masih saja ada yang kesulitan dengan panduan peletakkan navigasi halaman tersebut. Sekarang saya akan coba berikan sedikit tips yang berbeda dan tentunya dengan variasi bentuk yang lebih menarik. Saya tidak akan panjang lebar menjelaskan tentang pengertian navigasi halaman ini karena sudah pernah saya bahas sebelumnya.

 

Kode css dan javascript ini saya ambil dari blog mybloggerthemes dengan bentuk yang sama persis. Tapi jangan menelan mentah-mentah kode css yang ada karena sobat bisa kreasikan sesuai dengan warna background blog sobat. Jika kode script ini saya pasang langsung di template pasti akan membuat sobat pusing karena kode ini sangat panjang, oleh karenya saya simpan saja di google sites. Berikut cara pemasangannya.

 

1. Setelah login di blogger, silahkan sobat klik Rancangan.
2. Kemudian klik tab Edit HTML.
3. Untuk radio button Expand Template Widget tidak usah di klik karena akan menambah pusing nantinya.
4. Letakkan kode css berikut ini sebelum kode ]]></b:skin>

    

   .showpageNum a {

   color:#FFF;padding:4px 10px;

   margin:0 2px;

   text-decoration:none;

   -webkit-border-radius:2px;-

   moz-border-radius:2px;

   background:#848484

   }
   .showpageOf {

   color:#222;

   margin:0 6px 0 0

   }
   .showpageNum a:hover {

   background:#222;

   color:#FFF

   }
   .showpagePoint {

   color:#FFF;

   text-shadow:0 1px 2px #333;

   padding:4px 10px;

   margin:0 2px;

   -webkit-border-radius:2px;

   -moz-border-radius:2px;

   background:#222;

   text-decoration:none

   }
5. Dan letakkan kode berikut sebelum </body>

    

   <script type='text/javascript'>
   var home_page=&quot;/&quot;;
   var urlactivepage=location.href;
   var postperpage=10;
   var numshowpage=7;
   var upPageWord =&#39;&#9668;&#39;;
   var downPageWord =&#39;&#9658;&#39;;
   </script>
   <script src='http://miscah.googlecode.com/files/pagenav.js' type='text/javascript'/>
6. Kemudian Simpan Template.

 

Keterangan :

• var postperpage=10; adalah jumlah postingan dalam satu halaman, sesuaikan dengan jumlah postingan sobat, jika jumlah postingannya 5 maka ganti angka tersebut dengan angka 5.
• var numshowpage=7; adalah jumlah tombol navigasi dalam satu halaman.

 

Semoga berhasil ya !

Pasang Breadcrumb (Navigasi) di Blog

Pengertian breadcrumb sendiri kurang lebihnya adalah suatu navigasi yang berisikan kategori atau label dari postingan dan bisanya selalu di awali dengan tombol menuju home (halaman depan blog).

 

Pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. 

 

 

Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

 

Baiklah, begini cara membuat breadcrumb-nya :

• Login ke Blogger.
• Langsung tuju Edit HTML.
• Klik Expand Template Widget.
• Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin>

  .breadcrumbs{
  padding:5px 5px 5px 0;
  margin:0;font-size:95%;
  line-height:1.4em;
  border-bottom:4px double #cadaef}

• Setelah itu, cari kode seperti ini :

  <div class='post hentry uncustomized-post-template'>

• Letakkan kode berikut ini tepat setelah kode <div class='post hentry uncustomized-post-template'>

  <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

  • Simpan Template.

Coba sekarang lihat hasilnya, mantab kan ! oke deh..au revoir

 

 

 

� Gambar diambil dari : Biens-Naturels �

Cara membuat Navigasi Halaman

Untuk memudahkan pengunjung blog atau web dalam melakukan pencarian artikel, selain menggunakan fasilitas searh engine, bisa juga dengan tombol navigasi halaman. Tombol navigasi halaman ini sebenarnya kurang lebih sama dengan tombol next atau previous pada blog sobat, namun bedanya navigasi halaman bisa membuat pengunjung ingat tempat suatu artikel pada halaman ke berapa pada blog kita. Karena navigasi halaman menampilkan nomor per halaman blog kita, seperti contoh pada halaman bawah search engine di google, terlihat tombol navigasi halaman untuk memudahkan pengunjung dalam pencarian keyword yang di maksud.

Berikut langkah mudah dalam membuat navigasi halaman :

1. Login ke Blogger.
   
   
2. Klik Tata Letak --> Elemen Halaman.
   
   
3. Kemudian klik Tambah Gadget.
   
   
4. Pilih yang Edit HTML/Javascript.
   
   
5. Tambahkan kode berikut pada kotak kosong yang tersedia.
   
   
   <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=5;
   var displayPageNum=4;
   var firstPageWord = 'First';
   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;border: 1px solid #333; background-" class="showpage">Halaman '+thisNum+' dari '+(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. Drag and drop tepat dibawah kolom postingan.
   
   
7. Kemudian Save.

Untuk var pageCount=5; --> jumlah postingan dalam satu halaman, jadi sobat sesuaikan dengan jumlah postingan sobat dalam satu halaman. Jika sobat menampilkan 5 postingan setiap halaman, maka sobat gunakan var pagecount=5.
Sipp semoga bermanfaat ya !!