Modifikasi Widget Popular Post With Grid Layout

Modifikasi Widget Popular Post

Grid Layout For The Popular Posts Widget - Cara membuat atau memodifikasi widget popular post menjadi lebih keren bergaya grid layout, seperti yang kita tahu untuk tampilan widget bawaan blogger ini cukup menarik, tapi bisa kita modif lagi dengan gaya yang berbeda, dan lebih keren tampilannya. Pastinya diluar sana sudah banyak yang share tentang topik ini. Saya ulas lagi disini karena saya awalnya mendapat masalah dalam proses pemasangan kode scriptnya, jadi mungkin postingan saya ini bisa mempermudah sobat blogger yang mengalami masalah dalam menerapkan cara modifikasi popular post ini.(lihat ScreenShotnya diatas!).

Ikuti langkah-langkahnya berikut ini:

• Login ke blogger
• Pergi ke munu Design > Page Element > Add a Gadget
• Pilih Widget "Popular Post"
• Settinglah persis seperti gambar dibawah ini, untuk jumlah post, bisa sobat atur sendiri.

• Lalu Save.
• Lanjut ke Edit HTML, beri ceklist pada Expand Widget Templates. 
• Jangan lupa juga BackUp template sobat (buat jaga-jaga kalo ada yang error).
• Cari kode (CTRL+F) ]]></b:skin>

Dan tambahkan kode CSS berikut diatasnya:

.popular-posts
.item-thumbnail{
float:left;
}

.popular-posts ul{
padding-left:30px;
}

.popular-posts ul li {
list-style-image: none;
list-style-type: none;
display:inline;
}

.popular-posts ul li img {
padding:0px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;border-radius: 5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
 transition: all 0.3s ease;
 border: 2px solid #CCC;
}

.popular-posts ul li img:hover {
border:2px solid #ccc;
-moz-transform: scale(1.3) rotate(-360deg) ;
-webkit-transform: scale(1.3) rotate(-360deg) ;
-o-transform: scale(1.3) rotate(-360deg) ;
-ms-transform: scale(1.2) rotate(-360deg) ;
 transform: scale(1.3) rotate(-360deg);}

• Lanjut cari teks PopularPosts1 (CTRL + F) biar lebih cepat.

Ini kode script lengkapnya:

<b:widget id='PopularPosts1' locked='false' title='Popular Post' 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 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 -->
<div class='item-content'>
<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 class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

•   Gantilah kode script diatas dengan kode script berikut:

<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 == "false"'>
                <b:if cond='data:showSnippets == "false"'>
                    <!-- (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 == "false"'>
                    <!-- (3) Show only thumbnails -->
                    <div class='item-thumbnail-only'> <div class='item-thumbnail'>
                    <a expr:href='data:post.href' expr:title='data:post.title'>
                        <b:if cond='data:post.thumbnail'>
                            <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                        <b:else/>
                            <img alt='' border='0' expr:height='data:thumbnailSize' src='http://www.prismestate.com/images/noimages.png' expr:width='data:thumbnailSize'/>
                        </b:if>
                        </a>
                        </div>
                        </div>
                <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 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 class='item-snippet'><data:post.snippet/></div> </div>
                    <div style='clear: both;'/>
                        </b:if>
                        </b:if>
                    </li>
                    </b:loop>
                        </ul>
            <b:include name='quickedit'/> </div>
        </b:includable>
    </b:widget>

• Terakhir Simpan dan lihat hasilnya.

Tambahan:
Untuk kode CSS bisa sobat kreasikan sendiri, sesuai dengan kreativitas sobat masing-masing.
Sekian dari saya untuk topik pembahasan Cara Modifikasi Widget Popular Post With Grid Layout. Semoga bermanfaat.