share all free for you

Advertiser Here

Membuat Scroll Back to Top "Transparent" Atas/Bawah

Back To Top sudah banyak digunakan oleh para blogger untuk memperindah tampilan blognya. Banyak ragam kreasinya, seperti salah satunya menggunakan jQuery.

Back to top memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas.

Gimana tertarik??
Ok,Caranya cukup sederhana koq, tinggal ikutin proses dibawah ini....
1. Yang pertama harus dilakukan adalah buka Blogger - Design - Edit HTML
2. 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.

Sebagai informasi dan patut menjadi perhatian adalah kode outer-wrapper... kode ini merupakan kode css yang biasa ada di template minima, yang menggambarkan area id div setelah body... jadi kode ini bisa diganti sesuai area div setelah body.

3. 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 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://img600.imageshack.us/img600/8649/arrowup.png) 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)}

4. Dan langkah terkahir simpan...
Begitulah sehingga postingan ini berakhir

Title : Membuat Scroll Back to Top "Transparent" Atas/Bawah
URL : http://blogcunayz.blogspot.com/2011/07/membuat-scroll-back-to-top-transparent.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Membuat Scroll Back to Top "Transparent" Atas/Bawah sebagai Sumbernya.

Sudah ada [ 2 komentar ] bagaimana pendapat Anda,,?

  1. Kalau saya tombol back to top ngambil dari blognya Hompumalaihumgambreng.......? :) xixixixxixi

    ReplyDelete
    Replies
    1. jiah dasara tukang comot hahaha
      "just kidding"

      Delete

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah