Scroll To Top? apa itu? biasanya tombol ini sering berada di pojok kanan/kiri halaman blog. Jika tombol ini di klik, secara otomatis anda akan dibawa kembali ke halaman atas blog. Biasanya tombol ini dibuat jika halaman blog terlalu panjang kebawah, sehingga untuk mencapai halaman atas bisa dilakukan dengan 1x klik.
1. Tentunya anda harus login kemudian masuk ke dashboard anda :D
2. Klik design kemudian edit HTML
3. Carilah kode di bawah ini (gunakan Ctrl + F) :
]]></b:skin>
4. Copy - paste kode berikut sebelum/di atas ]]></b:skin> :
#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(http://i1094.photobucket.com/albums/i453/StaR_Ryu/hide-back-to-top.png) no-repeat left top;
}
#toTopHover {
background:url(http://i1094.photobucket.com/albums/i453/StaR_Ryu/hide-back-to-top.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;
}
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(http://i1094.photobucket.com/albums/i453/StaR_Ryu/hide-back-to-top.png) no-repeat left top;
}
#toTopHover {
background:url(http://i1094.photobucket.com/albums/i453/StaR_Ryu/hide-back-to-top.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;
}
Kode right:10px; bisa anda ganti dengan left:10px; jika anda ingin Tombol Scroll To Top anda berada disebelah kiri halaman blog anda.
Untuk Background url bisa anda ganti dengan gambar yang anda inginkan, usahakan ukuran gambar anda 51 x 51 px.
Anda bisa menggunakan beberapa gambar Tombol Scroll To Top dari saya :
5. Kemudian carilah kode ini (gunakan Ctrl + F) :
</head>
6. Copy - paste kode berikut sebelum/di atas </head> :
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<script src='http://suyb.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
Langkah terakhir pastinya di save :D
Whalaa, Tombol Scroll To Top sudah terpasang dan siap digunakan. :)
