Mengganti Script Image Dengan Div Dan Javascript

Untuk membangun sebuah blog yang dinamis tampaknya kita tidak sanggup lepas dari image atau gambar, baik gambar untuk background ataupun gambar untuk menunjang isi konten blog. Dengan image atau gambar akan menciptakan tampilan blog menjadi lebih menarik dan lebih hidup sehingga tidak menciptakan bosan pengunjung. 

Namun jangan lupa juga untuk betul-betul mengoptimasi gambar-gambar yang kita pasang di blog semoga tujuan kita untuk mempercantik tampilan blog malah jadinya menjadi bumerang alasannya yaitu membebani loading blog. Untuk menampilkan gambar di blog biasanya kita memakai script HTML yang tentunya kita semua sudah mengetahuinya ibarat di bawah ini.

 <img src='URL IMAGE'/>

Agar gambarnya menjadi lebih SEO maka script imagenya perlu ditambahkan alt dan title tag begitu juga dengan dimensinya sehingga akan tampak ibarat di bawah ini

 <img alt='ALT IMAGE' height='TINGGI IMAGE' src='URL IMAGE' title='TITLE IMAGE' width='LEBAR IMAGE'/>

Terlepas dari situ, kadang kita memerlukan sebuah gambar di dalam blog namun tidak memakai script image yang biasa digunakan ibarat script image di atas tadi dengan alasan-alasan tertentu. Untuk itu sekarang aku share cara mengganti script image dengan div dan pemanggilnya javascript.

Trik ini digunakan untuk memanipulasi robot peramban semoga image tidak terbaca sebagai gambar. Lho kok semoga tidak terbaca sebagai gambar? Untuk jelasnya silahkan lihat gambar di bawah ini

Perhatikan gambar di atas, terdapat dua buah gambar di dalamnya, satu gambar profil yang di atas dan satu lagi gambar postingan di bawahnya. Jika kita memakai script image yang biasa <img maka biasanya saat kita menshare postingan ke sosmed maka yang akan terbaca sebagai thumbnail sharing yaitu gambar atau image yang pertama terbaca yaitu image profil yang ditempatkan di sebelah kiri judul postingan bukan gambar di postingannya.

Untuk itu semoga gambar profil tidak terbaca sebagai image di postingan, kita perlu memanggilnya dengan div dan javascript ibarat di bawah ini.

Ganti script image <img dengan div di bawah ini

 <div id="imageDiv"></div>

Dan pakai javascript di bawah ini, sanggup disimpan di atas </head> atau </body>

 <script type='text/javascript'>
 //<![CDATA[
 $(window).load(function(){
 document.getElementById('imageDiv')
 .innerHTML = '<img alt='ALT IMAGE' height='TINGGI IMAGE' src='URL IMAGE' title='TITLE IMAGE' width='LEBAR IMAGE'/>';
 });//]]> 
   </script>

Sebagai demonya ibarat di bawah ini

Namun terlepas dari itu, kita sanggup coba juga gunakan imagenya sebagai background div pembangunnya.

Sumber https://www.kompiajaib.com/

Share this post