Post Game

Cara Membuat Tombol Back To Top Part2

Cara Membuat Tombol Back To Top Part2

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/AVvXsEi6N4b6HnCpCmO74vV296-gPPI3HX9ji1KHP48go_vZ3F1NOeZ851L16yeMv_wQxBPs_DUNRnkRZuhPWxQgkDAdGmfNf0IEW7dXF1QU4FLYlHoKYfel0AoeHKocuK8_A-0jpUBqro-hWR4/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6N4b6HnCpCmO74vV296-gPPI3HX9ji1KHP48go_vZ3F1NOeZ851L16yeMv_wQxBPs_DUNRnkRZuhPWxQgkDAdGmfNf0IEW7dXF1QU4FLYlHoKYfel0AoeHKocuK8_A-0jpUBqro-hWR4/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....

Go to link Download