Tags ALT Otomatis Pada Setiap Gambar di Blog

Cara memberikan Tags ALT Otomatis pada setiap gambar di Blogspot.  Postingan Sebelumnya yaitu Cara Membuat CTRL+U Redirect Dengan Javascript, sekarang lanjut lagi membahas tentang tags ALT otomatis pada Image di Blogspot. Pengalaman sendiri nih sob, yang suka males ataupun lupa naruh ALT pada tiap image yang dipasang. Penting gak penting lebih banyak pentingnya sih, diantaranya dengan Tags ALT ini bila image/foto kita di upload dan di copas bisa kebaca oleh google bot.
Jadi Sedikit banyak ngaruh juga di Image SEO. Yang pasti google lebih tahu mana yang asli dengan yang copas. Disamping itu juga ada manfaatnya buat validalitas di CSS Validation Service biasanya image yang ada di blog kita bila tidak ada Tags ALT kedetect error sob. Selebihnya anda cari sendiri yoo. Hehe

Bila sudah males baca basa-basi saya silahkan langsung saja klik menu dibawah ini:

Menu di dalam postingan:

1. Kode JavaScript
2. Cara Pemasangan

Nah bila tidak perlu repot-repot dalam kita memberi Tags ALT alangkah lebih baiknya bisa sobat memakai cara ini. Pastinya lebih efisien.
Kode yang digunakan disini yaitu dengan JavaScript sob. Yowes, simak lebih lajut dibawah ini.

Kode JavaScript

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
  });
});
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
  });
});
//]]>
</script> 

Note: 
Perhatikan kode JS yang saya tandai dengan warna merah, bila ditemplate sobat sudah ada kode JS tersebut, hapus saja kode tersebut. Tujuannya agar tidak terjadi Crash.

Cara Pemasangan

1. Login pastinya
2. Masuk Template - Edit HTML - Lanjutkan - Ceklist Expand template widget.
3. Cari kode </body>
4. Bila sudah ketemu, letakan kode script'nya diatas kode </body>
5. Save Template.


Piye sob, gampang kan Cara memberikan Tags ALT Otomatis pada setiap gambar di Blogspot.
Selamat mencoba, semoga bermanfaat.
Salam Blogger !! \m/

Update:

Kode script diatas bisa kita perisingkat lagi menjadi seperti dibawah ini.

$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
    $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
  });
}); 

Lebih ringkas dengan fungsi yang sama. Jangan lupa kode JS, dan pembungkusnya. Semoga bermanfaat.