Membuat Popular Post dengan Gambar Valid HTML5

TRENZT - Popular post adalah sebuah widget yang di tampilkan pada setiap blog dengan menampilkan beberapa tulisan dan gambar yang menyatakan bahwa dari tingkatan paling atas pada widget tersebut biasanya tingkatan yang paling banyak kunjungi, dengan adanya widget popular post salah satunya dapat memudahkan bagi para pengunjung untuk berselancar di blog Anda.

Tidak semua template yang valid HTML5, jadi kita harus memperbaikinya agar tidak mengurangi nilai SEO blog kita. Untuk cara melakukan validasi terhadap widget Popular Post, silahkan anda ikuti langkah-langkahnya:

1. Login ke akun blogger Anda
2. Pilih Template, lalu klik Edit HTML
3. Cari kode "PopularPosts1" (Tanpa tanda kutip), lebih kurang kodenya seperti dibawah 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 == &quot;false&quot;">
<b:if cond="data:showSnippets == &quot;false&quot;">
<a expr:href="data:post.href" href="https://draft.blogger.com/blogger.g?blogID=2115662217276705048&amp;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&amp;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 == &quot;false&quot;">
<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&amp;pli=1" target="_blank">
<img alt="" border="0" 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&amp;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&amp;pli=1" target="_blank">
<img alt="" border="0" 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&amp;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>

4. Ganti kode di atas dengan kode di bawah 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 == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (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 == &quot;false&quot;'>
            <!-- (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>

5. Simpan template dan liat hasilnya.

Semoga bermanfaat bagi pembaca dan pengunjung setita TRENZT.