How to Remove Click Trap From Blogger Preview

Being a Blogger Developer or a common user, upon previewing your template or posts you might have noticed a click trap present there to stop you from clicking anywhere in the entire blog post. Recently, one of our users asked us that how to disable or remove click trap from blogger previews. It’s a fact that we all want to cross check our posts before putting them live on our blog, but the click trap produces amount disturbance that is certainly beyond the explanation.  Today in this article, we will show you how to remove the click trap from Blogger Preview.

What is Blogger Preview Click Trap:

Basically, it’s a layer build with CSS that prevents users from clicking anywhere in the website. There are no strong reasons why Blogger has implemented this trap. But Since Blogger is an open source CMS system so with some minor tweaks we can shape it according to our liking.

To find the click trap in blogger, you would need Google Chrome with Developer tools (comes built-in).  Go to Blogger ›› New Posts ›› Preview ›› Press F12  to open the developer tools and look for “blogger-clickTrap” in the chunk of HTML Coding. Check out the following screenshot for assistance:

How to Remove Click Trap from Blogger Preview:

To remove click trap from blogger all you need to do is to add the following piece of CSS coding into your blogger template this will override the default CSS and would remove the click trap from your blog.

Paste the following code above ]]></b:skin> tag in Blogger Template.

.blogger-clickTrap {
    display: none!important;
 }

We hope this tutorial helps you in removing the click trap from the blogger preview as it works with both custom and default blogger templates. Few designers, already include this code in their themes, but a few don’t. Do share your thoughts, If you like this post do not hesitate to share it on Facebook, Twitter, Google+.