Modifikasi Popular Post Hanya Thumbnails Sederhana

Popular Post Hanya Thumbnails
Beberapa hari ini saya enggak update postingan di Kompi Ajaib ini dan juga belum bisa blogwalking ke blog-blog sahabat... Saya tengah mencoba membuat template khusus untuk game online. Pengerjaannya masih jauh dari sempurna...hehehehe maklum pembuatannya disela-sela waktu kerja....

Namun kali ini saya mencoba update postingan yaitu memodifikasi popular post hanya thumbnails saja. Modifikasi popular post ini cukup sederhana. Sebenarnya sudah banyak bertebaran tutorial seperti ini dengan modifikasi yang cukup keren, namun tidak ada salahnya juga untuk sharing hasil modifikasi sendiri.

Hasil modifikasinya akan tampil seperti gambar di atas dengan 3 gambar ke kanan dan 3 gambar ke bawah. Mungkin ini akan cocok untuk blog galeri atau blog game online seperti yang sedang saya kerjakan. Bagi yang tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama

Tentunya Anda harus menambahkan widget popular post dulu. Masuk ke tata letak kemudian tambahkan gadget dan pilih popular post. Kemudian setting popular post-nya dengan pilihan hanya thumbnail dan atur jumlah post yang tampilnya ke angka 9 kemudian save gadgetnya.

2. Langkah Kedua

Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

#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}

3. Langkah Ketiga

Silahkan "jump to widget" pilih popular post untuk menuju kode html popular post. Kemudian cari kode ini <!-- (3) Show only thumbnails --> dan geser ke bawah sedikit Anda akan menemukan kode seperti di bawah ini.

<div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>

Silahkan ganti dengan kode di bawah ini.

<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>

Jika thumbnilnya kurang pas dengan lebar widget blog Anda silahkan tambahkan pada angka 90 (yang berwarna merah pada langkah ke-2 dan ke-3).

Selesai... 

Sebenarnya ini bisa dimodif lagi untuk gambarnya misalnya dengan efek memutar atau zoom, namun saya sendiri suka merasa pusing kalau lihat gambar perputar-putar hehehehe.... selamat mencoba...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments