Tombol Back to Top dengan jQuery

Google menyediakan berbagai macam petunjuk membuat sebuah tombol Back To Top dalam blogger. Apakah "Back To Top" tersebut? Back to Top merupakan sebuah tombol link untuk bergerak ke atas atau awal halaman. Nah, cara membuatnya adalah sebagai berikut:


1. Login ke Blogger => Design => Edit HTML
2. Sebelum merubah template kita, ada baiknya download template kalian untuk berjaga-jaga.
3. Klik / Centang Expand Widget Template.


4. Cari kode ]]></b:skin> dan masukkan kode berikut ini diatasnya.
/* -------------- * ToTop * ------------------- */
#ToTop {
display: block;
display: none;
z-index: 999;
opacity: .6;
position: fixed;
top: 100%;
margin-top: -20px;
left: 50%;
margin-left: -80px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
width: 100px;
line-height: 1px;
height: 15px;
padding: 10px 3px;
background-color: #000;
font-size: 12px;
font-weight: bold;
cursor:pointer;
color:#fff;
font-family:verdana;
}
5. Cari kode </head> dan masukkan kode berikut ini diatasnya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $(&#39;#ToTop&#39;).fadeIn();   
        } else {
            $(&#39;#ToTop&#39;).fadeOut();
        }
    });

    $(&#39;#ToTop&#39;).click(function() {
        $(&#39;body,html&#39;).animate({scrollTop:0},800);
    });   
});
</script>
6. Terakhir, kita masukkan kode dibawah ini di atas kode </body> :
<div id='ToTop'>^ Back to Top</div>
7. Save Template.

Refferensi: Agyuku.
No comments

No comments :

Post a Comment

Mengirim email dengan Attach File

Masih bingung mengirim email dengan lampiran atau Attach File? Mari kita ikuti langkah-langkah berikut ini:
1. Login ke mailbox kalian, bisa di Mail Yahoo atau Gmail.
2. Masukan Username dan Password kalian.
3. Setelah masuk ke dalam mailbox kalian, klik Compose Message seperti gambar dibawah ini:


di atas saya tampilkan Mailbox di Yahoo.

4. Isikan sesuai gambar dibawah ini:


To: dwinnear@yahoo.com
Subject: Soal TIK.Nama Kalian.Kelas.No Absen
Message: ...............

5. Kemudian klik Attach File untuk melampirkan file.


6. Pilih file dan klik open.


7. Klik Send


Congrutulation....Kalian sudah mengiirmkan email.
No comments

No comments :

Post a Comment

Project Blog

Silakan kirim alamat blog kalian dengan komentar dibawah ini....
32 comments

32 comments :

Post a Comment

Notepad++

Notepad++ is a free (as in "free speech" and also as in "free beer") source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License.
Based on the powerful editing component Scintilla, Notepad++ is written in C++ and uses pure Win32 API and STL which ensures a higher execution speed and smaller program size. By optimizing as many routines as possible without losing user friendliness, Notepad++ is trying to reduce the world carbon dioxide emissions. When using less CPU power, the PC can throttle down and reduce power consumption, resulting in a greener environment.
2 comments

2 comments :

Post a Comment