Cara Memasang Popular Post Valid HTML5 di Blog

Malam sobat ? pada artikel kali ini saya akan membahas tentang cara memasang Popular Post Thumbnail Valid HTML5, sebenarnya cara ini sudah banyak demo bagi yang sangat suka searching di google, tapi mudah-mudahan sobat semua tidak bosan untuk menyimak artikel ini. kalo suatu hari nanti ganti template dan belum memasang widget ini bisa mampir ke blog ini ya…. J

Untuk pemasangannya bisa simak di bawah ini:

Pertama login dulu ke blogger

Kemudian klik Template >> Edit HTML

Selanjutnya pada halaman editor template, klik tombol lompat ke widget dan pilih widget popular post

Terus cari kode dibawah ini dengan bantuan Ctrl+F.

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

Lalu ganti dengan kode dibawah 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/AVvXsEhHuWC1JFXzPxJAZpKgDY4JdbEnqlbTzmr6XtyoNfd3s-eAxFFb-c1vXHY1VLLhHQog639BiGWOkRWh3Xq7hLFzV6XY0ehCku3VEDyTdCVZz-0ii9wTnHPDpv717sW9tTUE07nePewaVFo/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/AVvXsEhHuWC1JFXzPxJAZpKgDY4JdbEnqlbTzmr6XtyoNfd3s-eAxFFb-c1vXHY1VLLhHQog639BiGWOkRWh3Xq7hLFzV6XY0ehCku3VEDyTdCVZz-0ii9wTnHPDpv717sW9tTUE07nePewaVFo/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>

Terakhir simpan template

Semoga bermanfaat

Sumber: Mbak anarchyta