I am sure you have noticed in almost all WordPress blog, have each post's featured image on homepage, archive pages, category pages, index pages but not the image that inserted into the post. and the good news is that i have a trick to show the same featured images into
blogspot blog too. Now, you will be able to set a particular featured image to each post in your blogger blog.
Note : It will be work only, if you are using auto read more hack JavaScript in your blog.
Till now in blogger we are using a javascript hack to show the first image of the post as
featured image in the index pages, but after applying this method that i am going to share, In your blogger homepage, user will be able to see a
featured image tag that will be disabled when a user comes into the post to read.
Well, i hope you got my point. Now if you would like to know more about this trick to apply on your blog, just read the following steps.
Also check : Add Background Color or Image in Blogger Posts Using CSS
First log-in with your blogger account. Simply click orange colored button with pencil icon for a new post. Normally write your post and add relevant pictures on it.
Now, before you publish the post, Choose a different featured image that you want to be displayed on index pages. that should be different image than already inserted into the post. Once you have chooses the featured image, you will need to resize the height and width as same as you have set in your javascript so that it look cooler.
Now, Switch to HTML tab. In the beginning, click and upload the featured image that you chooses to be displayed into homepage. (
featured image must be placed at the beginning of the post. so that javascript can detect the image to be display.)
As you can see the in the screenshot above, it is how Image HTML code look like. There is an hyperlink that we will have to remove first. for an example see the following codes.
When you upload the image to your blogger post and Switch to the HTML tab it looks like this :
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7SV6zz3JFrYOPGX6_0ZZmsk5ad8KIqKAZ8FpOStca9jNH0Ce6FiGEnvBgsEEz3QTsFsJ6WPgPvNlUGA0REzNpNQ1-36HUJ8H9ijndtXJOUUX4ggPih5tdzjAhWgVccyaD3cPYUboSFDR6/s1600/Twitter-Buttons-73-13-.png" target="_blank">
<img alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7SV6zz3JFrYOPGX6_0ZZmsk5ad8KIqKAZ8FpOStca9jNH0Ce6FiGEnvBgsEEz3QTsFsJ6WPgPvNlUGA0REzNpNQ1-36HUJ8H9ijndtXJOUUX4ggPih5tdzjAhWgVccyaD3cPYUboSFDR6/s1600/Twitter-Buttons-73-13-.png" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7SV6zz3JFrYOPGX6_0ZZmsk5ad8KIqKAZ8FpOStca9jNH0Ce6FiGEnvBgsEEz3QTsFsJ6WPgPvNlUGA0REzNpNQ1-36HUJ8H9ijndtXJOUUX4ggPih5tdzjAhWgVccyaD3cPYUboSFDR6/s1600/Twitter-Buttons-73-13-.png" /></a></div>
Now, remove the hyperlink form the image then it should be look like this :
<div class="separator" style="clear: both; text-align: center;">
<img alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7SV6zz3JFrYOPGX6_0ZZmsk5ad8KIqKAZ8FpOStca9jNH0Ce6FiGEnvBgsEEz3QTsFsJ6WPgPvNlUGA0REzNpNQ1-36HUJ8H9ijndtXJOUUX4ggPih5tdzjAhWgVccyaD3cPYUboSFDR6/s1600/Twitter-Buttons-73-13-.png" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7SV6zz3JFrYOPGX6_0ZZmsk5ad8KIqKAZ8FpOStca9jNH0Ce6FiGEnvBgsEEz3QTsFsJ6WPgPvNlUGA0REzNpNQ1-36HUJ8H9ijndtXJOUUX4ggPih5tdzjAhWgVccyaD3cPYUboSFDR6/s1600/Twitter-Buttons-73-13-.png" /></div>
Now, we will edit the CSS code of this image to hide it form the post page. to hide this image form the post page, all you have to do is to add
display:none attribute to the image. here see the code below :
<div class="separator" style="display:none;clear: both; text-align: center;">
<img alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7SV6zz3JFrYOPGX6_0ZZmsk5ad8KIqKAZ8FpOStca9jNH0Ce6FiGEnvBgsEEz3QTsFsJ6WPgPvNlUGA0REzNpNQ1-36HUJ8H9ijndtXJOUUX4ggPih5tdzjAhWgVccyaD3cPYUboSFDR6/s1600/Twitter-Buttons-73-13-.png" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7SV6zz3JFrYOPGX6_0ZZmsk5ad8KIqKAZ8FpOStca9jNH0Ce6FiGEnvBgsEEz3QTsFsJ6WPgPvNlUGA0REzNpNQ1-36HUJ8H9ijndtXJOUUX4ggPih5tdzjAhWgVccyaD3cPYUboSFDR6/s1600/Twitter-Buttons-73-13-.png" /></div>
Now, when you Switch back to the compose tab, you will be not able to see that featured image there as we have hidden by adding display:none attribute.
That's it. Now you can publish your article, and visit your blog's homepage. You will see that hidden image as featured image in your homepage and index pages. but not in post page. isn't it good?
Preview of Homepage :- Preview of Post Page :-Drop your comments and questions below :)