Subscribe to Revolution Church

Makalah Keperawatan

Blog Accessories

Blogger Pemula

Wednesday, August 24, 2011

Cara Membuat Tombol Back to Top di Blogspot


Assalamualaikum Wr. Wb.

Cara Membuat 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 Cara Membuat 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 Membuat 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(http://4.bp.blogspot.com/-Zz3p_XJiuPY/ThvMn5oSxyI/AAAAAAAAAVA/bdL3bOnju8w/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(http://4.bp.blogspot.com/-1YnefmKuz2k/ThvMyB4XqSI/AAAAAAAAAVE/55rAAof8NyE/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....!!
Bambua*09

Artikel Terkait



0 comments:

Post a Comment

My Facebook

Statistik

 
BAMBUA*09. Copyright 2008 All Rights Reserved by Bambua*09 Blogger Template by BAMBUA*09