Modifikasi Popular Post Hanya Thumbnails Sederhana

Beberapa hari ini aku enggak update postingan di Kompi Ajaib ini dan juga belum dapat blogwalking ke blog-blog sahabat... Saya tengah mencoba menciptakan template khusus untuk game online. Pengerjaannya masih jauh dari sempurna...hehehehe maklum pembuatannya disela-sela waktu kerja....

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

Hasil modifikasinya akan tampil ibarat gambar di atas dengan 3 gambar ke kanan dan 3 gambar ke bawah. Mungkin ini akan cocok untuk blog galeri atau blog game online ibarat yang sedang aku 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 lalu tambahkan gadget dan pilih popular post. Kemudian setting popular post-nya dengan pilihan hanya thumbnail dan atur jumlah post yang tampilnya ke angka 9 lalu save gadgetnya.

2. Langkah Kedua

Silahkan copy isyarat 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 isyarat html popular post. Kemudian cari isyarat ini <!-- (3) Show only thumbnails --> dan geser ke bawah sedikit Anda akan menemukan isyarat ibarat 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 isyarat 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 dapat dimodif lagi untuk gambarnya contohnya dengan pengaruh memutar atau zoom, namun aku sendiri suka merasa pusing bila lihat gambar perputar-putar hehehehe.... selamat mencoba...

Sumber https://www.kompiajaib.com/

Share this post