Cara Memperbesar Ukuran Gambar Popular Post Tidak Buram

Apakah cari ini bekerja dengan semestinya ?

Tentu saja iya, saya sudah membuktinya di salah satu blog saya. Seperti yang kita ketahui banyak sekali orang-orang yang memasang popular di blognya. Alasannya adalah supaya pengunjung tetap bisa bertahan di blog kita dalam waktu yang tidak singkat. Namun biasanya popular post tidak begitu menarik dan tidak terlalu mencolok di mata pengunjung. Maksud mencolok di mata pengunjung adalah mereka menganggap kalau teks tersebut bukan teks biasa namun teks popular post blog Anda. Cara supaya mereka bisa melihat popular post dengan jelas adalah diberi gambar yang cukup besar, setidaknya seukuran dengan sidebar blog Anda.

Cara ini bisa membuat gambar widget popular post Anda menjadi besar tanpa mengurangi kualitas gambar aslinya atau bisa disebut tidak buram. Memperbesar gambar widget popular post sangat cocok untuk template yang yang bertemakan download template dan blog yang sejenis membagikan sesuatu yang sangat perlu gambar. 

• DEMO

Mau tahu seperti apa cara membuatnya ? Silahkan ikuti tutorial yang sangat sulit, bikin pusing mudah dibawah ini.

Berikut tutorialnya:

1. Pastikan Anda sudah memasang widget popular post + gambar.

2. Klik Template > Edit HTML. Kemudian pasang CSS ini tepat di atas </b:skin>

.PopularPosts .item-thumbnail img{width:160px;height:120px;margin:0}

Catatan: Silahkan ganti kode 160px dengan lebar gambar nantinya dan ganti 120px dengan tinggi gambar nantinya.

3. Tambahkan JavaScript di bawah ini tepat di atas </head> 

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  var dimension = 160;
  $('#PopularPosts1').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
    image.attr('width',dimension);
    image.attr('height',dimension);
  });
});
//]]>
</script>

Catatan: 160 adalah dimensi gambar nantinya. Sesuaikan dengan lebar gambarnya.

4. Silahkan simpan template. Dan lihat hasilnya yang keren banget.

Jika masih ada yang kurang jelas silahkan bertannya di komentar. Demikian postingan kali ini, semoga bermanfaat untuk Anda yang membacanya.

TAGS :

SHARE

Facebook

Twitter

Jonni Mulyawan

Menulis adalah salah satu cara saya menggunakan waktu luang.

RELATED POSTS