Need help in customizing new blogger template


#1

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 bloggingeasier.blogspot.com . Please also give a short review of the new template.


#2

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


#3

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{
margin-top:25px;
background: #FFF;
width:94%;
}

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

<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>

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'/>
              </b:if>

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


How to make featured image on Blogger?
#4

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


#5

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:


#6

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


#7

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