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>
<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);}
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);}
- Simpan hasil kerja anda....!!
- Lihat hasilnya....
Semoga bermanfaat....!!
EnaL Rhay SyahRinggan Next..>>
Postingan
