Cara Pasang Back to top di Blog Part2

Arjermania Blog.........Nach kali ini kembali lagi ke postingan mengenai blogger.. yang berkaitan dengan cara scroll keatas dan kebawah pada blog dengan menggunakan animasi jquery, dengan sekali klik.
Caranya cukup sederhana, tinggal ikutin proses dibawah ini....

Yang pertama harus dilakukan adalah buka Blogger - Design - Edit HTML

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>

Alasan kenapa kode script diatas diletakkan paling bawah atau setelah kode </body>, adalah supaya pada saat loading blog pertama kali, tidak terlalu berat.

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://img89.imageshack.us/img89/4998/arrowdown.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://img600.imageshack.us/img600/8649/arrowup.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);}

Lalu simpan...

Begitulah sehingga postingan ini berakhir, untuk hasilnya bisa dilihat pada Demo disini.

Semoga Berhasil

Posted in: Tutorial blog