Home Blogger Tips Blogger Widgets Sticky

Blogger Widgets Sticky

43
2
SHARE
Blogger Widgets Sticky

When a traveler (User) scrolls down your web log to look at additional content, the higher portion of your web log goes out the window from the highest to form manner for the lower portion that enters from rock bottom. Everyone who uses Excel is aware of an option available in it. We can easily freeze panes! Here in this article we are sharing the trick to freeze blogger widgets and make them sticky.

Check out more Blogger Tips That will definitely help you achieving your goals

Now what we tend to our planning to do is stick your chosen gizmo (Widget) to the highest fringe of the window because it is getting ready to leave, so creating the gizmo (Widget) visible the least bit time whereas the traveler scrolls. it’ll float there till its original location comes back once the page is scrolled.

This trick is applicable to any gizmo (Widget) or part that has an ID, no matter its location on your web log. it’s excellent for navigation bar, subscription box and social media sharing buttons.

Blogger Widgets Sticky

How to make Blogger Widgets Sticky

Paste the subsequent code on top of the </Body> tag in your Blogger Template

Or if you favor to not bit the example, you’ll be able to merely paste it in a very HTML/JavaScript (in Blogger) or a Text gizmo (in WordPress). If you select this route, check that you position this gizmo below (after) the gizmo that you just wish to create sticky.

 

Also See- HTML/Javascript as Plain Text in Blogger Post like below box

&amp;lt;/pre&amp;gt;
&amp;lt;script&amp;gt;
// Sticky widget by Technoratan.in
// Tutorial at http://technoratan.in/blogger-tips/make-blogger-widgets-sticky/ // Free to use or share, but please keep this notice intact.
//&amp;lt;![CDATA[
bs_makeSticky(&amp;quot;YOUR_WIDGET_ID&amp;quot;); // enter your widget ID here
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement(&amp;quot;div&amp;quot;);
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top &amp;lt; 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + &amp;quot;px&amp;quot;;
} else {
bs_sticky.className = iniClass;
}
}
}
//]]&amp;gt;
&amp;lt;/script&amp;gt;
&amp;lt;style&amp;gt;
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
&amp;lt;/style&amp;gt; 

Get the ID of the widget or Gizmo you want to make sticky or freeze widget,

Find “YOUR_WIDGET_ID”. For example if the widget ID is HTML9, then code would look as bs_makeSticky(“HTML9”);

Please have a preview before you save your Blogger Template

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

CommentLuv badge