Membuat Sticky Widget Keren di Blogspot

|| || || 11 komentar
Tutorial | 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. mula - mula widget tersebut seperti widget pada umumnya, tetapi setelah di scroll ke bawah, akan terlihat bahwa widget tersebut luar biasa, sobat bisa melihatnya pada blog saya yang satunya yaitu Free Full Download. Pada blog tersebut dropdownnya saya pasang Sticky Widget, jadi selalu berada pada layar sobat. menarik kan sob?? hehe
dibawah ini saya ambil dari widgetnya kang ismet, sangat berbeda dengan yang saya punya. karena Sticky Widget bisa berfungsi pada semua widget.
Preview :
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:section>
</div>
<div id='sticky'>
<a href="http://trickstipsblog.blogspot.com" target="_blank"><img src="http://3.bp.blogspot.com/-cgkxOQu-VrY/UH86aLfDrlI/AAAAAAAACr0/VSlx9pnnMmI/s1600/kilogo.png" /></a>
</div>
<div>

Selamat berkreasi dengan Sticky widget sobat.....
/[ 11 komentar Untuk Artikel Membuat Sticky Widget Keren di Blogspot]\
Ic Creem said...

Terimakasih Artikelnya bermanfaat dan Infonya menambah Ilmu pengetahuan. Harus dicoba.
mampir ya novaibnu.blogspot.com

adji sukmana said...

silahkan gan., siaapppp.,. 8-)

dewa padma said...

knjungi jga blog sya : www.artikeldewapadma.blogspot.com

Stenly Diawang said...

keren artikelnya gan, ,
saya udah follow blog agan.
jika berkenan follback ya :)

http://antek-it.blogspot.com/

adji sukmana said...

okeeee.., :)

Muhammad Rohman Irfanuddin said...

cara menambahkan css-nya itu gimana gan ?

ferdon baho said...

waaaahh oc banget nii broo
thanxs ya infoo nya

mampirrr yoo ke : baho-punya.blogspot.com

Cara Tes IQ said...

Infonya sip banget gan, blogwalking lagi nie.. salam kenal dari blog Cara Test IQ | cara mengetahui tingkatan IQ manusia dan Cara membuat obat herbal alami

akifa naila said...

Tipsnya oke banget gan. Mampir juga ke Soal Psikotes dan Jawabannya, Perumahan Baru di Tanggerang, Tutorial Komputer, Jasa Backlink Murah

PASUTRIHORNY said...

obat kuat
obat kuat sex
obat kuat pria
obat pembesar penis
pembesar penis
vacum pembesar penis
alat pembesar penis
pembesar payudara
vacum pembesar payudara
obat perangsang
obat perangsang cair
perangsang wanita
perangsang permen karet
obat penghilang tatto
alat bantu sex pria
alat bantu sex wanita

rifkyansyah ismanizar said...

Nice Artikel Gan (y)
Kunjungan balik nya gan^^ http://100persenlengkap.blogspot.com/

Post a Comment