Cara Membuat Navigasi Back to Top ~ coretan guru

Friday, 6 April 2012

Cara Membuat Navigasi Back to Top

Diposkan oleh :Unknown No comments Print

T ombol navigasi "Back to Top" dapat membantu pembaca untuk menghemat waktu. Fungsi tombol ini adalah untuk menggulung layar, dan kembali ke posisi atas. Berikut adalah langkah-langkah Cara Membuat Navigasi Back To Top Jquery pada Blog :

1. Log in di Blogger.com
2. Pada Setting/ Rancangan pilih Edit HTML
3. Carilah kode ]]></b:skin> (Untuk mempercepat pencarian gunakan ctrl+F)
Copy kode dibawah ini, letakkan sebelum kode ]]></b:skin>

 #backtotop {
      width:100px; /* Mengubah Lebar Box*/
      background:#F4FFBF;  /* Mengubah warna background box*/
      border:1px solid #ccc;  /* Mengubah Border Style*/
      text-align:center;
      padding:5px; 
      position:fixed;
      bottom:10px;right:10px;
      cursor:pointer;
      color:#666; /* Mengubah warna text*/
      text-decoration:none; 
      }

4. Cari kode </body>
Copy kode di bawah ini, lalu paste-kan sebelum kode </body>

<a href="#" id="backtotop">Back to top</a>

5. Kemudian terakhir cari kode <head>
Copy kode dibawah ini, letakkan setelah kode <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
      type='text/javascript'></script>
      <script language="javascript">
      $(window).ready(function(){
      $('#backtotop').click(function(e){
      e.preventDefault();
      $('html, body').animate({scrollTop:0}, 'slow');
      });
      });
      </script>

6. Simpan template dan lihat hasilnya.

Label :Tutorial

Ditulis oleh:ghany maulana

Media Belajar Diperbarui pada: Friday, April 06, 2012

0 comments:

Terima kasih atas kunjungan anda. Media Belajar

coretan guru

Pages

Friday, 6 April 2012

Cara Membuat Navigasi Back to Top

0 comments:

Post a Comment

Artikel Populer

Total Pageviews

Label Artikel

Blog Archive

Kintaka Blog

Labels

Subscribe Now

Subscribe now!