The newest way to create a First Image Cover above Blog article title

How to make the position of the post picture top above the title or below the title? This question is often in the show pal in social media groups,

How to make the position of the post picture top above the title or below the title? This question is often posted in the social media group, so in this opportunity I took the time, to make a tutorial, create the latest First Image Cover, maybe it's already a thing that you have encountered a blog already using First Image Cover. But the First Image Cover that I made is much more different than the First Image Cover before its/this is more cool

Speaking bloggers, then do not escape what we need to do to make the blog look look cool should be able to silvery the HTML and CSS files wrapped inside the template.

In this page, we come back to provide a tutorial design to beautify the look of the blog in the position of the post image layout that we can change the top of the blog title.

But before heading for this step, don't forget anyway for you should be familiar with the code we're going to change. Because if you're not very familiar, you can get your template broken.

How to create First Images in Blogger

Open Blogger > Dashbor

Select > Edit HTML theme

Look for this HTML code < div class = 'post-hentry'> by pressing CTRL + F for faster searching for the code.

Usually each template code is different, but most of the code above is used for the article's content opener in the template.

If I belong to the code is <article class = 'post'> So you can just adjust the HTML codes that smell post

If you want to put the position of this image at the top of the text then copy the HTML code below and right above the position of the code < h1 class= 'post-title entry-title'> or below the code <div class='post hentry'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='coverImage'>
<b:if cond='data:post.firstImageUrl'>
  <img class='firstimage' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
<div class='title-info'>
<h1 class='post-title entry-title' itemprop='headline'><data:post.title/></h1>
</div>
<b:else/>
</b:if>
<div class='kolom-author'>
<div class='about-author'>
<img expr:src='data:post.authorPhoto.url'/>
</div>
</div>
<div class='item-preview'>
<div class='sharemedia'>
<ul>
<li><a class='facebook window-ify' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><svg viewBox='0 0 512 512'>
<path d='M288,176v-64c0-17.664,14.336-32,32-32h32V0h-64c-53.024,0-96,42.976-96,96v80h-64v80h64v256h96V256h64l32-80H288z'/>
</svg>
</a></li>
<li><a class='twitter window-ify' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'>
<svg viewBox='0 -47 512.00203 512'><path d='m191.011719 419.042969c-22.140625 0-44.929688-1.792969-67.855469-5.386719-40.378906-6.335938-81.253906-27.457031-92.820312-33.78125l-30.335938-16.585938 32.84375-10.800781c35.902344-11.804687 57.742188-19.128906 84.777344-30.597656-27.070313-13.109375-47.933594-36.691406-57.976563-67.175781l-7.640625-23.195313 6.265625.957031c-5.941406-5.988281-10.632812-12.066406-14.269531-17.59375-12.933594-19.644531-19.78125-43.648437-18.324219-64.21875l1.4375-20.246093 12.121094 4.695312c-5.113281-9.65625-8.808594-19.96875-10.980469-30.777343-5.292968-26.359376-.863281-54.363282 12.476563-78.851563l10.558593-19.382813 14.121094 16.960938c44.660156 53.648438 101.226563 85.472656 168.363282 94.789062-2.742188-18.902343-.6875-37.144531 6.113281-53.496093 7.917969-19.039063 22.003906-35.183594 40.722656-46.691407 20.789063-12.777343 46-18.96875 70.988281-17.433593 26.511719 1.628906 50.582032 11.5625 69.699219 28.746093 9.335937-2.425781 16.214844-5.015624 25.511719-8.515624 5.59375-2.105469 11.9375-4.496094 19.875-7.230469l29.25-10.078125-19.074219 54.476562c1.257813-.105468 2.554687-.195312 3.910156-.253906l31.234375-1.414062-18.460937 25.230468c-1.058594 1.445313-1.328125 1.855469-1.703125 2.421875-1.488282 2.242188-3.339844 5.03125-28.679688 38.867188-6.34375 8.472656-9.511718 19.507812-8.921875 31.078125 2.246094 43.96875-3.148437 83.75-16.042969 118.234375-12.195312 32.625-31.09375 60.617187-56.164062 83.199219-31.023438 27.9375-70.582031 47.066406-117.582031 56.847656-23.054688 4.796875-47.8125 7.203125-73.4375 7.203125zm0 0'/></svg>
</a></li>
<li><a class='pinterest window-ify' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'>
<svg viewBox='-62 0 512 512'><path d='m60.945312 278.21875c.640626-1.597656 7.050782-26.230469 7.5-27.898438-10.007812-15.058593-21.125-64.371093-12.597656-104.398437 9.199219-58.730469 71.4375-87.601563 130.199219-87.601563v-.109374c73.570313.046874 128.640625 40.980468 128.699219 111.476562.046875 55.179688-33.195313 128.117188-89.957032 128.117188-.015624 0-.027343 0-.042968 0-20.257813 0-45.90625-9.1875-52.632813-18.210938-7.761719-10.398438-9.667969-23.230469-5.566406-36.941406 10.050781-32.082032 22.867187-70.511719 24.363281-96.136719 1.386719-24.183594-15.773437-39.917969-38.027344-39.917969-16.746093 0-38.496093 9.726563-49.335937 37.058594-8.953125 22.707031-8.761719 46.480469.585937 72.671875 3.644532 10.238281-16.15625 76.984375-22.5 98.71875-15.761718 53.992187-37.339843 122.304687-32.726562 160.347656l4.453125 36.605469 22.367187-29.3125c30.953126-40.519531 62.957032-145.332031 71.484376-170.835938 25.210937 32.648438 77.710937 33.585938 83.832031 33.585938 75.183593 0 160.4375-74.65625 158.019531-178.5625-2.121094-91.121094-68.808594-166.875-188.632812-166.875v.117188c-113.976563 0-180.5 60.835937-196.785157 137.703124-14.914062 71.273438 18.253907 125.519532 57.300781 140.398438zm0 0'/></svg>
</a></li>
<li><a class='whatsapp window-ify' expr:href='&quot;https://wa.me/?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url' rel='nofollow' target='_blank' title='Share whatsapp'>
<svg viewBox='0 0 512 512'>
<path d='M256.064,0h-0.128C114.784,0,0,114.816,0,256c0,56,18.048,107.904,48.736,150.048l-31.904,95.104l98.4-31.456    C155.712,496.512,204,512,256.064,512C397.216,512,512,397.152,512,256S397.216,0,256.064,0z M405.024,361.504    c-6.176,17.44-30.688,31.904-50.24,36.128c-13.376,2.848-30.848,5.12-89.664-19.264C189.888,347.2,141.44,270.752,137.664,265.792    c-3.616-4.96-30.4-40.48-30.4-77.216s18.656-54.624,26.176-62.304c6.176-6.304,16.384-9.184,26.176-9.184    c3.168,0,6.016,0.16,8.576,0.288c7.52,0.32,11.296,0.768,16.256,12.64c6.176,14.88,21.216,51.616,23.008,55.392    c1.824,3.776,3.648,8.896,1.088,13.856c-2.4,5.12-4.512,7.392-8.288,11.744c-3.776,4.352-7.36,7.68-11.136,12.352    c-3.456,4.064-7.36,8.416-3.008,15.936c4.352,7.36,19.392,31.904,41.536,51.616c28.576,25.44,51.744,33.568,60.032,37.024    c6.176,2.56,13.536,1.952,18.048-2.848c5.728-6.176,12.8-16.416,20-26.496c5.12-7.232,11.584-8.128,18.368-5.568    c6.912,2.4,43.488,20.48,51.008,24.224c7.52,3.776,12.48,5.568,14.304,8.736C411.2,329.152,411.2,344.032,405.024,361.504z'/>
</svg>
</a></li>
<li><a class='linkedin window-ify' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'>
<svg viewBox='0 0 512 512'><path d='m256 0c-141.363281 0-256 114.636719-256 256s114.636719 256 256 256 256-114.636719 256-256-114.636719-256-256-256zm-74.390625 387h-62.347656v-187.574219h62.347656zm-31.171875-213.1875h-.40625c-20.921875 0-34.453125-14.402344-34.453125-32.402344 0-18.40625 13.945313-32.410156 35.273437-32.410156 21.328126 0 34.453126 14.003906 34.859376 32.410156 0 18-13.53125 32.402344-35.273438 32.402344zm255.984375 213.1875h-62.339844v-100.347656c0-25.21875-9.027343-42.417969-31.585937-42.417969-17.222656 0-27.480469 11.601563-31.988282 22.800781-1.648437 4.007813-2.050781 9.609375-2.050781 15.214844v104.75h-62.34375s.816407-169.976562 0-187.574219h62.34375v26.558594c8.285157-12.78125 23.109375-30.960937 56.1875-30.960937 41.019531 0 71.777344 26.808593 71.777344 84.421874zm0 0'/></svg>
</a></li>
</ul>
</div>
</div>
<div class='clear'/>
         <div class='post-meta'>
            <span class='post-author vcard'>
              <i class='fa fa-user-circle'/>
               <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                     <span class='fn' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
                        <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                        <a class='g-profile' expr:href='data:post.authorProfileUrl' expr:title='data:post.author' rel='author'>
                           <span itemprop='name'>
                              <data:post.author/>
                           </span>
                        </a>
                     </span>
                     <b:else/>
                     <span class='fn' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
                        <a class='g-profile' expr:href='data:post.authorProfileUrl' expr:title='data:post.author' rel='author'>
                           <span itemprop='name'>
                              <data:post.author/>
                           </span>
                        </a>
                     </span>
                  </b:if>
               </b:if>
            </span>
            <span class='post-timestamp'>
               <b:if cond='data:top.showTimestamp'>
                  <i class='fa fa-clock-o'/>
                  <b:if cond='data:post.url'>
                     <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
                     <span itemprop='dateModified'>
                        <a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'>
                           <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
                              <data:post.timestamp/>
                           </abbr>
                        </a>
                     </span>
                  </b:if>
               </b:if>
            </span>
            <b:if cond='data:view.isSingleItem'>
               <span class='label-head'>
                  <b:if cond='data:post.labels'>
                     <i class='fa fa-folder-open-o'/>
                     <b:loop values='data:post.labels' var='label'>
                        <a expr:href='data:label.url' rel='tag'>
                           <data:label.name/>
                        </a>
                        <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
                     </b:loop>
                  </b:if>
               </span>
            </b:if>
         </div>
</div>
</b:if>

Copy the following CSS code again, as the material to be smoothed. Put the CSS code below above the code </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/* coverImage by theboegis.com */
.title-info a:nth-child(n+2){display:none;}
@media screen and (max-width:640px){.title-info{display:inline-block;position:absolute;right:10px;margin:0 auto}}
.title-info{position:absolute;left:0px;top:0px;z-index:2;padding:0;font-size:0;width:100%;background:linear-gradient(to bottom,rgba(0,0,0,0.9) 0%,transparent 100%) repeat scroll 0 0 transparent}
.title-info a{display:inline-block;background:linear-gradient(45deg,#00349b,rgba(0,92,255,.9219),#007aff);color:#fff;font-size:14px;font-weight:600;padding:3px 10px;border-radius:0 5px 5px 0}
.entry-img:hover .title-info a,.title-info a:hover{background:#fbdc03;color:#222;z-index:2}
.title-info a.label-block:nth-child(n+2){display:none}
.post img.firstimage{width:100%;height:auto;max-width:100%}
.post-body .separator:nth-child(1) {display:none;}
.post img,.sidebar img{max-width:100%;width:auto;border:0;height:auto}
.coverImage,.service_content{overflow:hidden}
.coverImage{color:#666;background:#fff;margin:20px 10px 0px;padding:0 0 1px;position:relative;text-align:center;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.07);}
@media screen and (max-width:1100px){
.coverImage{background:#fff}}
.item-preview,.preview{display:inline-block}
.main-wrapper{width:740px;margin:0;word-wrap:break-word}
.clr{clear:both;float:none}
.item-preview{margin:1px auto 0;position:relative;overflow:hidden;text-align:center}
.nime,.sharemedia li{vertical-align:middle}
.sharemedia{display:inline-block;margin-left:5px}
.sharemedia li{display:inline-block;margin:5px;position:relative;color:#555;-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.1);-moz-box-shadow:1px 1px 2px rgba(0,0,0,.1);box-shadow:1px 1px 2px rgba(0,0,0,.1);font-size:16px;width:33px;height:33px;line-height:40px;background:#fff}
.sharemedia li span{font-size:14px;padding:0 10px;border-radius:4px 0 0 4px}
.sharemedia li.title-s{width:auto}
.sharemedia li svg{width:16px;height:auto;margin:0 auto;bottom:0;text-align:center;left:0;top:9px;right:0;position:absolute}
.sharemedia li a,.sharemedia li span{background:#fff;color:#555;text-align:center;vertical-align:middle;display:block}
.sharemedia li:hover{color:#fff}
.sharemedia ul, ol{margin:5px 0 0}
.sharemedia{float:right}
.sharemedia a{float:left;width:35px;height:35px;display:block;background-color:#e0e0e0;overflow:hidden;color:var(--title-color);font-size:15px;line-height:32px;text-align:center;text-decoration:none;cursor:pointer;padding:0;margin:0;border-bottom:1px solid rgba(0,0,0,0.1);border-radius:3px}
.sharemedia a svg{fill:#fff}
.sharemedia .facebook{background-color:#3b5998;color:#fff}
.sharemedia .twitter{background-color:#55acee;color:#fff}
.sharemedia .whatsapp{background-color:#00d76e;color:#fff}
.sharemedia .pinterest{background-color:#bd081c;color:#fff}
.sharemedia .linkedin{background-color:#218eee;color:#fff}
.kolom-author{position:relative}
.about-author{overflow: auto;padding: 0 0 0px 5px;margin-top: -30px;text-align:center;}
.about-author img {text-align:center;width:70px;height:70px;border-radius:100px;border:solid #fff;}
.pengarang {font-size: 12px;margin-left:10px;padding-top:;color:white;text-align:center;}
.entry-title{text-align:center;position:relative;color:#fff;font-size:27px;padding:5px 20px 15px 20px;font-weight:500;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media screen and (max-width:640px){
.entry-title{font-size:16px}}
</style>
</b:if>

And then, copy the code below again, as the material to turn it off. Put the CSS code below above the code </body>, ( Remember not on top of the Sexy body )

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>
</b:if>

Cover:
If anyone does not understand this tutorial please leave a comment, origin do not leave Coronavirus