Merasa Blogger sejati? Silakan klik Tombol 'SUKA' dibawah ini ya .....

!

Membuat Widget Mengikuti Layar Saat Kursor Digulung (Sticky Widget)

Sticky dalam Bahasa Indonesia artinya menempel. Dalam istilah website Sticky berarti berada di depan atau selalu mengikuti walaupun mouse terus di scroll. Sedangkan Sticky Widget Sidebar berarti membuat widget yang selalu menempel walaupun mouse kita scroll.

Pertama kali mengacak-acak kode sticky ini ketika saya diminta bantuan oleh 7O3 Blogger Tuts  dalam template Cemungudh Blogger Template. Karena terasa menarik, maka saya aplikasikan juga dalam blog saya ini.

Untuk lebih memahami apa itu sticky widget sidebar, silahkan scroll kebawah dulu sampai habis, (nanti kembali lagi ke sini... ) Anda akan menemukan widget yang terus mengikuti seperti dibawah ini

sticky widget blogger

Untuk membuat Sticky widget ini, ada tiga langkah mudah, silahkan simak satu persatu
1. Menambakan kode CSS
2. Menambah kode JavaScript
3. Menambahkan kode HTML

Menambah kode CSS

1. Login ke Blogger
2. Klik Template > Edit HTML > Lanjutkan
3. Tambahkan kode CSS, contoh kode seperti ini :
#catcher{
height:780px;/* tinggi catcher */
}

#sticky{
width:300px;/* lebar sticky */
height:auto;
}
Catcher adalah tinggi keseluruhan widget sebelum sticky, misalkan ada 3 widget sebelumnya pada blog anda. Recent PostFollower dan Facebook Like Box. Tinggi widget Recent Post 250px, tinggi widget Follower 250px, dan Like Box 250px, jarak masing2 widget 10px, maka tinggi catcher 250+10+250+10+250+10 = 780px, supaya lebih jelas saya gambarkan seperti ini :

sticky widget blogger

Kalau masih bingung dengan ketinggian widget anda, silahkan uji coba saja. Apabila menumpuk silahkan tambah ketinggian, apabila terlalu jauh, silahkan kurang ketinggian catcher.

Menambah Kode JavaScript

Tambahkan kode ini sebelum </body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
        function isScrolledTo(elem) {
            var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
            var docViewBottom = docViewTop + $(window).height();
            var elemTop = $(elem).offset().top; //num of pixels above the elem
            var elemBottom = elemTop + $(elem).height();
            return ((elemTop &lt;= docViewTop));
        }
        var catcher = $(&#39;#catcher&#39;);
        var sticky = $(&#39;#sticky&#39;);
        $(window).scroll(function() {
            if(isScrolledTo(sticky)) {
                sticky.css(&#39;position&#39;,&#39;fixed&#39;);
                sticky.css(&#39;top&#39;,&#39;0px&#39;);
            }
            var stopHeight = catcher.offset().top + catcher.height();
            if ( stopHeight &gt; sticky.offset().top) {
                sticky.css(&#39;position&#39;,&#39;absolute&#39;);
                sticky.css(&#39;top&#39;,stopHeight);
            }
        });
    });
</script>


Menambahkan kode HTML

Kode HTML nantinya seperti ini:
<div id='catcher'>
widget yang telah ada
</div>
<div id='sticky'>
isi sticky widget, baik FB Like Box, Banner, atau apa pun
</div>

Contoh Pengaplikasian

Contoh pengaplikasian pada template anda
<div id='sidebar'>
<div id='catcher'>
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='sticky'>
<a href="http://blog.kangismet.net" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzzFgI3yUaVEyLUsw-ehjJVXXFfv6nw7mlUjOuGxcjqQ-qwTMMKTNHIzt8UJqnRoGbvuAWvWV3xOnw8mQ-BetkpMZyvifxGPvLLt-GRsjL8QgqrT7hWC_UEFNvrHX6fXJ2bAunOv5cjdc/s1600/kilogo.png" /></a>
</div>
<div>

Selamat berkreasi dengan Sticky widget.....

20 Responses to "Membuat Widget Mengikuti Layar Saat Kursor Digulung (Sticky Widget)"

  1. Keren nih, seperti di blog kang ismet

    BalasHapus
  2. Terlalu berat untuk blog saya gan. Thks ilmunya pasti bermanfaat buat semua. Salam Blogger Sehati ...

    BalasHapus
    Balasan
    1. oke gan thanks atas komentrnya :)
      ini cuma buat dokumentasi saja kalau bermanfaat ya silahkan

      Hapus
  3. sangat bermanfaat sekali gan, ijin buat coba dulu..

    BalasHapus
  4. pertama sempat bingung tapi bisa juga akhirnya..

    BalasHapus
  5. gimana ini gan??
    Saya belum ngerti dah..

    BalasHapus
  6. nice gan...
    siap untuk di praktekkan nih!

    BalasHapus
  7. perlu dicoba nih , kunjungi balik yahhh

    BalasHapus
  8. Ane coba dulu ya gan, kelihatannya keren...

    BalasHapus
  9. terimakasih sudah saya coba dan berhasil, follback blog saya gan :
    mnafarin.blogspot.com

    BalasHapus
  10. makaseh kang triknya

    BalasHapus
  11. akhirnya yang ane cari dapet juga, thanks udh share :D

    BalasHapus
  12. makasih gan..
    bisa dicoba nih buat tugas praktek ane..

    BalasHapus
  13. mantap gan sudah saya coba dan beerhasil... trims ya

    BalasHapus
  14. emang di pasangnya di kode apa²?

    BalasHapus
  15. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  16. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

Terimakasih^^

wdcfawqafwef