Modifikasi Widget Popular Post

April 22, 2012

Modifikasi Widget Popular Post. Jika dalam suatu blog mempunyai pengunjung yang banyak pasti salahsatunya ada artikel yang dituju visitor, nah untuk memperjelas apa yang mereka cari pastilah kita menggunakan Popular Post tapi pernahkah sobat terbersit untuk memodifikasi widget tersebut?

Jika belum marilah kita belajar untuk Modifikasi Widget Popular Post

Untuk Preview hasilnya bisa dilihat pada blog ini yang berada di sidebar atau bisa lihat gambar dibawah ini

Modifikasi Widget Popular Post

Langkah 1
Login ke Blogger
Masuk ke "Tata Letak - Elemen Laman"
Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
Langkah 2
Pilih Widget "Popular Post".
Selanjutnya disetting

Untuk yang snippet jangan dicentang, karena itu merupakan deskripsi/serpihan teks artikel.

Setelah itu Klik Save

Langkah 3

Masuk ke "Rancangan - Edit HTML"

Cheklist "Expand Template Widget"

Langkah 4

Gunakan (CTRL + F) untuk mencari kode ]]></b:skin> dan letakkan kode CSS dibawah ini diatasnya

.popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:0px;}
.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);}

Langkah 5
Kemudian cari kode dibawah ini gunakan (CTRL + F) agar lebih cepat.

PopularPosts1

Dibawah ini merupakan kode 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>

<ul>

<b:loop values='data:posts' var='post'>

<li>

<b:if cond='data:showThumbnails == "false"'>

<b:if cond='data:showSnippets == "false"'>

<b:else/>

</b:if>

<b:else/>

<b:if cond='data:showSnippets == "false"'>

<b:if cond='data:post.thumbnail'>

</a>

</div>

</b:if>

</div>

<b:else/>

<b:if cond='data:post.thumbnail'>

</a>

</div>

</b:if>

</div>

</b:if>

</li>

</b:loop>

</ul>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Kemudian ganti semua kode diatas 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 == "false"'>
<b:if cond='data:showSnippets == "false"'>


<a expr:href='data:post.href'>
<data:post.title/>
</a>
<b:else/>


<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"'>


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


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

Langkah Terakhir

Tambahan:
Untuk kode CSS "langkah 4" sobat edit sendiri sesuai keinginan, untuk garis jarak dan lainnya bisa diganti sesuai kereatifitas sobat semua.
Semoga bermanfaat, selamat mencoba dan semoga berhasil

Article Information:
Title: Modifikasi Widget Popular Post With Grid Layout
Source: kode-blogger.blogspot.com

Labels: Blog Design, Widget