Guide | How To Practice A Glutinous Or Floating Widget Inwards Blogger.

Guide | How to Create a Sticky or Floating Widget inwards Blogger.

Make a Sticky Widget. What is a mucilaginous widget? This is a floating or fixed widget that volition remain on your page if visitor scroll downward the page to persuasion to a greater extent than spider web log content. So, your mucilaginous widget volition non disappear on your page when the page is scrolled down. So, the visitor's attending volition live on focused on your mucilaginous widget. Use this widget to display your ain content only, or create a clear spider web log navigation. Don't endeavor to display whatever ads which prohibit the publisher embed the ads code using the mucilaginous widget. 

The next guidelines alone run on Blogger-based spider web platforms. So, if yous want to endeavor applying this guide on the other spider web based platform it may non live on working properly. This is a uncomplicated chore yous tin dismiss practice yesteryear yourself, only lead the desired widget on your blog. Selected widget volition live on visible all the fourth dimension on your page during the visitor scrolled your spider web log page. 

This guide applicable on every widget or chemical ingredient that has an Html ID. If yous wishing to role this clit a fast 1 on on your spider web log page, yous tin dismiss read to a greater extent than educational activity below.

Install a Sticky Widget.

1. Log inwards to your spider web log account.
2. Then, Select the spider web log yous want to create a mucilaginous widget inwards it.
3. Click layout menu on your spider web log dashboard.
4. Specify where yous want to house a mucilaginous widget on your spider web log page, yous tin dismiss position the widget at sidebar or at the spill out of your post. 
5. For example, nosotros volition create an HTML or coffee script widget that volition seem inwards the sidebar. the HTML code is shown below.

<div style="width:300px;height:250px;border:1px enterprise #3103fb;"><h2>My Widget</h2></div>

6. If yous convey successfully created this widget, the widget should expect similar this.

   

   sticky widget

7. Now, locomote your HTML ID for the widget. How to practice it? See this guide to uncovering a Widget Id
• For instance your widget HTML ID is HTML9
8. Then re-create together with glue the next code into your HTML template. Put this code to a higher house the </body> tag,

<script> // Sticky widget yesteryear Bloggersentral.com // Tutorial at asds/search?q=guide-how-to-find-any-blogger-widget-id  // Free to role or share, but delight locomote along this notice intact. //<![CDATA[ bs_makeSticky("YOUR_WIDGET_ID"); // come inwards your widget ID hither portion bs_makeSticky(elem) {     var bs_sticky = document.getElementById(elem);     var scrollee = document.createElement("div");     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);     portion bs_sticking() {         var rect = scrollee.getBoundingClientRect();         if (rect.top < 0) {             bs_sticky.className = iniClass + ' bs_sticking';             bs_sticky.style.width = width + "px";         } else {             bs_sticky.className = iniClass;         }     } } //]]> </script>  <style> .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;} </style> 

9. Then replace YOUR_WIDGET_ID with your ain HTML ID, instantly the code volition alter with; 
• bs_makeSticky("HTML9");
10. Than, click save theme inwards your spider web log edit template.
11. Before click back, brand certain to preview the upshot on your spider web log page.
12. Finish, expert luck to applied a mucilaginous widget on your spider web log post.

Video Guide.

How to Create a Sticky or Floating Widget inwards Blogger.