ediTEMP Script Pengatur Tampilan Gambar pada Home Page Blog

Script Pengatur Tampilan Gambar pada Home Page Blog

Para Sahabat Blogger yang Budiman, pernahkah anda merasa risi atau kurang sreg dengan tampilan image atau gambar yang muncul pada home page blog ??. Jika anda merasakan hal semacam itu dan diiringi keinginan untuk mencoba memperbaiki tampilan gambar tersebut agar bisa terlihat lebih terang, coba pasang script yang akan ediTEMP share di akhir posting ini :


Tapi tidak ada salahnya bila sebelum memutuskan memasang script tersebut, coba sekali lagi lihat tampilan dan kualitas gambar atau image pada home page, mungkinkah seperti ini ???



Bila demikian adanya, berarti positif, itu image masih default pengaturan dasar dari blogger, dan bila anda malas untuk memasang script tersebut, sebaiknya atur ukuran image tersebut ..... jangan seperti contoh diatas yang mencapai width 450px (jadi super bureng kan!!!), yang paling bagus adalah gunakan width dan height 72px, karena ukuran itu merupakan pengaturan yang diterapkan pihak blogger, mungkin akan terlihat seperti ini :



walau masih tetap bureng .... tapi lumayan ...

Tapi bila anda ingin tampilan yang lebih jernih, silakan copy :

============================
<script>
//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
} resizeThumb('Blog1', 0);
//]]>
</script>
============================
dan paste pada template blog, bisa di dalam includable='post'
tepat dibawah kondisional pengatur tampilan di home page seperti ini,

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
paste disini script tersebut diatas
</b:if>
</b:if>


Kondisional tersebut berfungsi agar script tersebut tidak bekerja pada halaman statis maupun halaman posting. Hanya akan bekerja pada Halaman Home Page

NB :

Tanda seru yang diletakkan di depan tanda sama dengan berfungsi sebagai penolak
!= &quot;static_page&quot; artinya jangan bekerja pada halaman statis
!= &quot;item&quot;  artinya jangan bekerja pada halaman posting

Untuk lebih lebih men 100% kan keyakinan bila kondisional tersebut benar benar bekerja, pasang saja secara tersendiri untuk mengapit script tersebut, jadi seperti ini

=========================
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script>
//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
} resizeThumb('Blog1', 0);
//]]>
</script>
</b:if>
</b:if>
=========================

Pasti tampilan image akan berubah jadi menakjubkan !!!!....



Image bisa menjadi sangat jelas dan terlihat penuh 100% seluruh bagian image, ckckckck tanpa ada sedikitpun crop.

Tapi langkah ini bukannya enak tanpa resiko, coba saja cek di Google Page speed insight, dijamin kualitas speed blog akan lansung menurun drastis dan bernilai merah

Bagi blogger yang mengagungkan nilai appearances, biarkan saja itu walaupun blog menjadi lemot alias LOLA, yang penting tampilan jadi excellent. Tapi bagi blogger pengagum performances, yang mengutamakan kecepatan loading dan takut nilai meah pada google page insight, yuk atur ulang itu script, jangan kawatir, itu sangat gampang, caranya ????

  • Ubah nilai 0 menjadi 200 (menurut hipotesa ediTEMP angka terbaik ada pada 200 tidak mempengaruhi nilai page speed dan tampilan gambar masih cukup bagus), gak tahu untuk blogger yang lain, mungkin punya kesimpulan yang berbeda, script jadi seperti ini :

============================
<script>
//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
} resizeThumb('Blog1', 200);
//]]>
</script>
============================
angka 0 di fungsikan sebagai tanpa crop
angka diatas 0 difungsikan sebagai ukuran gambar yang akan ditampilkan (dalam ukuran pixel)

Dan ini punya efek image tetap jernih namun terkena crop, alias terpotong. Dan hanya 200px persegi bagian tengah saja yang bisa terlihat.



Tapi itu akan membuat nilai pada page speed insight menjadi normal kembali.

Bila ternyata masih mempengaruhi coba kecilkan angka 200 itu dan sesuaikan ukuran image-thumbnail img dengan ukuran yang sama

Dan bila tetap saja masih mempengaruhi, coba pasang script itu di bagian paling bawah template, yaiut tepat diatas </body>

Dan bila masiiiiiiih saja tetap tidak mengenakkan, yaaah apa daya, batalkan saja pemasangan script tersebut

Untuk memperbaiki tampilan image popular post, SILAKAN BUKA DARI SINI

Demikian pembahasan tentang Script Pengatur Tampilan Gambar pada Home Page Blog yang bisa ediTEMP sajikan. Ralat, saran, masukan, kritik dan/atau pertanyaan, bisa disampaikan melalui kolom Komentar.

Belum ada Komentar

Poskan Komentar

Formulir Kontak

Nama

Email *

Pesan *