J-Querry Back to Top

,
Back to top adalah sebuah navigasi web / Blog yang memudahkan pengunjung untuk kembali ke Header ( Halaman Paling Atas ). Dengan Fasilitas Smooth Scrool Membuat pengunjung Interested dengan Blog kita. Back to top memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik bacaan "back to top"ataupun gambar "Back to top" tersebut.


Caranya Seperti ini..!

1. Login ke Blogger » Layout / Tata Letak » Edit HTML
2. Sisipkan script jquery berikut diatas </head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
3. Masukan juga kode javascript berikut dibawah script jQuery tadi.
<!-- Back To Top -->
<script src='http://h1.ripway.com/robotjapan8/Adijavascript1.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
 settings = jQuery.extend({
  min: 1,
  fadeSpeed: 200
 }, settings);
 return this.each(function() {
  var el = $(this);
  el.hide();
  $(window).scroll(function() {
   if($(window).scrollTop() &gt;= settings.min)
   {
    el.fadeIn(settings.fadeSpeed);
   }
   else
   {
    el.fadeOut(settings.fadeSpeed);
   }
  });
 });
};

$(document).ready(function() {
 $(&#39;#top-link&#39;).topLink({
  min: 300,
  fadeSpeed: 500
 });
 $(&#39;#top-link&#39;).click(function(e) {
  e.preventDefault();
  $.scrollTo(0,300);
 });
});
</script>
<!-- End Back To Top -->
4. Cari tulisan  <body> , dan Ubah Menjadi <body id='top'>

Jika tulisan Body-Nya seperti
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Rubah Menjadi
<body expr:class='&quot;loading&quot; + data:blog.mobileClass' id='top'> 
5. Masukkin Css Berikut sebelum kode ]]></b:skin>   
#top-link {display:none;font-weight:bold;font-family:tahoma;font-size:10px;width:70px;background:#000;color:#fff;text-shadow:0px 1px 1px #666;font-size:11px;position:fixed;right:-20px;bottom:50px;padding:5px;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;} 
Catatan: untuk rotasi Font seperti Punyaku, tinggal ganti derajatnya (angka berhightlight Kuning)

Masukkin Kode HTML berikut sebelumnya (diatasnya) </body>
<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>
Ket: Text Berwarna Merah Bisa di ganti denngan Text Custom Anda sendiri..!  

0 Comment to “J-Querry Back to Top”

Posting Komentar