Free tutorial for you

Scroll Down Effect Pada Template Blogger

Scrool Down Effect Blogger

Pernah berkunjung ke blog hongkiat.com? Kalo belum silahkan mampir sebentar dan lihat ada apa aja disana, ada yang bagi-bagi sembako lho... hehe. Menarik, itu yang saya rasakan ketika berkunjung ke blog tersebut. Blog populer yang membahas seputar design ini memiliki  template yang bagus menurut saya. Salah satunya adalah ketika melakukan scroll down, kemudian melihat menu navigasi blog yang tadinya berwarna biru berganti menjadi menu iframe berwarna hitam.

Saya sebut ini scroll down effect, ketika melakukan scroll down akan berefek terhadap bagian template. Saya membahas ini bukan tanpa alasan, kebetulan saya sedang belajar membuat template blogger untuk customize template di blog ini ataupun template yang akan saya bagikan untuk rekan-rekan blogger lainnya. Mungkin anda ingin mencoba widget yang biasa digunakan pada wordpress dan dan bisa digunakan pada blogger yaitu text widget versi blogger.

Kembali pada bahasan utama, scroll down effect ini sebenarnya hanya menampilkan atau menyembunyikan bagian template. Bagian ini biasa kita panggil dengan fungsi div pada template, fungsi div akan menampilkan style pada CSS yang sudah dibuat. Jadi untuk menampilkan ataupun menyembunyikan bagian template adalah memainkan peran fungsi CSS ini. Untuk melakukannya kita bisa menggunakan kode Javascript berikut:
<script type='text/javascript'>
//<![CDATA[
   $(window).scroll(function() {
    if ($(this).scrollTop()>100px)
     {
        $('fungsi CSS').fadeIn();
     }
    else
     {
      $('fungsi CSS').fadeOut();
     }
 });
//]]>
</script>
Ganti kode berwarna hijau sesuai jarak yang diinginkan dengan acuan awal bagian atas template dalam satuan pixel, kemudian ganti kode berwarna merah  dengan fungsi pemanggilan div (tulis dengan perintah fungsi pada kode CSS). Sebagai contoh: misalkan kita ingin menampilkan menu navigasi dengan kode CSS (.navbar-atas {................isi kode css.......}, maka pada fungsi div kita tulis <div id='navbar-atas'>.........</div>. muntuk penulisan pada Javascripnya adalah kode berwarna merah diganti dengan .navbar-atas.

Maaf jika tutorialnya cukup membingungkan karena saya juga bingung mau menjelaskan detailnya bagaimana jadinya seperti ini. Ya sudahlah silahkan dicoba jika memang ada kesulitan bisa ditanyakan dengan menuliskannya di kolom komentar. Selamat mencoba...









1 comments:

  1. hehehe... bodor oge paragraf terakhir...saya ge rada bingung macana... tapi faham insya Allah... izin praktek sob.... :)

    ReplyDelete