Membuat Widget Melayang di Blogger saat di scrool

Unknown
Widget memanglah sangat penting di sebuah Blog, selain mempermudah pengunjung untuk mencari apa yang ada di blog, untuk memasang iklan, video, foto, label, kategory" dan widget juga sangat mempengaruhi tampilan yang menarik untuk mempercantik bagi blog itu sendiri.

salah satunya dengan membuat Widget kita melayang saat di scrool,
untuk contohnya bisa lihat widget saya, untuk yang menggunakan dekstop/pc Scrool saja sampe bawah    

>>>>>>--------------------------------------------------------------->>>>>>>>>

Untuk membut widget melayang yang harus dilakukan adalah, menentukan widget mana yang mau di buat melayang,
contohnya kita ingin membuat seperti widget saya melayang,

Masuk Blogger.com
Tab Tata Letak
pilih widget yang ingin di buat melayang,
Klik edit
Ambil/Copy id HTML nya... lihat gambar



Setelah dapat id HTML nya, Close saja itu dan tambah widget baru dan masukan script dibawah ini.


<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
<style>
.sticky {
position:fixed;
top: 0px;
z-index: 100;
}
</style>
<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML8').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML8').addClass('sticky');
} else {
$('#HTML8').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script></div>


NOTE : HTML8 yang saya merah kan ganti dengan Id HTML widget kalian yang ingin di buat melayang.


setelah menambah widget, coba save dan lihat blog kalian.

sekian tutorial dari saya. semoga artikel saya bermanfaat dan menambah wawasan kita semua.


Cookie Consent
Ikramlink.com serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.