Membuat Scroll Back to Top "Transparent" Atas/Bawah

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode </body>
    Langkah selanjutnya copy kode javascript dibawah ini tepat diatasnya 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>

7. Selanjutnya copy kode css dibawah ini, tepat diatasnya kode ]]></b:skin>

#bawah{padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background:transparent url(http://i217.photobucket.com/albums/cc164/tayuanamcghee/arrow-down-icon-b.gif) no-repeat top right; background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7; right:55px; white-space:nowrap; cursor:pointer; -moz-border-radius:3px 3px 3px 3px; -webkit-border-top-right-radius:3px; -webkit-border-top-right-radius:3px; -khtml-border-top-right-radius:3px; -khtml-border-top-left-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://i445.photobucket.com/albums/qq174/jmaza34/arrow-up-icon-b.gif) no-repeat top right; background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7; right:15px; 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)}

NB: Teks yang bewarna Merah bisa anda ganti dengan kode gambar arrow yang anda sukai

 8. Save
   

Good Luck

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's

Related Post