Menu

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

Categories

  • Android (17)
  • Apps (39)
  • Blogger (22)
  • Computer (10)
  • Cryptocurrency (2)
  • Culinary (1)
  • Download (30)
  • Entertainment (1)
  • Event (17)
  • Game (3)
  • Internet (21)
  • Laptop (74)
  • News (3)
  • OS (16)
  • Peripheral (25)
  • Personal (259)
  • Publisher (3)
  • Review (23)
  • Smartphone (56)
  • Social Media (7)
  • Tablet (1)
  • Technology (159)
  • Tips (79)
  • Travel (5)
  • Tutorial (138)
  • Unboxing (18)
  • Video (48)
  • Web (27)
  • Windows (6)
  • Wordpress (20)
  • YouTube (22)

Tags

Advertise Android Android 4 KitKat Android 9 Pie ASUS Bardi Blog Coding Competition CSS ExpertBook Firmware Game Mobile Google Google Play Store HTML IndiHome Laptop Bisnis Laptop Gaming Plugins Press Release Republic of Gamers ROG Phone Smart Home Smartphone Gaming Spesifikasi dan Harga Technology Troubleshooting Update Upgrade VivoBook VPN WhatsApp Widget Youtube Zenbook Zenfone Zenfone 3 Zenfone 3 Max Zenfone 4 Zenfone 5 Zenfone 6 Zenfone Max Zenfone Max Pro M1 Zenfone Zoom S
XKOMODOTCOM - Sharing is Caring
No Result
View All Result
  • Account
XKOMODOTCOM
XKOMODOTCOM - Sharing is Caring
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
0
SHARES
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

Cara Mengatasi Komentar Spam di Website WordPress

Daftar Kata Komentar yang Wajib Diblokir Supaya Website Terhindar dari Spam

Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan!

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

Cara Mengatasi Komentar Spam di Website WordPress
Wordpress

Cara Mengatasi Komentar Spam di Website WordPress

March 23, 2023
25
Daftar Kata Komentar yang Wajib Diblokir Supaya Website Terhindar dari Spamming
Wordpress

Daftar Kata Komentar yang Wajib Diblokir Supaya Website Terhindar dari Spam

March 23, 2023
23
Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan
Apps

Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan!

March 13, 2023
101
Tutorial Cara Format Disk lewat DiskPart, Kamu Bisa Menghapus Data Tanpa Aplikasi di Windows
Tutorial

Tutorial Cara Format Disk lewat DiskPart Terbaru, Kamu Bisa Menghapus Data Tanpa Aplikasi di Windows (Laptop/Komputer/PC)

March 7, 2023
28.6k
Cara Upgrade Android 13 ROG di Phone 6/6 Pro (AI2201) via FOTA (Firmware Over-The-Air)
Android

Cara Upgrade Android 13 di ROG Phone 6/6 Pro (AI2201) via FOTA (Firmware Over-The-Air)

March 3, 2023
156
Cara Membuat Website di Jagoan Hosting
Wordpress

Cara Membuat Website WordPress di Jagoan Hosting, 100% Mudah dan Cepat untuk Pemula!

February 26, 2023
67
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
  • Sitemap
  • Terms & Conditions
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Sitemap
  • 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