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  ..

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 code berikut
<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/AVvXsEiK-2C1nHtN0ZzLyx8n2IiGE5dB7OrrI9E0IuZT0VNfs1kAH4iJIBtRKtgWEvx2Co5lm1LOmJv039EI-s7VM_b0ILtxEnZ7vR1T16uF7WX-yVqi9vbgvlmRKtp6rXBfworF3xX5LD3AIJM/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/AVvXsEiK-2C1nHtN0ZzLyx8n2IiGE5dB7OrrI9E0IuZT0VNfs1kAH4iJIBtRKtgWEvx2Co5lm1LOmJv039EI-s7VM_b0ILtxEnZ7vR1T16uF7WX-yVqi9vbgvlmRKtp6rXBfworF3xX5LD3AIJM/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..
dan jika ingin lebih tau silahkan kunjungi sumber nya di http://the-anarchyta.blogspot.com