Memodifikasi Artikel Populer - CircleStyle

Gambar diatas adalah salah satu modifikasi widget popularpost/artikel populer, jika ingin mempunyai tampilan pupular post/artikel populer seperti diatas silahkan copy paste kode-kode dibawah ini, Tapi jika sobat ingin mencoba /melihat modifikasi lainnya, silahkan anda cari di artikel terkait dibawah postingan ini atau klik link disini

• Masuk ke Akun blogger Sobat Design >> Edit HTML (untuk berjaga-jaga ada baiknya sobat backup dulu templatenya).
• Centang  Expand Widget Templates
• Cari kode ]]></b:skin> (TIP : gunakan Ctrl + F  ]]></b:skin>)
• Kopikan kode dibawah ini diatas/sebelum 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;
}

• Cari lagi kode seperti dibawah ini:

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

TIP : untuk mempermudah cari dengan Ctrl + F widget id='PopularPosts1'

• Lihat kebawah dan temukan kode </b:widget>
• Setelah itu Sobat Ganti  <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> sampai </b:widget> 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'>
                    <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/AVvXsEhxm_9fO9g2RMHToF1a5KjbMaC2oOvh8CZ0fuUiBig3bXikR8NLsYBGi_UGeE2WcZ0J9j3Yjz6nuTmkg1PnWsjslcJxBFjv9DPGq3p4Z38DTOe-TgMNVRv3O-ot0x6JTdpp1F6V60aWxWY/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>

• Simpan Template Sobat..

• SELESAI