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(http://3.bp.blogspot.com/-ZaFk139_d7Q/ThWy56hQTtI/AAAAAAAAEtc/i7lYDE7NQRY/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(http://3.bp.blogspot.com/-ZaFk139_d7Q/ThWy56hQTtI/AAAAAAAAEtc/i7lYDE7NQRY/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:

  1. wah makasih atas tutornya sob, ane coba dulu nih

    ReplyDelete
  2. untung yang ginian ngga terlalu penting :D

    ReplyDelete
  3. @the knight of darkness udah sesuai prosedur ngga?
    tadi saya liat di scipt blog kamu penempatan kodenya masih salah

    semoga membantu (^^,)

    ReplyDelete
  4. kok gak bisa ?
    cek disini : go.srgo.co.cc/shinryuixyz

    ReplyDelete
  5. @Shinryuixyz™ itu yang disimpen di bawah ]]> udah di pasang belum?

    ReplyDelete
  6. @ Zamaludin : cara buat gambar admin kalo admin yang post gimana ?

    ReplyDelete

Powered by Blogger.