Untuk Widget Popular Post yang di berikan oleh pihak Blogger jika kita selidiki lebih dalam masih belum Valid HTML5, ada beberapa faktor yang menyebabkan terjadinya tidak valid, yaitu untuk gambar pada popular post tidak di sertakan alt, title dan kode yang tidak valid, oleh sebab itu kita harus memperbaikinya
agar tidak mengurangi SEO pada blog.
Untuk cara melakukan validasi terhadap widget Popular Post, silahkan anda ikuti langkah-langkahnya:
Langkah Pertama. Silahkan anda login ke akun blog anda.
Langkah Kedua. Selanjutnya pilih Template, lalu klik Edit HTML.
Langkah Ketiga. Pilih Jump to widget , lalu pilih Popular Post1. Lihat gambar di bawah ini :
Langkah Keempat. Untuk Kode Popular Post1 kurang lebih seperti kode di bawah ini :
<b:widget id='PopularPosts1' locked='false' title='Popular News' type='PopularPosts'>
<b:includable id="main">
<b:if cond="data:title"><h3>
<data:title></data:title></h3>
</b:if>
<div class="widget-content popular-posts">
<ul>
<b:loop values="data:posts" var="post">
<li>
<b:if cond="data:showThumbnails == "false"">
<b:if cond="data:showSnippets == "false"">
<a expr:href="data:post.href" href="https://draft.blogger.com/blogger.g?blogID=2115662217276705048&pli=1"><data:post .title=""></data:post></a>
<b:else>
<div class="item-title">
<a expr:href="data:post.href" href="https://draft.blogger.com/blogger.g?blogID=2115662217276705048&pli=1"><data:post .title=""></data:post></a></div>
<div class="item-snippet">
<data:post .snippet=""></data:post></div>
</b:else></b:if>
<b:else>
<b:if cond="data:showSnippets == "false"">
<div class="item-thumbnail-only">
<b:if cond="data:post.thumbnail">
</b:if>
<br />
<div class="item-thumbnail">
<a expr:href="data:post.href" href="https://draft.blogger.com/blogger.g?blogID=2115662217276705048&pli=1" target="_blank">
<img alt="" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:width="data:thumbnailSize" />
</a>
</div>
<div class="item-title">
<a expr:href="data:post.href" href="https://draft.blogger.com/blogger.g?blogID=2115662217276705048&pli=1"><data:post .title=""></data:post></a></div>
</div>
<div style="clear: both;">
<b:else>
</b:else>
<br />
<div class="item-content">
<b:if cond="data:post.thumbnail">
</b:if>
<br />
<div class="item-thumbnail">
<a expr:href="data:post.href" href="https://draft.blogger.com/blogger.g?blogID=2115662217276705048&pli=1" target="_blank">
<img alt="" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:width="data:thumbnailSize" />
</a>
</div>
<div class="item-title">
<a expr:href="data:post.href" href="https://draft.blogger.com/blogger.g?blogID=2115662217276705048&pli=1"><data:post .title=""></data:post></a></div>
<div class="item-snippet">
<data:post .snippet=""></data:post></div>
</div>
<div style="clear: both;">
</div>
</div>
</b:if>
</b:else></b:if>
</li>
</b:loop>
</ul>
<b:include name="quickedit">
</b:include></div>
</b:includable>
</b:widget>Langkah Kelima. Silahkan anda ganti kode Popular Post1 seperti diatas dengan kode Popular post1 dibawah ini :
<b:widget id='PopularPosts1' locked='false' title='Popular News' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>Langkah Keenam. Jika langkah kelima sudah di lakukan sekarang lakukan Simpan Template.
Selanjutnya silahkan anda check di HTML5 Validator, maka untuk widget Popular Post1 tidak ada error ataupun warning terhadap blog, mungkin itu saja yang dapat saya berikan. Semoga bermanfaat...
Demikian artikel tentang Cara Membuat Popular Post dengan Gambar Valid HTML5 ini dapat kami sampaikan, semoga artikel atau info tentang Cara Membuat Popular Post dengan Gambar Valid HTML5 ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
