Popular Post Thumbnail Valid HTML5

Semenjak bekembangnya jaman dari masa ke masa para Blogger memulai melakukan validasi HTML5 secara bertahap ^_^ Dari Editing template sampai mengganti template yg sudah Valid HTML5 namun kenyataannya masih banyak error pada Widget Bawaan Blogger termasuk Popular Post =(

• Cara Membuat Blog Valid HTML5
• Cara Membuat Halaman Posting Valid HTML5

Untuk melakukannya juga tidak susah hanya sedikit editing pada template.

• Login ke Blogger
• Kemudian klik Template -->> Edit HTML
• Pada halaman editor template blog, klik tombol Jump to widget/Lompat ke widget dan pilih widget popular posts

Cari Kode berikut ini..

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>...</b:widget>

Lalu ganti dengan kode di bawah ini..

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' 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'>
                                    <data:post.title/>
                                </a>
                                <b:else/>
                                <!-- (2) Show only snippets -->
                                <div class='item-title'>
                                    <a expr:href='data:post.href'>
                                        <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:src='data:post.thumbnail' expr:title='data:post.title' />
                                            </a>
                                        </div>
                                        <b:else/>
                                        <div class='item-thumbnail'>
                                            <a expr:href='data:post.href' target='_blank'>
                                                <img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwmw7vfiBq6aliYGWE4yxRGrb93kDCVN7W7H4hs_yWN7-KJIXtKxJm0bBpamLgmsEIbSo3lw44QMyG5YXwqvMWfY1hhvHPXkzPqJIZEJ8m5gjsYrrdmwkJxG13nrwCpT03tqYNt-3XyDU/s120-c/laptop-icon3.png' />
                                            </a>
                                        </div>
                                    </b:if>
                                    <div class='item-title'>
                                        <a expr:href='data:post.href'>
                                            <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:src='data:post.thumbnail' expr:title='data:post.title' />
                                            </a>
                                        </div>
                                        <b:else/>
                                        <div class='item-thumbnail'>
                                            <a expr:href='data:post.href' target='_blank'>
                                                <img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwmw7vfiBq6aliYGWE4yxRGrb93kDCVN7W7H4hs_yWN7-KJIXtKxJm0bBpamLgmsEIbSo3lw44QMyG5YXwqvMWfY1hhvHPXkzPqJIZEJ8m5gjsYrrdmwkJxG13nrwCpT03tqYNt-3XyDU/s120-c/laptop-icon3.png' />
                                            </a>
                                        </div>
                                    </b:if>
                                    <div class='item-title'>
                                        <a expr:href='data:post.href'>
                                            <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>

Kode di atas sudah termasuk penambahan gambar pada bagian Thumbnail No Image..
Lalu save template dan selesai :D Terimakasih atas kunjungannya dan semoga bermanfaat...