Memasang Sticky Widget Keren di Blogspot

Home Widget Memasang Sticky Widget Keren di Blogspot

Memasang Sticky Widget Keren di Blogspot

Diposting oleh: Dafin defandaky pada: 10 April 2013

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 dan tempatkan di atas ]]></b:skin> :

#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 Post, Follower 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 lihat gambar berikut ini :

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 tag </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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFOjRcSQPsqg1nbkdr5RoCqz5hSRnhHakcyDfECEpUiTHQpRhuLVJ5SUzTgoz4oJ2qbW0_UY5yhkJ-gGuHtHSJpQSSHl0iFmpSEwCFPAjKiVvMsl_ezMIMQmAU9DI9mgpN8RQvFiits_Y/s1600/kilogo.png" /></a>
</div>
<div>

Selamat berkreasi dengan Sticky widget di blog sobat..... semoga bermanfaat.

Source: blog.kangismet.net

Tidak ada komentar :

Kode klik emo:

$:\$

$\o/$

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag ...KODE ANDA DI SINI...
Untuk menyisipkan script, gunakan ...KODE SCRIPT ANDA...
Untuk menyisipkan gambar, gunakan tag ...URL GAMBAR ANDA ...
Untuk menyisipkan judul, gunakan tag ...JUDUL ANDA...
Untuk menyisipkan catatan, gunakan tag ...CATATAN ANDA...
Untuk menciptakan efek tebal gunakan tag ...TEKS ANDA...
Untuk menciptakan efek huruf miring gunakan tag ...TEKS ANDA...

Konversi KodeOOT