Memasang Tombol Back to Top di Blogspot

Selasa, 12 Juli 2011

Memasang Tombol Back to Top di Blogspot

Memasang Tombol Back to Top di Blogspot

Hay...Jumpa lagi nich..!! Sobat Bloggger, kali ini saya akan membahas sekaligus membagi pengetahuan kepada sobat Blogger. Namun materi posting kali ini masih tetap membahas cara memodif/memberikan Accessories pada Blog.

Seperti pada penjelasan diatas, kali ini saya akan share cara Memasang Tombol Back to Top di Blogspot pada sobat Blogger. Dengan menambahkan kode script, sobat bisa membuat Tombol Back to Top yang berkaitan dengan scroll ke atas dan ke bawah pada Blog dengan menggunakan animasi jquery dengan sekali klik..!

Oke.., jika sobat tertarik dengan trik Memasang Tombol Back to Top di Blogspot, sobat ikutin ajh cara-caranya..:

Langkah-langkah yang harus dilakukan yaitu :

Seperti biasa Log in ke Blogger anda. => Blogger.com
Pilih Tata Letak/Edit HTML.
Cari Kode </body> (Gunakan saja pencarian cepat => Ctrl + F)
Copy paste kode Script di bawah ini. Taruh kode Script di bawah ini tepat di atas kode </body>

<div style="display:none;" class="atas" id="atas"></div>
<div style="display:none;" class="bawah" id="bawah"></div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script text="text/javascript">
$(function() {
var $elem = $('#outer-wrapper');
$('#atas').fadeIn('slow');
$('#bawah').fadeIn('slow');
$('#bawah').click(
function (e) {$('html, body').animate({scrollTop: $elem.height()}, 800);});
$('#atas').click(
function (e) {$('html, body').animate({scrollTop: '0px'}, 800);});
});
</script>

Setelah itu, sobat cari kode ]]></b:skin>
Copy paste kode dibawah ini tepat diatasnya kode ]]></b:skin>.

#bawah{ padding:7px; background-color:white; border:1px solid #CCC;
position:fixed; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0NsTW3bOZ8vm52rGTsFO95Ek6LlCwWgj9zxThKIkklEeU7naZqRCcTHa-rWWjcawNA9fXVkEHJ3RajoDI6p3T83zyQa1FRWkr9jCoPNsW9AL8MMdUcpyesH4K2_VN1fbLItlrITtrljk/s50/Button-Next-icon.png) no-repeat top left;
background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7;
left:70px; white-space:nowrap; cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
#atas{ padding:7px; background-color:white; border:1px solid #CCC;
position:fixed; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzX0_QTylr9A7b28g86B2U45wReOh3uUNe499j7OHEZCvzd8wjVYuYo23azc7DW4heQwUyAhMY-2kHX7FrL7zOUWhAK7lr_HCWOOEVW8MeXrCbhuosr2YKj0uOaOfELRliM7oaVWqF2yc/s50/Copy+of+Button-Next-icon.png) no-repeat top left;
background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7;
left:30px; white-space:nowrap; cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}