Skip to main content

How to Show Blogger Images only in Homepage and Hide from Post Page


Do you want to know how to add a custom posts thumbnail in blogger or how to hide a specific picture/image from blogger posts and make them visible on your blogger homage as Thumbnails. On other platforms like WordPress while creating a post there is an option to choose a specific picture/image to show as thumbnail on your blog homepage for that post. This feature makes a first look to reader or blog visitor about every post and make our homepage user-friendly. If you are blogger and annoying to create this specific thumbnail for every single post. We can easily make this function and hide pictures for thumbnail from our post and make them visible to homepage. For this purpose you have to follow the tutorial.

Step 1: Go to Blogger Dashboard  >>  Template >> Edit Html

show blogger images only in homepage and remove from post page


Step 2: Click anywhere in Html Editor and press CTRL+F from your keyboard then a Search Box will be appear in top right corner of Html Editor.

show blogger images only in homepage and remove from post page


Step 3: Copy this code and paste in Search Box then hit ENTER
]]></b:skin>
Step 4: Copy given below CSS code and paste it immediately below this    ]]></b:skin>


<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style>
.hideimage{
display: none;
}
</style>
</b:if>


And Save the Template

Step 5:  Every time while you will create a new post then add your image/picture first and then turn editor to Html

show images on homepage and hide on post page


Then locate the code for that image which will look like that

Note: this html code for your image can be located anywhere according where you have uploaded that image in post’s Start, Middle or End

Step 6: Replace the code highlighted below in caption with code “hideimage

show images on homepage and hide on post page


Now that’s all specific thumbnail for a blog post option have created on your blog you have to repeat for every new single post.

For any help or assistance please comment below or go to Contact and submit me your problem or question.


Video Tutorial:


Other useful Posts:

                            How to Remove Powered by Blogger Attribution  
                            How to Remove Quick Edit and Wrench Icons in Blogger


Popular posts from this blog

How to Create Calculator in JavaScript

JavaScript is vast programming language through which you can create any web application. JavaScript use in every single element on web application. Means that use of java script in web programming is necessary. Using JavaScript you make online calculator, online currency converter or anything which you want you can build in JavaScript which works online and offline on your web page. As you know calculator is a basic necessary element in our life. For example if you want to find the percentage of your income then you'll need to use calculator for calculation. In this tutorial i am gonna show you that how to create calculator in JavaScript. You can also stylize this calculator source code by using CSS style sheet according to your requirements. Calculator in JavaScript Calculator JavaScript Code <h2>Calculator in Javascript</h2> <br/> <form Name="calculator"> <table border=2> <tr> <td colspan=4><input type=text

Get Free Complete CMS in PHP OOP

Before going to share complete CMS in PHP OOP I want to show you that what is CMS? CMS means Content Management System. CMS is web application or program which is used to manage or create content. In this blog post I am going to share complete CMS in PHP OOP with source code which is easily downloadable and executable. The source code is a backlink free code. You can use this code for any CMS Project. In CMS there are two units, first is front end WEBSITE for users and second is back end which is Admin Panel. Admin Panel is a gateway for administrator from which administrator can login to and made changes according to its requirements. How to execute PHP OOP CMS? For that purpose you have need to install XAMPP or WAMP on your system. You can download these software from official websites the links are given    XAMPP  or WAMP .  After installation, download CMS source code file and paste in HTDOCS folder which is located in xamp/wamp installation folder. After that open yo