Cara Membuat Informasi Postingan SEO Friendly [ Valid HTML5 ]

Alhamdulillah, masih diberi kesempatan buat postingan, setelah beberapa bulan saya ga pernah blogging dan posting lagi pada Blog Tutorial Bangsat dalam keadaan yang sehat baik rohani maupun jasmani.

Pada kesempatan kali ini saya akan berbagi sebuah trick cara membuat informasi postingan yang valid HTML5 dan SEO Friendly.

Langkahnya :

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

Cara Membuat Informasi Postingan SEO Friendly [ Valid HTML5 ]

Langkah ke-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/AVvXsEg_sz1ifIF4IcgcmRVT_U6rUDTb7gZjFQXbRM-Lo6FklR5XiQz82LcKAWxTCOXje0VAFMrJP5b-uVt_C-eON3ooUfMplsJB_Gnq85-NR80jvULuJQnEM7aojItNs15UF0zgz107V-h7LXX2/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 ke-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>

Done !

Semoga postingan tentang Cara Membuat Informasi Postingan SEO Friendly [ Valid HTML5 ] ini bermanfaat untuk sobat yang ingin memasangnya di blog sobat.