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 1Login ke Blogger
Masuk ke "Tata Letak - Elemen Laman"
Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
Langkah 2Pilih 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>
<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'>
<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>
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"'>
<!-- (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>
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
