MEMBUAT POPULAR POST DENGAN GAMBAR BULAT (Circle thumbnail)

Cara Membuat Popular Post Dengan Gambar Bulat (circle thumnail) dengan mudah

Halo spoter, lanjut artikel tutorial kali ini tentang cara membuat widget popular post keren. Bisa lihat di gambar, selain tidak berat gambar thumbnail nya terlihat bulat (circle thumbnail) menjadikan tampilan popular post ini enak di pandang. Cara memasang nya tidak sulit, cukup menambahkan kode html di blogger anda, dan jadilah seperti di gambar. Nah untuk yang ingin mencoba nya bisa langsung lanjut ke langkah-langkah nya.

Popular post with circle thumbnail
1. Buka Blogger dan login
2. Lalu pilih template
3. Setelah itu pilih edit HTML (jangan lupa untuk backup terlebih dahulu)
4. Di editor HTML cari kode ]]></b:skin> (gunakan ctrl+F) agar lebih cepat mencarinya.
5. Copy kode di bawah ini dan paste di atas kode ]]></b:skin>

#PopularPosts1 {
max-width: 300px}
#PopularPosts1 dd {
float: left;
border-bottom: none;
margin: 8px 8px 0 8px;
background: none;
display: block;
padding: 0}
#PopularPosts1 img {
width:75px;height:75px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;}
#PopularPosts1 img:hover {
width:77px;height:77px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;
cursor: pointer;-webkit-box-shadow: 0 0 20px #0cb1f6, inset 0 0 20px #0cb1f6;
-moz-box-shadow: 0 0 20px #0cb1f6, inset 0 0 20px #0cb1f6;
box-shadow: 0 0 20px #0cb1f6, inset 0 0 20px #0cb1f6;}

6. Jika sudah lalu cari kode di bawah ini (gunakan ctrl+F)

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

7. Setelah ketemu, blok ke bawah sampai menemukan kode  </b:widget>
8. Sekarang hapus kode itu dari awal kode tadi sampai akhir.
9. Setelah di delete masukan kode di bawah ini di tempat yang sama.

<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'>
                    <dd>
                        <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 alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</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 -->
                                <b:if cond='data:post.thumbnail'>
                                    <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a>
                                    <b:else/>
                                    <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKk-Af4e8rLNyoU38nN1AzztsOfjDUNk08aDy4Mmgv_Gq2wOunQ2opTI40Q9CDou6IwScsc_Kjhyphenhyphenl1anUCldOxXML5ttNjLQJX_o-PVeZWxbi9noraTNUvrWHdZlzncoPLNq6sglLoq0I/s1600/helperblogger-default-image.jpg' width='60px'/></a>
                                </b:if>
                            </b:if>
                        </b:if>
                    </dd>
                </b:loop>
            </ul>
            <div class='clear' />
            <b:include name='quickedit' />
        </div>
    </b:includable>
</b:widget>

10. Langkah terakhir save atau simpan template. Selesai.

Sekarang widget popular post anda sudah seperti contoh di atas bukan ? jika belum, setting di bagian widget template, pilih edit lalu centang thumbnail gambar dan cuplikan jika ingin ada potongan artikel yang di munculkan. Oke sekian dulu sampai disini, semoga dapat membantu blogger semua. Jangan lupa untuk membaca cara membuat scrool box pada blog. terima kasih.