Advertisement
Advertisement
Tanpa Basa Basi, inilah "Cara Membuat Widget Sticky di Sidebar di Blogspot Widget Melayang Blogger"
Masuk ke edit HTML template blog kamu
Cari kode </body>
Masukkan kode berikut tepat diatas kode /body tersebut;
<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
var el = $('#sticky-sidebar');
var stickyTop = $('#sticky-sidebar').offset().top;
var stickyHeight = $('#sticky-sidebar').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper" dan ID footer juga sama dengan ID footer template mu
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20 // Jarak atau margin sticky dari atas
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>
Simpan dan Lihat Hasilnya
Berikut ini adalah contoh penerapan pada Newser SoraTemplate yang admin gunakan;
<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#HTML4').length) { // Ganti "#HTML4" dengan ID tertentu
var el = $('#HTML4');
var stickyTop = $('#HTML4').offset().top;
var stickyHeight = $('#HTML4').height();
$(window).scroll(function() {
var limit = $('#LinkList236').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20 // Jarak atau margin sticky dari atas
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>
Sumber Code
Masuk ke edit HTML template blog kamu
Cari kode </body>
Masukkan kode berikut tepat diatas kode /body tersebut;
<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
var el = $('#sticky-sidebar');
var stickyTop = $('#sticky-sidebar').offset().top;
var stickyHeight = $('#sticky-sidebar').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper" dan ID footer juga sama dengan ID footer template mu
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20 // Jarak atau margin sticky dari atas
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>
Simpan dan Lihat Hasilnya
Berikut ini adalah contoh penerapan pada Newser SoraTemplate yang admin gunakan;
<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#HTML4').length) { // Ganti "#HTML4" dengan ID tertentu
var el = $('#HTML4');
var stickyTop = $('#HTML4').offset().top;
var stickyHeight = $('#HTML4').height();
$(window).scroll(function() {
var limit = $('#LinkList236').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20 // Jarak atau margin sticky dari atas
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>
Sumber Code
Advertisement