Friday, August 21, 2020

Convert simple Blogger menu to sticky

Convert simple Blogger menu to sticky Hi I have share with you the trick that how we can convert out blogger widget into sticky widget but today I am going to share a trick that we would make our current blogger menu into sticky menu. Generally the purpose of this trick is to make more easier blogger navigation for blog visitors. When a visitors read an article then s/he may goes to bottom of the article page. So if s/he wants to enter into another category then again s/he to go at the top of the page. So if your blog menu sticky then the menu will scroll down with the moving of mouse pointer. As a result your blog visitors don't have to go at the top of the page again and again. So this is very effective to make your blog visitors stay longer with your blog. The coding is made with pure CSS and very easy to add into your blog. Step 1Log into yourBloggerAccountand Go to yourBloggerDashboard Step 2Now click on -Template-Edit HTML Step 3Now Find /bodybypressingCtrl+F Step 4Now paste the below code above/before /body script type='text/javascript'//![CDATA[$(document).ready(function() { / / Determine the element that is made sticky. nav var stickyNavTop = $('.nav').offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); / / condition if discroll it will always be on the menu, and vice versa if (scrollTop stickyNavTop) { $('.nav ').css({ 'position': 'fixed', 'top':0, 'left':0, 'z-index':9999 }); } else { $('.nav ').css({ 'position': 'relative' }); } }; / / Run function stickyNav(); $(window).scroll(function() { stickyNav(); });});//]]/script Step 5And save your template. Customization I have explained this code with .nav but your menu coding may differ. Suppose responsivenav, navbar etc. so replace with those nav words. If you face any problem then feel free to contact with me.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.