Oct 21, 2015

How To Add Featured Images To Blogger Posts

data:blog.title
This article will be very helpful for Bloggers in keeping pace with WordPress. Featured images better known as post thumbnails are a popular feature that every blogger adores to have in his Blogger Template. Here you will be told how to add a facility of featured images to your posts. If you are not a coder, you don’t need to worry about it. I am providing you with a code that you can add at a particular location with a little amendment. After acting upon the instructions, you will be able to modify your Blogger’s script according to your own choice.

For example, WordPress provides you with a facility to add featured images in your posts. For this purpose, you just need to upload your image, set it  as a featured image and enjoy it as a representative of your post. But in case of Blogger, coding is essential.

Today most of the quality Blogger templates support custom post thumbnails functionality. Some popular Blogger development websites like Templateism and Themeforest have some standards of keeping this feature must. However, some new developers as well as users don’t have any idea how to setup a feature image or post thumbnail in Blogger. Therefore, in this article, we will be providing a method to successfully display a feature image thumbnail in blogger.

There are Two methods for do this job. Both are good and have its own features. Try both one by one and after using don't forget to give us feedback.

Method 1: Add Featured Images To Blogger Posts

Before getting started with the tutorial, I would recommend you to setup automatic post summary script for blogger so that you can easily setup a feature image through a minor tweak that we will be discussing below.

To add a feature image in blogger posts, simply go to Blogger ›› New Posts  ›› and click "Upload Image" button which will open up a image uploading wizard. You can use that to upload any image from your computer or you can also add an existing image from your Picasa image library.

After uploading the image select “Edit HTML” tab from the top left corner and copy the complete URL of the image which would look like as it can seen below.


People want an ability to display feature image or post thumbnail only on achieve and homepage that appears along with the post except (summery). They don’t want to have the feature image to be shown on the same post when viewer opted to view it. Now to make it possible, paste the following piece of coding at the very top of the “Blogger post Editor” through “Edit HTML” tab.

Remember: Do not forget to replace the image-here with the URL of your image that you would like to show as feature image or post thumbnail.
<img src="image-here" style="display:none;">
Once everything is done, publish your post by pressing "Publish" button.


Method 2 : Add Featured Images To Blogger Posts

  • Login to your Blogger account.
  • Click on your required blog from the list of blogs.
  • Press Template option from the left-hand menu.
  • Click on the Edit HTML button.
  • Take the backup of the template first.
  • Now press the Ctrl+F button and search for ]]></b:skin> tag.
  • And use the following lines of code below the above mentioned tag.
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style>
.hidepic{
display: none;
}
</style></b:if>
  • Now Hit On Save Template.
  • Now the main thing is to modify your image in the blog post. You have to apply this modification every time you need to add featured images in Blogger posts.
  • So you just need to upload your required image and press HTML option to apply HTML mode in the post editor. Here you can see the <div></div> tags around your image like this>>

<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://1.bp.blogspot.com/-Li7G12JknIo/VPIzQ6LK2aI/AAAAAAAADPg/4VjMXcdR5HA/s1600/10985235_875227819190876_70055650758045287_n.jpg" imageanchor="1"><img border="0" src="http://1.bp.blogspot.com/-Li7G12JknIo/VPIzQ6LK2aI/AAAAAAAADPg/4VjMXcdR5HA/s320/10985235_875227819190876_70055650758045287_n.jpg" /></a>
</div>

  • You just need to add class=”hidepic” after <div> tag like this
<div class="hidepic" dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://1.bp.blogspot.com/-Li7G12JknIo/VPIzQ6LK2aI/AAAAAAAADPg/4VjMXcdR5HA/s1600/10985235_875227819190876_70055650758045287_n.jpg" imageanchor="1"><img border="0" src="https://1.bp.blogspot.com/-Li7G12JknIo/VPIzQ6LK2aI/AAAAAAAADPg/4VjMXcdR5HA/s320/10985235_875227819190876_70055650758045287_n.jpg" /></a></div>
  • Hit Publish and That's it.

Conclusion:

So above guide is about How To Add Featured Images To Blogger Posts and i hope by above guide you can easily understand and use these featured images in blogger posts. If you have any query related to the article or facing any problem after following all steps then drop a comment below. We will help you out of sure. Do Share.

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.