There are so many blogging platforms in the market, and one of the most widely used blogging platforms is blogger. The blogging platform is owned by Google and the best part is that it is free. In this post, we are going to look at how to hide image in blogger.
If you are thinking of starting a blog on blogger and you have to do is sign up with your Gmail account for free and with just a few clicks, you have created your blog.
Though you still need a custom domain name to make your blog look professional. A blogger blog without a domain name will look like grateful.blogspot.com and when you use a domain name, the Blogspot will be removed from your URL and it will look like grateful.com which is more professional.
Though I have used blogger in the past, before moving over to WordPress because of the ease of customization and numerous plugins and theme. If you are using blogger, you need to know how to add code to your blog and in this tutorial on how to hide featured image in blogger, you will add custom code to your blog.
How to hide image in blogger
There are so many reasons why you want to hide featured image in blogger and no matter the reason following this tutorial will help you to know how to hide image in blog post.
There are plugins that you can use to hide image in blog post in WordPress, with just a few clicks you are done with adding any CSS code but with blogger, it will take few minutes for you to hide featured image in blogger.
Step 1: Go to Blogger Dashboard >> Template >> Edit Html
Step 2: Click anywhere in Html Editor and press CTRL+F from your keyboard then a Search Box will appear in the top right corner of Html Editor.
Copy this code ]]></b:skin> in the Search Box then hit ENTER
Step 3: Copy given below CSS code and paste it immediately below this ]]></b:skin>
<b:if cond=’data:blog.pageType != "index"’>
<style>.hidepic{display: none;}</style>
</b:if>
And Save the Template
Step 4: Upload your new picture or image to your new post and turn editor to Html tab to see the HTML code of the image. Then locate the code for that image which will look like this
<div class=”separator” style=”clear: both; text-align: center;”>
<a href=”https://1.bp.blogspot.com/-xzLvCXCAHVk/XGEBYyRagkI/AAAAAAAAAjw/VIVyNbwCFxg45bCJG907dOmzlyIHQpVpACLcBGAs/s1600/pexels-photo-1068523.jpeg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ data-original-height=”327″ data-original-width=”500″ height=”209″
Step 5: Replace the code highlighted below in caption with code “hidepic”
Following this simple will enable you hide featured image in blogger without affecting your site.
Share with us your experience in the comment section.
