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 :DTapi 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-
ting-
wah makasih atas tutornya sob, ane coba dulu nih
ReplyDelete@Muhammad April Asry haha iya gan sip sip
ReplyDeleteuntung yang ginian ngga terlalu penting :D
ReplyDelete@Raka Pratama haha iya sih
ReplyDeleteinfo nya keren sob ehhe
ReplyDelete@Adminhahaha makasih gan ;)
ReplyDeletegan kenapa tidak bisa
ReplyDelete@the knight of darkness udah sesuai prosedur ngga?
ReplyDeletetadi saya liat di scipt blog kamu penempatan kodenya masih salah
semoga membantu (^^,)
kok gak bisa ?
ReplyDeletecek disini : go.srgo.co.cc/shinryuixyz
@Shinryuixyz™ itu yang disimpen di bawah ]]> udah di pasang belum?
ReplyDelete@ Zamaludin : cara buat gambar admin kalo admin yang post gimana ?
ReplyDelete