Menu

  • Home
  • Latest
  • Trending
  • FORUM
  • Members
  • Announcement
  • Need help?

Who’s Online

There are no users currently online

Categories

  • Android (10)
  • Apps (33)
  • Blogger (22)
  • Computer (10)
  • Cryptocurrency (2)
  • Culinary (1)
  • Download (29)
  • Event (17)
  • Game (3)
  • Internet (17)
  • Laptop (71)
  • OS (8)
  • Peripheral (21)
  • Personal (260)
  • Publisher (3)
  • Review (23)
  • Smartphone (52)
  • Social Media (6)
  • Technology (145)
  • Tips (66)
  • Travel (5)
  • Tutorial (125)
  • Unboxing (17)
  • Video (33)
  • Web (17)
  • Windows (5)
  • Wordpress (14)
  • YouTube (9)

Subscriptions

  • Febri Tri Harmoko
  • Ahmad Imam Arifin
  • Al Annas
  • Ampera 94
  • Arif Sutarlie

Recent News

  • Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android
  • Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome
  • Bagaimana Performa ASUS ZenBook Pro Duo 15 OLED (UX582) – Test Benchmark
XKOMODOTCOM
No Result
View All Result
  • Account
XKOMODOTCOM
XKOMODOTCOM
Home Web Blogger
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
9 years ago
in Tutorial, Blogger
1
0
ASUS Online Store Official Indonesia ASUS Online Store Official Indonesia ASUS Online Store Official Indonesia
1.1k
VIEWS
ShareTweet

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 🙂

RelatedPosts

Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android

Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome

Cara Login Modem ZTE F609 IndiHome Terbaru (Username dan Password Admin)

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

Just content creator

Related Posts

Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android
Android

Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android

February 1, 2023
12
Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome
Internet

Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome

February 2, 2023
35
Cara Login Modem IndiHome ZTE F609 Terbaru
Tutorial

Cara Login Modem ZTE F609 IndiHome Terbaru (Username dan Password Admin)

November 19, 2022
452.2k
Cara Buka Situs yang Diblokir Tanpa Aplikasi Tambahan di Android
Video

Tutorial Cara Buka Situs yang Diblokir Tanpa Aplikasi Tambahan di Android (VPN/DNS Pribadi) – 100% Pasti Berhasil!

February 2, 2023
75
Cara Setting VPN Gratis di Windows (PC / Laptop)
Tutorial

Cara Setting VPN Gratis di Windows (PC/Laptop)

October 5, 2022
39
Cara Setting VPN di Android Tanpa Aplikasi Tambahan
Internet

Cara Setting VPN di Android Tanpa Instal Aplikasi Tambahan 100% WORK!

September 30, 2022
515
Next Post
ASUS Zenfone Smartphone Terbaik

ASUS ZenFone: Smartphone Android Terbaik

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

© 2023 XKOMODOTCOM

  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions

© 2023 XKOMODOTCOM

No Result
View All Result
  • Account
XKOMODOTCOM
  • MENU
  • Home
  • Latest
  • Trending
  • FORUM
  • Members
  • Announcement
  • Need help?
  • CATEGORIES
  • Cryptocurrency
  • Download
  • Event
  • Internet
    • Social Media
  • Personal
    • Culinary
    • Travel
  • Publisher
  • Review
  • Technology
    • Apps
    • Computer
    • Game
    • Laptop
    • OS
      • Android
      • Windows
    • Peripheral
    • Smartphone
  • Tips
  • Tutorial
  • Unboxing
  • Web
    • Blogger
    • WordPress

© 2023 XKOMODOTCOM

Link Start!

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

Add New Playlist