Cara Membuat Widget Fixed Scroll Blogger

Cara Membuat Widget Fixed Scroll Blogger   -  Apabila anda bertanya-tanya Apa itu Widget Fixed Scrool Blogger?  Widget Fixed Scroll  Adalah Sebuah widget yang ketika di scroll itu mengambang atau beberapa elemetn yang ada dalam blog dibuat secara mengambang ,biasanya Blogger Lainya menyebut dengan istilah Fixed (Mengambang) . Misalkan Contohnya seperti : Header bar,  footer bar ,  sedebar widget . dll terlihat mengambang .

Apa saja keuntungan/kegunaan dari Widget Fixed Scroll Blogger? 

Keuntungan dari Widget Fixed Scroll Blogger adalah untuk menampilkan widget kesayangan anda  ataupun menu-menu andalan anda di blog, agar tidak kehilangan pandangan dari pembaca blog sanda , serta Membuat Blog kita terlihat profesional dan menarik , dapat memungkinkan tingkat klik yang tinggi jika anda bermain iklan ,contoh nya seperti iklan Google adsense .
tidak hanya itu Situs jejaring sosial Facebook juga menggunakan widget fixed scroll yang terletak pada sidebar kanan spot iklanya .

Bagaimana Cara Membuat Widget Fixed Scroll Blogger ?

Cara Membuatnya sangatlah mudah , anda jangan khawatir karna di artikel ini kami Memberikanya  secara gratis dan  menuntun anda agar bisa menerapkan tutorial widget scroll blogger . Baiklah mungkin cukup basa-basinya .

Langsung saja ke tahap Pembuatan widget fixed scroll untuk blogger. :

1.  Pertama : Backup terlebih dahulu template anda ,guna mencegah hal-hal yang tidak diinginkan

2. Kedua:  Masuk ke Menu template => Edit template => selanjutnya cari kode tag </ body> dalam template Blogger anda , (gunakan tombol ctrl+f untuk mempercepat pencarian)
 kemudian paste kode dibawah ini tepat diatasnya:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<SCRIPT>
$(document).ready(function() {
var div = $('#YOUR_WIDGET_ID');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});
});
</SCRIPT>

3. Ketiga:  Ubahlah tulisan yang berwarna Hijau diatas.

Keterangan :

• " #YOUR_WIDGET_ID " widget ID sobat, 
• misal ID Header-Wrapper atau Footer-Wrapper , dll.

4. Keempat : Silahkan Lakukan klik Pertinjau template atau Langsung save

Note:" Artikel ini untuk pembelajaran bersama , apabila anda masih kurang jelas dengan tutorial diatas ,silahkan tanyakan pada kolom komentar di bawah "

Khusus untuk yang Copas ,mohon untuk menghargai sumber dengan cara menyertakan link sumber .

Sekian dan terima kasih , semoga Bermanfaat.

Tweet