Friday, February 17, 2017
Cara Modifikasi Widget Popular Post dengan Grid Layout
Cara Modifikasi Widget Popular Post dengan Grid Layout
Selamat malam sahabat blogger !!! Kali ini, aq akan posting
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. Tapi gpp lah, aq share juga... hehehe... :)
Biar makin jelas dan mantap, nih aq kasih screenshotnya sob :
Buat sobat yang berminat, silahkan sobat simak ya tutorial di bawah ini :
- Login ke blogger.
- Pergi ke menu Tata letak > Add a Gadget
- Pilih Widget "Popular Post"
- Settinglah persis seperti gambar dibawah ini, untuk jumlah post, bisa sobat atur sendiri.
- Simpan.
Lanjut ke Edit HTML, beri ceklist pada Expand Widget Templates. Jangan lupa juga BackUp template sobat (buat jaga-jaga kalo ada yang error).
7. Cari kode ]]></b:skin> (CTRL+F)
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);}8. 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 == "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><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>Selesai deh modifikasinya, Semoga bermanfaat ya sobat. :)
Tambahan :
Untuk kode CSS nya, bisa sobat kreasikan sendiri sesuai keinginan sobat masing-masing.
Available link for download
