Cara Mengatasi Gambar Thumbnail Terpotong Biar Tampil Sempurna

Djangkaru Bumi

Internet

Komentar

Melanjutkan artikel sebelumnya yaitu tentang mengatasi gambar thumbnail yang blur. Saya lagi pengen membahas yang ringan-ringan dulu. Karena saya mengamati pengunjung blog ini, pembaca lebih suka dengan hal-hal ringan. Salah satunya tentang seputar ngeblog. Mungkin, kini banyak orang yang ingin terjun menjadi seprang Blogger. Kegiatan menulis tapi menghasilkan duit. Pekerjaan yang enjoy, tapi menghasilkan dolar. Siapa seh yang tidak pengen?

Saya sering mengajak teman yang sudah melamar keja kesana-kemari, tapi belum ada panggilan juga. Untuk menjadi seorang penulis online (Blogger) atau Youtuber. Siapa tahu keberuntungan ada disana, pastinya sambil menunggu pengumuman lamaran kerja. Tidak hanya itu saja harapan saya, agar mesin pencari google itu dipenuhi oleh artikel atay youtube yang bernuansa positif.

Aduh jangan ingat jaman era-2010-an. Blog bertema Oh Mama Oh Papa, atau video youtube yang beradegan mantap-mantap, alias wik-wik lebih punya power. Lebih berkuasa, lebih menonjol. Pengunjungnya brow, fantastis banget. Pengunjungnya termasuk admin blog ini ya? Sssst...jangan kenceng-kenceng.

Bagi yang belum membaca artikel tentang Mengatasi Gambar Thumbnail Blur agar Tampil Homepagenya Keren silakan kunjungi dulu. Siapa tahu artikel tersebut bermanfaat bagi yang punya kendala gambar thumbnailnya ngeblur. Nah kali ini saya ingin membahas tentang cara mengatasi gambar thumbnail terpoting biar tampil sempurna.

Ternyata kode untuk mengatasi gambar thumbnail blur punya pengaruh juga, yaitu gambar thumbnail terpotong. Gambar tidak tampil utuh dan sempruna. Lalu bagaimana cara mengatasinya. Silakan cari kode tersebut. Biasanya kodenya seperti dibawah ini:

    <script type='text/javascript'>
    //<![CDATA[
    function replaceText(){if(!document.getElementById){return;}
    bodyText = document.getElementById("BlogX");
    theText = bodyText.innerHTML;
    theText = theText.replace(/s72-c/gi, "s300-c");
    bodyText.innerHTML = theText;
    }replaceText();
    //]]>
    </script>

atau

    <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('BlogX', 300);
    //]]>
    </script>

Kode ungu sekedar untuk mengelabui, agar tampilan artikel ini tetap baik, sebenarnya kodenya "Blog1". Yang perlu diperhatikan hanya kode yang berwarna merah "c". Silakan ganti dengan huruf "a"

Sehingga tampilan kodenya seperti dibawah ini:

    <script type='text/javascript'>
    //<![CDATA[
    function replaceText(){if(!document.getElementById){return;}
    bodyText = document.getElementById("BlogX");
    theText = bodyText.innerHTML;
    theText = theText.replace(/s72-c/gi, "s300-a");
    bodyText.innerHTML = theText;
    }replaceText();
    //]]>
    </script>

atau

    <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 + "-a");
    image[i].width = size;
    image[i].height = size;
    }
    } resizeThumb('BlogX', 300);
    //]]>
    </script>

Lihat Pratinjau, jika sudah mantak Klik Simpan Perubahan

Bagaimana mudah sekali bukan? Cukup mengganti kode atau angka "c" menjadi "a". Aduh, tutorial yang seharusnya singkat kenapa harus bertele-tele? Ya harap maklum, biar artikelnya panjang, terpaksa ya harus muter-muter dulu. Kalau singkat kan, kurang gimana gitu, kan ada pepatah jika bisa dipersulit, kenapa dipermudah. Yo wislah sak karapmu!

Oh iya, tampilan thumbnail ini pastinya juga akan perpengaruh pada kolom thumbnail awal ya, mau tidak mau ya harus merubah lebar dan panjang kolom thumbnail juga juga. Aduh siap perpusing-pusing lagi deh kalau begitu. Ya begitulah, untuk mendapatkan tampilan template yang sesuai harapan, terpaksa harus edit sana-sini. Jika kode dalam kutipan teks (blockquote) terpotong iklan google adsense harap dimaklumi ya. Iklan dalam artikel gadang begitu. Yang penting pembaca bisa memahami akan apa yang saya sampaikan ini. Salam ngeblog!