Bikin Popular post hanya tampil gambar

ikhsanudin on

Wednesday, June 25, 2014

Bikin Popular post hanya tampil gambar

Bikin Popular post hanya tampil gambar. Menu popular post sebenarnya telah disediakan pada widget blogger, namun kita juga dapat membuatnya sesuai dengan keinginan diantara popular post hanya tampil gambarnya saja tanpa text

1. Login ke blogger
2. buat terlebih dahulu poplular post dengan cara : Tambah Gadget > Entri Populer Tambahkan > hilangkan conteng cuplikan lalu Simpan

3. Pilih template
4. Edit html
5. Cari kode : ]]></b:skin> Letakkan kode berikut diatasnya:
.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:3px;} .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(-0deg) ;-webkit-transform: scale(1.3) rotate(-0deg) ;-o-transform: scale(1.3) rotate(-0deg) ;-ms-transform: scale(1.2) rotate(-0deg) ;transform: scale(1.3) rotate(-0deg);}
.GoogleGenius-SEO {font-family: verdana; text-align: justify; color: #fff; font-size: 2px; line-height: 0.9; display: inline-table;}

6. Kemudian car lagi kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

ganti kode tersebut 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 == &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'>
<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' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi2_C81LJrQu2zwec-jtAmszhBq4pVDnp-wBiJ1JQa-gQv_W2pd3DIHpZxHScjLxuX3npr9Ah9ZttzbLI3vGXEGWi_8_pg0s9q0eY1XJl_Fq_p4NslIPuaQg3iS6xcG-uGNbg35v88IsA/s1600/no+image.jpeg'/>
</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>

7. Simpan template, lihat hasilnya.



Your Keywords Here

Labels: Blogger, Tutorial

Thanks for reading Bikin Popular post hanya tampil gambar. Please share...!