Ikhsanudin Ikhsanudin Author
Title: Bikin Popular post hanya tampil gambar
Author: Ikhsanudin
Rating 5 of 5 Des:
Bikin Popular post hanya tampil gambar Bikin Popular post hanya tampil gambar . Menu popular post sebenarnya telah disediakan pada widge...
Bikin Popular post hanya tampil gambar
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
Bikin Popular post hanya tampil gambar

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='http://1.bp.blogspot.com/-6M8vzHoluCg/UsukefrqUsI/AAAAAAAAE8g/y9hVbBc1JCo/s1600/no%2Bimage.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

About Author

Advertisement

 
Top