Cara Menciptakan Wigdet Sticky Di Slidebar

Cara menciptakan wigdet sticky di slidebar

Cara menciptakan wigdet sticky di slidebar (widget / gadget Ikut bergeser ketika saat mouse di scroll ke bawah)
"Sebenarnya prinsi ini sama dengan menciptakan sajian dropdown fixed, ana dapat melihatnya ketika anda scroll blog ini ke bawah maka di bab atas akan ada sajian yang mengikuti kebawah juaga".

Maka aku akan menciptakan tutorial nya yang aku kuti dari blognya kang ismet
Untuk lebih jelasanya mengenai gadget atau widget ini anda dapat scroll samapi kebawah dan lihat bab slider gadget atau widget ini akan ikut bergerak.

Keuntungan dari menciptakan widget sticky

apabila goresan pena anda penjang maka otomatis widget ini akan mengikuti ketika pengunjung mengarahkan mousenya kebawah, dan pastinya pengunjung ketika lelah membaca akan melihat iklan kita tentunya ini akan menjadi nilai plus untuk menjelmuskan pengunjung untuk meng-klik iklan maupun widget lainya, Contohnya widget facebook box like, G+ dll, yang ingin di tempatkan di widget Sticky ini.

Contoh screen slot widgetnaya

Langkah-langkah menciptakan sajian sticky1. Tambahkan css di bawah ini
Paste sebelum kode ]]></b:skin>

#catcher{
height:780px;/* tinggi catcher / widget*/
}
#sticky{
width:300px;/* lebar widget untuk sticky */
height:auto;
}

Penjelasan instruksi di atas.
height:780px; Kode ini di ataur untuk menciptakan fixed instruksi sajian sticky (misalnya di blog anda ada widget yang lain dan widget sticky ini menutupi widget anda yang lain, maka tambahkan 780px menjadi 900px contohnya (untuk mengatur ketnggian dari widget sticky)

2. Tambahkan j4vascript di bawah ini sebelum kode </body>

<script type="text/j4vascript" 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>

3. Cari Kode Kata-kata widget di slidebar yang terakhir di blog sobat, misalanya widget terakhir di blog di file education  adalah ARTIKEL TERBARU, ibarat terlihat pada gambar di bawah ini.

4. Pergi ke dit template lagi tekan tombol CTRL+F dan masukan kata terakhir di slidebar tadi yaitu ARTIKEL TERBARU.
Sperti terlihat pada gambar di bawah ini.

Jika sudah ketemu lalu perhatikan kode-kodenya pada gambar dan cari kode

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>

Perhatikan instruksi diatas denga instruksi yang di gambar sama bukan?
maka sehabis ketemu instruksi di atas letakan instruksi sticky nya di bawahnya.
NB: apabila instruksi di atas tidak ada sesuaikan saja yang penting di final instruksi ARTIKEL TERBARU.


5. Kode stickynya

<div id='sticky'>
DISINI> isi  Kode dengan kode-kode IKLAN, FACEBOOK, G+ DLL</div>

Contohnya instruksi histst di file education

<div id='sticky'>
<!-- Histats.com  START  (standard)-->
<script type='text/j4vascript'>document.write(unescape(&quot;%3Cscript src=%27http://s10.histats.com/js15.js%27 type=%27text/j4vascript%27%3E%3C/script%3E&quot;));</script>
<a href='http://www.histats.com' rel='noindex,nofollow' target='_blank' title='web page hit counter'><script type='text/j4vascript'>
try {Histats.start(1,1802328,4,603,110,40,&quot;00011101&quot;);
Histats.track_hits();} catch(err){};
</script></a>
<noscript><a href='http://www.histats.com' rel='noindex,nofollow' target='_blank'><img alt='web page hit counter' border='0' rel='noindex,nofollow' src='http://sstatic1.histats.com/0.gif?1802328&amp;101'/></a></noscript>
<!-- Histats.com  END  -->
</div>

Jika ingin menambahkan instruksi lainya tingaal tambahkan instruksi itu di bawah instruksi <!-- Histats.com  END  -->

Sumber http://materismansa.blogspot.com

Share this post