Cara Mudah Membuat Informasi Postingan SEO Friendly [ Valid HTML5 ] 2019

Alhamdulillah, masih diberi kesempatan buat sharing/berbagi lagi.. setelah beberapa minggu gak bikin postingan.. semoga pengunjung/sahabat pada sehat wal afiat. aamiin

Pernah ada sahabat blogger yang menanyakan "Bagaimana Cara membuat informasi postingan seperti pada Blog saya ini?" , nah kali ini saya akan memberitahukan bagaimana cara nya ..

Cara-nya :

Langkah 1 : Masuk Blogger, klik menu Template → Edit HTML

Langkah 2 : Setelah itu, cari kode <div class='comments' id='comments'> lalu simpan kode di bawah ini tepat di atas nya :


<!-- Info Postingan Awal -->
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
 <div id='info-postingan'>
<div class='post_byfix radius shadow'>
<div class='post_by'>
<div class='post_byimz'>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail radius' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
 <b:else/>
<img alt='no image' class='post-thumbnail radius' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHCRPNGIZgw2_Ioozs0ZiMQ2j6gcwsMQtN1WL5ryosh1coGsW028T4JxJPHZJz6S1enqeq3QSq1J0CNH7WzabaM6I0Adcjbr45N8oRKePOYTtbRnda8jKmClAjL2s4G6LJTS57eGFhE1qa/s1600/no_image.jpg'/>
</b:if>
</div>

<ul>
  <li><b>Judul :</b> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></li>
<li><b>Penulis :</b> <span class='post-author vcard'> <span class='fn'><a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' target='_blank'><data:post.author/></a></span></span></li>
<li><b>Kategori :</b> <span class='post-labels'>
        <b:if cond='data:post.labels'>          
          <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;'> <i class='icon-angle-right'/> </b:if>
          </b:loop>
        </b:if>
      </span></li>
<li>
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
  <b>Rating :</b> <span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'>
<span itemprop='average'>100%</span>
</span>
    based on <span itemprop='votes'>10</span> ratings.
    <span itemprop='count'>5</span> user reviews.
</div>
</li>
</ul>
</div>

</div>

<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
<div style='position:fixed;z-index:-500;opacity:0;top:0px;left:0px;'>  
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
Item Reviewed: <span itemprop='itemreviewed'><data:post.title/></span>
<span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'> <span itemprop='average'>9</span> out of <span itemprop='best'>10</span> based on <span itemprop='votes'>10</span> ratings. <span itemprop='count'>9</span> user reviews.
</span>
</div>
</div>
</div>
    </div>
<div class='clear'/>
</b:if>
<!-- Info Postingan Akhir -->

Langkah 3 - Terakhir simpan kode CSS dibawah ini tepat sebelum/di atas kode </head> :

<style>
.post_byfix {
    float: left;
    background: #fff;
    width: 100%;
    overflow: hidden;
    clear: both;
    margin-bottom: 10px;
}

.post_byimz {
    display: block;
    float: left;
    padding: 4px!important;
    margin-left: 2px!important;
    padding-right: 10px!important;
    margin-top: 5px!important;
    overflow: hidden;
}

.post_byimz img {
    width: 80px;
    height: 80px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.post_by {
    float: right;
    color: #423119;
    width: 100%;
    font-family: arial,Helvetica,san-serif;
    font-weight: 400;
    font-size: 11px;
}

.post_by ul {
    margin: 0;
    padding: 0;
    margin-top: 9px;
}

.post_by li {
    list-style: none;
    padding: 3px 10px!important;
}
</style>

Selesai ..

#SemogaBermanfaat
#SalamNewbieBlogger