How To Create Sticky Sidebar Widget 100% Genuine
How To Create Sticky Sidebar Widget
How To Create Sticky Sidebar Widget 100% Genuine
So you can use this sticky sidebar widget for blogger, to promote your most important posts, affiliate links, advertisement and get 100% better results. We are seen many bloggers use sticky menu bar, but we recommended to used this sticky sidebar on yours blog.
Now Learn Advantage Of Sticky Widget.π
Increases the click through rate (CRT)
Useful for increasing Ad-sense Revenue.
Use Sticky Email newsletter subscription widget for getting more subscribers.
Forces users to check your contents by Viewing the content on part of the pages.
How to Create Sticky Sidebar Widget in Blogger ⌛
In this trick only for newbie bloggers who are faced with problem to create sticky-bar widget.
πNeed Layout section.follow π
Go to Blogger Dashboard > Template > HTML Editor.Search for </body> you can find this at the end of template.Then just paste below script just above or before </body>.
Next Paste the Given Below parsed Code On Above/Before On </body> Tag.
<!-- Sticky Sidebar Widget By Webduniya-->
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><script type='text/javascript'>//<![CDATA[$(function() { if ($('#HTML1').length) { // Ganti "#sticky-sidebar" dengan ID tertentu var el = $('#HTML1'); var stickyTop = $('#HTML1').offset().top; var stickyHeight = $('#HTML1').height(); $(window).scroll(function() { var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper" var windowTop = $(window).scrollTop(); if (stickyTop < windowTop) { el.css({ position: 'fixed', top: 65 // Jarak atau margin sticky dari atas }); } else { el.css('position', 'static'); } if (limit < windowTop) { var diff = limit - windowTop; el.css({ top: diff }); } }); }});//]]></script> </b:if>
<!-- Sticky Sidebar Widget By Webduniya -->
Please Note* Replace #HTML1 with your widget id.
If you want to show sticky widget in mobile then simply replace false with true on first line of script.
Finally : Need To Be Replace footer-wrapper with your footer wrapper id.
<b:if cond='data:blog.isMobileRequest == "false"'> #HTML1{width:100%;max-width:300px;text-align:center;} </b:if>
Voila ; Click To Save And Check Your Blog. Ha Ha ππ
If You Have Any Ideas, Article About Questions Then Feel Free To Comment Below We Will Reply Soon As Possible Your About Query.Thank You For Reading Our Blog ππ
Keep It Up.