Mengganti Script Image Dengan Div Dan Javascript

Mengganti Script Image Dengan Div Dan Javascript

Bola Hero Gawai

Mengganti Script Image Dengan Div Dan Javascript

Mengganti Script Image Dengan Div Dan Javascript
Untuk membangun sebuah blog yang dinamis sepertinya kita tidak bisa lepas dari image atau gambar, baik gambar untuk background ataupun gambar untuk menunjang isi konten blog. Dengan image atau gambar akan membuat tampilan blog menjadi lebih menarik dan lebih hidup sehingga tidak membuat bosan pengunjung. 

Namun jangan lupa juga untuk betul-betul mengoptimasi gambar-gambar yang kita pasang di blog agar tujuan kita untuk mempercantik tampilan blog malah akhirnya menjadi bumerang karena membebani loading blog. Untuk menampilkan gambar di blog biasanya kita menggunakan script HTML yang tentunya kita semua sudah mengetahuinya seperti 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 seperti 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 menggunakan script image yang biasa dipakai seperti script image di atas tadi dengan alasan-alasan tertentu. Untuk itu kini saya share cara mengganti script image dengan div dan pemanggilnya javascript.

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

Mengganti Script Image Dengan Div Dan Javascript

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 menggunakan script image yang biasa <img maka biasanya ketika kita menshare postingan ke sosmed maka yang akan terbaca sebagai thumbnail sharing adalah gambar atau image yang pertama terbaca yaitu image profil yang ditempatkan di sebelah kiri judul postingan bukan gambar di postingannya.

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

Ganti script image <img dengan div di bawah ini


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

Dan pakai javascript di bawah ini, bisa 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 seperti di bawah ini


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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

41 Comments Add Comment

Waduh langsung disambar mas Ikhsan hehehe :)

Balas

wah, pantas kang selama ini kalau saya setiap share postingan bloh pasti yang muncul bukan gambar postingan bahkan malah muncul wajah yang komentar posting tersebut. oala ini toh permasalahannya, thanks tutor kang, langsung di cobian :D

Balas

baru pertama kali kang pertamax, btw itu tulisan pertamax dibawah komentar pertamax gimana kang buatnya?

Balas

Itu dulu dari kang Ismet mas :) coba saja cari di kang Ismet

Balas

Untuk masalah itu coba dulu dengan membuat gambar postingan yang besar, kalau ketika share postingan ke sosmed masih muncul photo komentar coba lihat di thumbnail sharingnya biasanya ada panah kanan kiri untuk mengganti gambarnya

Balas

mantab kang triknya
BTW , ada akun adsense baru ya heheheh
selamat kang

Balas

saya masih awam kang buat mengkombinasikan div style karena biasanya suka patumbang tindih saur bahasa sunda mah :d
coba di test dulu kang makasih share nya

Balas

Wuihhh sip nih Kang pertamax...hahahyyyy

Balas

dipelajari dulu kang soalnya masih bingung heheheheheh :)

Balas

Heheheh iya mas adsense dari temen :)

Balas

Silahkan mas dicoba :)

Balas

Sama-sama mas Sopyan, silahkan dicoba dulu :)

Balas

Hehehehe sip juga mas Icah :)

Balas

Iya mas Ade silahkan dipelajari :)

Balas

Wew, keren kang bisa narsis.

Balas

Kadang ada postingan yang jika di share ulang di G+ gambar yang muncul itu foto Profile komentator.
Kalo untuk itu cara mengatasinya gimana ya Kang?

Balas

Hehehe kali-kali narsis ga apa-apa kan mas :)

Balas

Untuk masalah itu coba dulu dengan membuat gambar postingan yang besar, kalau ketika share postingan ke sosmed masih muncul photo komentar coba lihat di thumbnail sharingnya biasanya ada panah kanan kiri untuk mengganti gambarnya

Balas

kang adhy saya mohon bantuannya di OOT kang saya tunggu balasanya
maaf ngrepotin n terima kasih sebelumnya

Balas

Bingung saya komen apa... yang pasti semakin lama kang Adhy tambah pinter :-bd

Balas

satu lagi kang... mungkin perlu ditambahkan variable untuk load beberapa image :D

Balas

ternyata script image bisa di ganti dgn div ya Kang... ikutan nyoba ah heheheehe

Balas

Wah, keren tutorial nya :D saya coba dulu Mas :D

Balas

cieeeee.... :D
mas adhy dah pake GA ni yeee :-bd

Balas

Iya mas nanti saya lihat :)

Balas

Ah kang Ismet tiasa wae :) masih harus banyak belajar lagi dari kang Ismet nih :)
Iya kang perlu variable lain untuk me-load beberapa gambar ... makasih masukannya :)

Balas

Iya mas sebagai alternatif jika dibutuhkan dengan alasan tertentu :)

Balas

Silahkan dicoba mas :)

Balas

Iya bung dikasih pinjem sama temen hehehehe :)

Balas

otak saya baru kepentok dozer kang tadi malem euy...jadi ngganti script image pake div nya malah bikin isi kepala saya berdenyut lebih kenceng...gimana ini teh coba?

Balas

Hehehehe coba ikat yang kenceng pake sarung kang :D

Balas

mas...! menu blogger sekarang ada yang baru, "Menu kampanye"

Balas

tambahan: menu pengasilan (Adsense) jadi menu kampanya (google adwords)

Balas

Hehehehe kayaknya ikutan indonesia ya mau kampanye Google juga mas :)

Balas

Bagus buat toko online tuh ya mas :)

Balas

iya mas, kalau buat toko online memang pas banget dan saya cek untuk 1000x tanyang bayarnya 250rb (promo)

Balas

Patut di coba nih tutornya mas adhy..

Balas

cara mengganti Image - ke div Id, ada d Posting atau di Edit Html? bsa kasih tw step2nya, maklum new B

Balas

Bukannya pakek javascript juga bikin lemot kang?

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×