How to Hide/Show Widget of Blogger in Mobile View

Blogger is very good platform for hobby blogging. It is free, Powered by Google, What else a digital geek want, In my opinion, It is enough to use blogger as your first blogging platform. If you get the experience then you can change it to WordPress (more Customization).

In blogging, Personalization is very necessary to stick your readers to your writing and UI also have it's own impact in it.

Blogger have it's own pros and cons. Sometimes When you choose a responsive theme and do some customization in it like, Fix a Sidebar or Delete a Sidebar. Then there some issue arise. Like as I fix the sidebar of my theme and when I open it in mobile then I am unable to reach the footer of the blog.

This was not  just a simple problem, it is a very big one which you can only understand When you face the problem.


Solution:-

For the solution, You should first know the Rogue. In my theme I decided to Remove the Sidebar. Which I earlier make sticky in desktop. That is the main reason behind the problem.

For the solution you should have a little bit knowledge of html, then proceed.

First Log In into the blogger dashboard then click on theme from the left  menu

In it there is an option to edit theme then you will see the coding dashboard.



So Here are two Method


First:- If you use Native blogSpot theme then You can easily remove the widget by adding simply

           mobile="no" Attribute in the widget div.



Widget code before.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>


and After adding it will look like.


<b:widget id='PopularPosts1' locked='false' title='Popular Posts' mobile='no' type='PopularPosts' version='1'>


It will help you but If it not works then Use the second Method.



Second :- For using this You should first go to the theme menu and click on the customized.

                 After customized click on advanced and their should be a option of add css.



Then add the below CSS in it.



@media (max-width: 800px) { #PopularPosts1 { display: none; } }


Where Max width is the width when a widget will show you can change it as per your requirement.

The Main thing is #PopularPosts1. You should add the Widget id Here.

This method will work with all kind of theme. 

No comments

Powered by Blogger.