Rizky

Cara Bikin Floating Widget

<div class="tr_bq" style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: justify;">Elements that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” floating widgets that stick to your screen as you scroll and tend to have a higher click through rate. This is the reason why at MyBloggerLab, we are using a Floating subscription widget in the sidebar that has been quite useful for us. Many of our users kept on emailing us about how they can create a “Sticky” floating sidebar widget in Blogger. In the past, we have already shown you <a href="http://www.mybloggerlab.com/2012/09/how-to-create-floating-sticky-footer.html" style="color: #2f6986; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">how to make a Sticky Floating Footer bar in Blogger</a>. In this article, we will show you how to create a floating “sticky” Sidebar widget in Blogger?</div><div style="text-align: justify;"><a href="http://www.blogger.com/blogger.g?blogID=1611325994739357484" name="more" style="background-color: white; color: #2f6986; font-family: lora; font-size: 14px; line-height: 25.1875px; list-style: none; margin: 0px; outline: none; padding: 0px;"></a> </div><div style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: justify;">Remember: This works pretty well with all kinds of widgets present in your sidebar. It is not necessary that a person can only use if for email subscription boxes. You can use it for promotion of your items, galleries, <a href="http://www.mybloggerlab.com/2012/10/customize-blogger-popular-post-widget.html" style="color: #2f6986; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">popular posts</a>, <a href="http://www.mybloggerlab.com/2013/05/ow-to-easily-embed-instagram-photos-in-blogger.html" style="color: #2f6986; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Instagram photos</a>, and basically everything that you wish for. </div><div style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: justify;"> </div><div style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: justify;"><h4 style="font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">Step#1: Adding a New Widget: </h4>The First thing you need to do is to add a new widget in your sidebar so that later on you can make it sticky. Go to Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript >> and name the widget as “My Sticky Gadget”. Now writing anything in the HTML body and once everything is down press “Save” button located at the end of the page.</div><div style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: justify;"> </div><div style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: justify;"><h4 style="font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">Step#2: Installing a “Sticky” Plugin:</h4>Now after properly adding a new widget in your blog, it’s time for some serious work. This time go to Template >> Edit HTML >> and search for the ending </body> tag and just above it paste the following JavaScript code. <blockquote class="tr_bq" style="-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px; background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-width: 1px; color: black; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; line-height: 18px; margin: 0px 20px; overflow: hidden; padding: 10px 20px 10px 45px;"><script> /*<![CDATA[*/ // Sticky Plugin // ============= // Author: Syed Faizan Ali (function($) {     var defaults = {             topSpacing: 0,             bottomSpacing: 0,             className: 'is-sticky',             center: false         },         $window = $(window),         $document = $(document),         sticked = [],         windowHeight = $window.height(),         scroller = function() {             var scrollTop = $window.scrollTop(),                 documentHeight = $document.height(),                 dwh = documentHeight - windowHeight,                 extra = (scrollTop > dwh) ? dwh - scrollTop : 0;             for (var i = 0; i < sticked.length; i++) {                 var s = sticked[i],                     elementTop = s.stickyWrapper.offset().top,                     etse = elementTop - s.topSpacing - extra;                 if (scrollTop <= etse) {                     if (s.currentTop !== null) {                         s.stickyElement.css('position', '').css('top', '').removeClass(s.className);                         s.currentTop = null;                     }                 }                 else {                     var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;                     if (newTop < 0) {                         newTop = newTop + s.topSpacing;                     } else {                         newTop = s.topSpacing;                     }                     if (s.currentTop != newTop) {                         s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);                         s.currentTop = newTop;                     }                 }             }         },         resizer = function() {             windowHeight = $window.height();         };     // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):     if (window.addEventListener) {         window.addEventListener('scroll', scroller, false);         window.addEventListener('resize', resizer, false);     } else if (window.attachEvent) {         window.attachEvent('onscroll', scroller);         window.attachEvent('onresize', resizer);     }     $.fn.sticky = function(options) {         var o = $.extend(defaults, options);         return this.each(function() {             var stickyElement = $(this);             if (o.center)                 var centerElement = "margin-left:auto;margin-right:auto;";             stickyId = stickyElement.attr('id');             stickyElement                 .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')                 .css('width', stickyElement.width());             var elementHeight = stickyElement.outerHeight(),                 stickyWrapper = stickyElement.parent();             stickyWrapper                 .css('width', stickyElement.outerWidth())                 .css('height', elementHeight)                 .css('clear', stickyElement.css('clear'));             sticked.push({                 topSpacing: o.topSpacing,                 bottomSpacing: o.bottomSpacing,                 stickyElement: stickyElement,                 currentTop: null,                 stickyWrapper: stickyWrapper,                 elementHeight: elementHeight,                 className: o.className             });         });     }; })(jQuery); /*]]>*/ </script> <script type='text/javascript'>    $(document).ready(function(){     $("#mblfloater").sticky({topSpacing:0});    }); </script></blockquote> </div><div style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: justify;"><h4 style="font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">Step#3: Creating a Widget “Sticky” in Blogger:</h4>After adding the JavaScript code, you have to search for the name of your widget. Since, we have named it as "My Sticky Gadget". Therefore, in the template coding search for "My Sticky Gadget". To be able to search correctly it is essential that you must use the built-in search box provided by the Blogger template editor. Note: To enable the search box click anywhere in the template editor and press"CTRL+F". Now on finding "My Sticky Gadget" you will able to see a code similar to the the following one. <blockquote class="tr_bq" style="-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px; ; background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-width: 1px; color: black; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; line-height: 18px; margin: 0px 20px; overflow: hidden; padding: 10px 20px 10px 45px;"><b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>             <b:includable id='main'>      <b:if cond='data:title != &quot;&quot;'>     <h2 class='title'><data:title/></h2>   </b:if>   <div class='widget-content'>     <data:content/>   </div> </b:includable>           </b:widget></blockquote> Now after finding the code as mentioned above, just replace it completely with the following coding. <blockquote class="tr_bq" style="-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px; background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-width: 1px; color: black; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; line-height: 18px; margin: 0px 20px; overflow: hidden; padding: 10px 20px 10px 45px;"><b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>             <b:includable id='main'> <div id='mblfloater'>      <b:if cond='data:title != &quot;&quot;'>     <h2 class='title'><data:title/></h2>   </b:if>   <div class='widget-content'>     <data:content/>   </div>  </div> </b:includable>           </b:widget></blockquote> Remember: The ID of your widget should be unique. For example, if you are usingid='HTML32' in any of your widget then you cannot use the same ID for others. All done: Once everything is done, press the "Save Template" button to finish the process. Sticky floating sidebar widgets can bring a lot of growth in your sign ups. They help in increasing user engagement. You can also use multiple floating widgets in sidebar. However, this act might annoy your visitors. Make sure you have a balanced design, so that it don't annoy your users. <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9MkGu392cGnNQAadLqYF9o519a6bANuDydc6B9sRTrWFfUjrEhqtY65PqH_VRfNs23cy6NmXnffOdu7fI1SV7fxzMheAPYhLQ_Y0vCkx7xVm-SUHdoyE9yuq6mZMJQqbTUEUddBbus44/s1600/How-to-Create-a-Floating-Sticky-Sidebar-Widget-in-Blogger.png" style="background-color: transparent; text-align: center;" /></div>

Cara Bikin Floating Widget

Elements that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” floating widgets ...