$show=home

$type=ticker$count=12$cols=4$cate=0$show=post$hide=mobile

$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home$ic=show

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

Hi Bloggers :)
     Kali ini saya +Febri Tri Harmoko  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 - Sticky Widget Sidebar di Blogspot/Blogger

      untuk membuat Sticky widget ini kita hanya perlu membuat CSS & JavaScript saja. Simple kok mudah untuk di pahami :) ok. kita langsung masuk ke topik nya yah ...
# 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>

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. :keren
Sumber :
- http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html

Warning :
- Di larang Keras Copy Paste Artikel ini secara keseluruhan jika ingin repost harap gunakan bahasa sendiri dan mencantumkan sumber link ke sini ;) ingat DMCA Google yah :wee

Original Article by Blog X Komo

COMMENTS

BLOGGER
Mengingat blog x komo akan pindah platform dari blogger ke wordpress, jika kamu punya pertanyaan atau request update artikel silahkan join ke sini https://blog.xkomo.com/forums.
Silahkan Bookmark blog saya yang baru ya, karna kedepan blog ini akan di hapus.
Name

Accessories,5,All Weapon,4,Android,36,Anime,1,App,8,ASUS,41,ASUS Zenfone,7,Blogger,33,Clash Of Clan,2,Computer,3,CSS,6,Documentary,5,dr. Zen,2,Event,10,Facebook,15,Firmware,23,Game,9,Gemscool,1,Google,6,Google Adsense,2,Hardware,2,Internet,6,Jambi,2,Javascript,1,Komputer,3,Laptop,2,Mouse,3,Mouse Gaming,1,Mouse Macro,6,News,40,Ninja Saga,2,Notebook,4,Padfone S,1,Point Blank,1,Press Release,8,Preview,12,Review,27,Root,13,Script,3,SEO,3,Shotgun,1,Smartphone,18,Template,1,Theme,3,Tips & Tricks,2,Troubleshooting,1,Tutorial,44,Unboxing,4,Video,10,Widget,8,Windows,2,ZenEar,1,Zenfestival,1,Zenflash,1,Zenfone 2,5,Zenfone 2 Deluxe,2,Zenfone 2 Laser,9,Zenfone 3,3,Zenfone 3 Laser,1,Zenfone 3 Max,3,Zenfone 3 Zoom,1,Zenfone 4,2,Zenfone 5,5,Zenfone 6,9,Zenfone Go,1,Zenfone Max,1,Zenfone Selfie,3,Zenfone Zoom,3,ZenHow,1,ZenPad,2,Zenpower,2,Zentalk,2,Zenvestival,3,Zenvolution,1,
ltr
item
BLOG X KOMO: 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
Tutorial Membuat Widget Melayang Ketika di Scroll Kebawah - Sticky Widget Sidebar di Blogspot/Blogger
http://4.bp.blogspot.com/-O-jw2lrcM9k/U8Y2DHmT5DI/AAAAAAAABsA/DBNDxoKDaNM/s1600/capture-20140716-152050.png
http://4.bp.blogspot.com/-O-jw2lrcM9k/U8Y2DHmT5DI/AAAAAAAABsA/DBNDxoKDaNM/s72-c/capture-20140716-152050.png
BLOG X KOMO
http://www.xkomo.com/2014/07/tutorial-membuat-widget-melayang-ketika-di-scroll.html
http://www.xkomo.com/
http://www.xkomo.com/
http://www.xkomo.com/2014/07/tutorial-membuat-widget-melayang-ketika-di-scroll.html
true
4848727032668058109
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy