XKOMODOTCOM
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING
  • Profile
No Result
View All Result
XKOMODOTCOM
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING
No Result
View All Result
  • Profile
XKOMODOTCOM
Tutorial Membuat Widget Melayang Ketika di Scroll Kebawah - Sticky Widget Sidebar di Blogspot/Blogger

Tutorial Membuat Widget Melayang Ketika di Scroll Kebawah – Sticky Widget Sidebar di Blogspot/Blogger

Febri Tri Harmoko by Febri Tri Harmoko
8 years ago
in Tutorial, Blogger
1
0
0
SHARES
958
VIEWS
ShareTweet

BACAJUGA

Cara Setting Private / Public DNS di Android / PC / Laptop (Provider Hostname Terlengkap)

Solusi Tidak Bisa Main Game Online dengan Internet IndiHome

Kali ini saya akan memberikan tutorial mengenai Membuat Widget Melayang Ketika di Scroll Kebawah – Sticky Widget Sidebar di Blogspot/Blogger.

Sticky Widget ini bukan hanya bisa di gunakan pada widget yang ada pada sidebar saja namun semua widget yang ada pada blog kita termasuk Menu pada Header 🙂

Untuk lebih jelas nya silahkan kamu pelajari saja code nya dalam artikel ini.

Tutorial Membuat Widget Melayang Ketika di Scroll Kebawah

untuk membuat Sticky widget ini kita hanya perlu membuat CSS & JavaScript saja, simple kok mudah untuk di pahami.

Cara Membuat Widget Melayang Ketika di Scroll Ke Bawah

Tahap pertama kita bikin CSS nya, Tambahkan Code CSS berikut di atas </style> atau ]]></b:skin>

.sticky {
  position:fixed;
  top:10px;/* jarak dari atas*/
  z-index: 100;
}

Tahap Kedua tambahkan Javascript, Tambahkan Code Javascript berikut di atas </body>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML5').offset().top; 
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();     
if (scrollTop > stickyWidgetTop) { 
    $('#HTML5').addClass('sticky');
} else {
    $('#HTML5').removeClass('sticky'); 
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>
Penting: Ganti #HTML5 dengan kode element widget yang ingin di sticky.

#HTML5 ini bisa kamu ganti dengan element apa saja bukan hanya widget pada sidebar saja 🙂 silahkan berkreasi sendiri dengan Sticky widget ini 🙂

Untuk kamu yang masih merasa bingung bisa tanya atau kita diskusikan di kolom komentar.

Reference: http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html
Tags: BlogCodingCSSHTMLWidget
ShareTweet
Previous Post

Tutorial Cara Mengubah Warna Background Selected Text Pada Blog

Next Post

ASUS ZenFone: Smartphone Android Terbaik

Febri Tri Harmoko

Febri Tri Harmoko

Hanya pemuda tersesat yang gemar menulis dan berbagi informasi di internet dan juga gemar membaca komik, nonton anime dan pencinta kucing sejati pastinya.

Related Posts

Cara Setting Private atau Public DNS di Android - PC - Laptop
Internet

Cara Setting Private / Public DNS di Android / PC / Laptop (Provider Hostname Terlengkap)

3 weeks ago
238
Solusi Tidak Bisa Main Game Online Dengan Internet Indihome
Tips

Solusi Tidak Bisa Main Game Online dengan Internet IndiHome

3 weeks ago
24.4k
Cara Login Akun Admin Modem IndiHome Huawei HG8245H
Tutorial

Cara Login Akun Admin Modem IndiHome HUAWEI HG8245H / HG8245A

1 month ago
195.6k
Cara Login Modem IndiHome ZTE F609 Terbaru
Tutorial

Cara Login Modem IndiHome ZTE F609 / F660 (Username & Password)

1 month ago
270.4k
Cara Mengatasi Warna Background Putih Menjadi Kuning di Windows
Windows

Cara Mengatasi Warna Background Putih Menjadi Kuning di Windows

1 month ago
12
Cara Mengganti DNS Google - Cloudflare di Windows PC atau Laptop
Windows

Cara Mengganti DNS Google / Cloudflare di Windows (PC/Laptop)

2 months ago
168
Load More
Next Post
ASUS Zenfone Smartphone Terbaik

ASUS ZenFone: Smartphone Android Terbaik

Please login to join discussion
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions
Advertise with us

© 2014 - 2022 XKOMODOTCOM — Made With in Indonesia

No Result
View All Result
  • Profile
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING

© 2014 - 2022 XKOMODOTCOM — Made With in Indonesia

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.