Membuat Scroll Down & Top

Scroll Up & Down - Kalau dalam postingan yang lalu kita membahastentang pembuatan Scroll Back To Top. Untuk fungsinya tidak jauh berbeda cuma kali ini ada tambahan scroll ke atas dan kebawah, icon tampak seperti gambar di samping, kurang lebihnya seperti itu bro. Jika sobat sudah menerapkan scroll Back to Top aja, maka tidak ada salahnya mencoba yang satu ini. Ok langsung kita olah TKP.

Proses Pembuatan Scroll Up & Down

1. Tetep harus masuk Blogger dulu.
2. Pilih Rancangan/Design
3. Pilih EditHTML jangan lupa centang "Expand Template Widget"
4. Cari Kode      </body>   
5. Copy script dibawah ini dan letakan 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='https://sites.google.com/site/astrindoo/javascript/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>

6. Selanjutnya Cari Kode ]]></b:skin>
7. Lalu Copy kode CSS di bawah ini dan letakan diatas 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)}

8. S A V E

Selama anda teliti dan sabar apa yang tidak bisa anda lakukan?? intinya semua langkah-langkah yang kita tempuh mesti dilalui dengan kesabaran. sekian dari saya mudah-mudahan gampang di pahami dan Sukses selalu.