ediTEMP Memperbagus tampilan image popular pos

Memperbagus tampilan image popular pos

Walaupun beberapa diantara para master blogger banyak yang menganggap bahwa popular post juga bisa merugikan si pemilik blog, dengan penjelasan bahwa akan meningkatkan pencurian materi oleh blogger nakal yang suka copas materi laris, namun pada kenyataannya tetap saja masih banyak blogger yang menampilkan widget Popular Post.

Alasan para blogger yang tetap memasang widget Popular Post adalah bahwa widget ini dianggap cukup penting untuk ditampilkan, karena berfungsi untuk menunjukkan kepada pengunjung, tentang posting blog yang paling sering dibaca oleh pengunjung, disertai harapan bila akan menarik perhatian pengunjung untuk betah datang kembali ke blog tersebut.

ediTEMP sendiri tergolong yang lebih memilih menampilkan widget ini. walaupun dengan pilihan hanya menampilkan judul posting saja tanpa item-thumbnail dan tanpa pula item-snippet. Ini semua tentunya karena ediTEMP mengutamanakan pemilihan performances dari pada appearances.

Untuk blogger yang lebih memilih keseimbangan antara performances dan appearances, pasti akan memasang widget Popular Post dengan menampilkan item-thumbnail + snippet, dengan pengaturan tampilan secara default blogger. Untuk memperoleh tampilan image yang bagus, maka pengaturan item-thumbnail img tidak boleh melebihi width:72px dan height:72px.

Sedang yang akan di bahas dibawah ini adalah pengaturan tampilan image popular post, bagi blogger yang mengutamakan appearances dari pada performances, dimana kecantikan wajah blog lebih di utamakan dengan resiko loading agak sedikit terganggu, terutama bagi blogger yang ingin menampilkan image popular post dengan ukuran yang lebih besar dari 72px, misalnya 300px atau 336px sesuai lebar sidebar yang dipasang pada blog.

Dari hasil experiment ediTEMP, memperbaiki ukuran (pixel) untuk image Popular Post ternyata tidaklah se rumit memperbaiki pixel image posting yang di tampilkan pada halaman home page (menggunakan jscript). Dengan sedikit sentuhan yang sangat mudah, ternyata tampilan image popular post dengan ukuran yang lebih besar bisa menjadi lebih bagus dan elok dipandang mata. 

setelah kita mengubah / menerapkan css :

#PopularPost1 item-thumbnail {margin:0;padding:0;width:100%;height:auto}

atau mungkin juga seperti ini :

#PopularPost1 item-thumbnail img {margin:0;padding:0;width:100%;height:auto}

Mari amati pengaturan image popular post default blogger, seperti ini,


coba perhatikan bila nilai (value) yang tertera pada aturan secara default (data:post.featuredImg, 72, &#quot;1:1&#quot;

maka bila ukuran image diatur menjadi lebih besar dari width:72px, pasti tampilan iamge akan blur seperti ini :



Hanya dengan mengganti angka 72 manjdi 336 dan mengatur 1:1 menjadi 8:5,




Nilai 336 tidaklah mutlak. Lebih besar dari 336 juga tidak mengapa, tentunya dengan resiko semakin besar nilainya maka akan semakin mengganggu loading blog. Value 336 hanyalah contoh pemilihan ukuran terkecil, demi menyesuaikan lebar .sidebar .widget blog dicontohkan yang berukuran width:336px. Bila .sidebar .widget diatur dengan lebar 300px, demi kecepatan loading gunakanlah angka 300

Perbandingan panjang dan lebar dari 1:1 diubah menjadi 8:5 juga bukan value mutlak, itu hanya karena pada sidebar yang dijadikan contoh dan kaitannya dengan ukuran gambar yang di upload saja, secara kebetulan tampilan paling enak dipandang mata dan crop image tidak memotong bagian penting gambar, pas menggunakan perbangingan 8:5. 

Perbandingan itu bisa diubah misalnya 4:3 atau 5:4 atau 5:3 atau yang lainnya, disesuaikan dengan ukuran gambar yang pertama di upload pada sebuah postingan, dan juga lebar sidebar. Yang perlu diingat adalah bahwa angka pertama dari perbandingan itu mewakili lebar gambar dan angka kedua mewakili tinggi gambar. Ibarat perbandingan 4: 3, itu bisa dimisalkan bila lebar gambar = 4cm maka tinggi gambar otomatis = 3cm.

Bila sudah menggunakan perbandingan panjang lebar pada image popular post itu sudah di atur, agar image yang akan muncul ukurannya statis, usahakan membuat gambar pertama pada tiap posting dengan perbandingan yang sama.

Tampilan image popular post yang sudah di modifikasi dengan mengganti value 72 menjadi 336 dan value perbandingan 1:1 menjadi (persegi), menjadi 8:5 (persegi panjang), seperti dibawah ini.




lihatlah bahwa kualitas gambar menjadi sangat jelas dan tidak blur

Bagi yang ingin mencoba, silakan dicoba, dan bila ternyata ujung ujungnya tidak suka, tinggal kembalikan saja lagi ke ukuran default kembali.

Lebih jauh mengamati kualitas image popular post silakan lihat  DEMO
Untuk memperbaiki tampilan image posting pada Home Page Blog, SILAKAN MASUK KESINI

Demikian pembahasan tentang Memperbagus tampilan image popular pos yang bisa ediTEMP sajikan. Ralat, saran, masukan, kritik dan/atau pertanyaan, bisa disampaikan melalui kolom Komentar.

Cobalah untuk membaca 3 Komentar di bawah ini, barangkali disana ada tambahan informasi yang jauh lebih mendalam

  1. Balasan
    1. kembali kasih,
      bila ada sempat silakan dicoba

      Hapus
  2. Pantesan blog maha guru fast banget loading nya, terima kasih ilmu nya guru :)

    BalasHapus

Formulir Kontak

Nama

Email *

Pesan *