How To Creat Sticky Sidebar Widget-100% Working Tips - Gourab Design

How To Creat Sticky Sidebar Widget-100% Working Tips


Hi friends. By the way, you all have one website. And in that you want to do such a theme which also has a sidebar.Well there are lots of themes available in Google that are free. And also premium But everyone has a sidebar, but not friendly. Todays post we are discussing How To Creat Sticky Sidebar Widget-100% Working Tips .

It's very important to have friends And nowadays all the Sticky menus seem to be on her blog. This is also important in the same way.

Because after installing it you can promote anything in your website. And you can also put a adsense ads.So now you have come to know not how important it is. So what are you thinking now? Does it have to be installed or not?.

Relationship advice From Pyar Me India

creat sticky sidebar widget in blogger

If your answer is yes, then let's tell you the full process. Very simple And I'll give you some nice tips.By following that you will be able to find it comfortably by following it. Without any problems. So let's start now.

You can add anything on your website. Here you can add the subscribe button too. And you'll add adsense ads it too. Which means your income will be very much. And also much more

Creat Sticky Sidebar Widget In Blogger

The way I am telling this is for those people who can not add it properly. And I'm writing about this problem Solution.

👉First you going the your blogspot dashboard.
Then TEMPLATE option. Now see right side EDIT HTML option. Simply click it.

Now press Ctrl-F . Search box. And search </body> tag. You can find this code end of template.

👇Copy this code bellow here. And paste it Above on </body> tag .👇

<!-- Credit By Gourab Design-->
<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> 
<!-- End This Credit By Gourab Design-->

How To Creat Floating Sticky Sidebar In Blogspot

 Please note to all :- Replace #HTML1 TO YOUR WIDGET ID.

Vistors if you showing to this awesome looking in mobile version. So simply replace false with true on first line in above script ok.

Also read :- 404 custom error page Problem Solution

Finnaly replace also footer-wrapper with your footer wrapper unique id.

Add bellow script on css code  for widger settings.

&lt;b:if cond='data:blog.isMobileRequest == &amp;quot;false&amp;quot;'&gt; #HTML1{width:100%;max-width:300px;text-align:center;} &lt;/b:if&gt;

 Finally you are 100% done😋😋. Visit your website and see the result.

If you have any problem then please tell me I will help you immediately.If there are any questions in the mind then it is ask me ok? And Share this post to all social site. Thank you guys.

No comments