Cara membuat Populer Post hanya Thumbnail saja

Cara membuat Populer Post hanya Thumbnail saja

Jalak Ikal 25 September 0 komentar
Cara mudah membuat populer post yang tampil hanya Thumbnail saja,banyak sekali jenis populer post maksud saya banyak sekali Pariasi yang di buat oleh para blogger untuk mempercantik blog nya tersebut,dan salah satu nya membuat populer post yang tampil hanya thumbnail saja,mungkin anda sudah bosa melihat populer post bawaan dari blogger,atau populer post yang hanya warna warni.
Kenapa anda tidak coba dengan populer post yang tampil hanya dengan thumbnail saja,pasti akan berbeda dari biasa nya,populer post ini juga tidak kalah unik dan tidak kalah cantik dari populer post yang lain nya,jadi untuk anda kenapa tidak mencoba populer post seperti ini yang tampil hanya thumbnail nya saja

Cara pembuatan populer post ini seperti hal nya anda membuat populer post yang warna warni atau yang lain nya,mengandalkan Css,Dan juga merubah sedikit kode bawaan nya,jadi jika anda tertarik dengan populer post ini,bisa anda coba menggunakan trik ini dengan cara
  • Masuk ke peng editan Html di template anda
  • Kemudian cari kode </b:skin> untuk mempermudah pencarian silahkan anda tekan Ctrl+F secara bersamaan
  • Setelah itu letakan kode berikut sebelum kode tersebut
  #PopularPosts1 {width:100%;background:none;}
#PopularPosts1 .widget-content {margin: 0 !important; }
#PopularPosts1 ul {margin: 0 !important; padding: 0 !important; }
#PopularPosts1 ul li {background:none ;list-style-type: none;margin:0;
padding:0 !important}
#PopularPosts1 ul li .item-title{display:none}
#PopularPosts1 li {float:left;list-style:none;}
#PopularPosts1 .item-thumbnail img {float:left;margin-bottom:3px;
width:90px;height:90px;border:none;transition:all 400ms ease-in-out;}
#PopularPosts1 .item-thumbnail img:hover {opacity:.7}

  • Setelah anda meletakan kode di atas kemudian anda cari lagi kode yang mirip seperti kode di bawah ini
<!-- (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>

  • Setelah anda menemukan nya,silahkan anda ganti semua kode di atas menggunakan kode berikut
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<img alt='thumbnails' expr:src='data:post.thumbnail'
expr:title='data:post.title' height='90' width='90'/>
</a>
</div>

  • Kemudian Save Template anda dan lihat hasil nya

loading...
Ratings: 
Posted by Jalak Ikal, Published at 25 September and have 0 komentar

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi