Saturday, March 24, 2012

Cara Membuat Tombol Back To Top Part2

Pada Posting sebelumnya saya pernah membahas tentang cara Cara Membuat Tombol Back To Top Menggunakan Javascript, tapi di postingan tersebut banyak yang tidak berhasil menggunakan cara tersebut jadi kali ini saya akan Cara Membuat Tombol Back To Top Part2, mudah-mudahan dengan cara yang kedua ini banyak yang berhasil :D

Tapi dengan cara yang kedua ini membuatnya tidak semakin mudah di banding dengan yang pertama malah agak ribet tapi cuma dikit sih :D

Baik Kitalangsung saja ke TKP..
1. Masuk ke Blogger
2. Masuk ke Template > Edit HTML > Lanjutkan
3. Setelah itu cari kode ]]></b:skin> {gunakan Ctrl+ F}
4. Setelah ketemu lalu letakan kode berikut di atasnya
#toTop {
display:none;
text-decoration:none;
position:fixed;
top:420px;
left:5px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmInKz3Ji9sdoY56Aav0QadMhAD8cMvhyuQ56uWgWCuC5-EycDjofSCjNwvOH8LU2-q2ufUvS79D5q5qrBv51kTYSaKpspzj8mhYAPQSJeMa2zt7tZKCW7trI0d9mEGGXeEqJehjLKRQ/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmInKz3Ji9sdoY56Aav0QadMhAD8cMvhyuQ56uWgWCuC5-EycDjofSCjNwvOH8LU2-q2ufUvS79D5q5qrBv51kTYSaKpspzj8mhYAPQSJeMa2zt7tZKCW7trI0d9mEGGXeEqJehjLKRQ/s1600/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}

5. Jika sudah  sekarang letakan kode berikut di bawah kode tadi  ]]></b:skin>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>

6. Jika sudah klik "Simpan Template"
selesai....


-Semoga Bermanfaat  ting-

11 comments:

Powered by Blogger.