Need help in customizing new blogger template


Hello friends. After so many days I have started working again on my blog. I earlier used a template which @Shivansh is using, but today I changed it. On Shivansh’s blog you can find the , when you open any post the very first image comes above the Post Title, I want to add that feature to my new template too. You can check my blog at . Please also give a short review of the new template.


well try to move the separator class above the post header and then observe the changes if it worked that your luck or wait for the other answers


After trying 1 hour, I found the script that template clue created and is used to create that first image above effect. Here’s the script and steps:

  1. Go to Blogger Dashboard > Template > Edit HTML
  2. Search for ]]></b:skin> and above it, paste below code:
.tcpic img{
background: #FFF;

3.Now, search for </head> and above it, place below script:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    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];};

4.Now at last, search for <b:includable id='main' var='top'> and below it, paste below code:

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

And at last, save your template and you are done!

How to make featured image on Blogger?

Thanks a lot buddy, let me try, then I’ll tell you if I face any roblem. Thank you!


Welcome Naman. This script is working as I checked it on my one demo blog. If you face any problem, then you can surely discuss that here. :grinning:


Yeah it worked fine on my blog. Thanks a lot.


Welcome @NamanKumar :smile: I am glad that it worked for you.