Tags ALT Otomatis Pada Setiap Gambar di Blog

Viyan Pradita Minggu, November 18, 2012 ,

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.

Ditulis Oleh :

Artikel Tags ALT Otomatis Pada Setiap Gambar di Blog ini dipublish pada hari: Minggu, November 18, 2012. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

40 komentar
Terjun Ke Kolom Komentar

  1. sob, minta ijin copas script untuk bikin alt otomatis. bukan copas artikel. boleh khan?

    BalasHapus
  2. wah, makasi infonya, ntar saya coba deh..

    BalasHapus
  3. Makasih mas, dicoba dulu :-bd

    BalasHapus
  4. terima kasih udah share artikel yang menarik dan bermanfaat ini..

    BalasHapus
  5. Mz makasih ya udh tak coba dan bisa Alt nya ...sipp :-bd

    BalasHapus
  6. Wah, bermanfaat sekali nich sob...
    soalnya ane biasanya pake cara manual

    BalasHapus
  7. waduh saya kurang ngerti nih...
    gimana cara kerjanya sob..??
    salam kenal dari http://gudangmakalahmu.blogspot.com/

    BalasHapus
  8. mantapni gan langsung dicoba thanks infonya

    BalasHapus
  9. makasih yah tipsnya, bookmark dolo ahh \o/

    BalasHapus
  10. Wahhh bagus caranya,,,,jadi ga susah tambahkan satu persatu....:-bd

    BalasHapus
  11. lama juga nih ga blog walking nyari backling..
    maaf yah kalo keganggu
    :D
    makasih buat info dan hiburannya.

    BalasHapus
  12. Kalau kode di atas sdh dipasang sesuai petunjuk di atas, trus gmn caranya mengetahui apakh kodenya benar2 memasang atribut alt pada setiap image yg ada di blog sob..

    BalasHapus
  13. kunjungan perdana sobat!

    ane nyimak aja boss...

    visit my blog => Aan Shared
    http://aan-shared.blogspot.com

    BalasHapus
  14. kunjungan perdana sobat!

    ane nyimak aja boss...

    visit my blog => http://aan-shared.blogspot.com

    BalasHapus
  15. izin copas scriptnya gan, untuk dipasang di blog saya http://www.dokyasde.com

    BalasHapus
  16. Bagus gan ,
    saya coba yah thanks

    visit=www.city directory.co.id

    BalasHapus
  17. thx gan info nya ane coba praktekan yah ,,,,www.sewa-villa.net

    BalasHapus
  18. Uantuk script yang no 2 jangan lupa JS dan pembungkusnya maksudnya gimana gan?. Untuk pemula mah harus di detil nih....

    BalasHapus
  19. sepertinya script di atas menggunakan nama file sebagai alt dan judul. nah kalau mau diganti menjadi judul post sebagai alt nya gimana?

    BalasHapus
  20. Asik nih. Tapi, yang saya cari itu.... cara ngasih alt tag ke avatar komentar. Soalnya mengurangi skor kalau ada gambar yang nggak pakai alt.

    BalasHapus
  21. script yang no 2 jangan lupa JS dan pembungkusnya maksudnya gimana gan?

    BalasHapus
  22. Oh jadi sebelumnya harus ada tambahan script setiap kali pemasangan gambar ya

    BalasHapus
  23. nah sebuah cara untuk optimasi blog yang lain ya shob. terimakasih infonya ya master

    BalasHapus
  24. Kalau di blog saya " http://www.mestiqui.com/ " pakainya ALT tag di gambar secara manual gan :)

    BalasHapus
  25. alt tag tiap gambar kan beda2 gan? ini juga?

    BalasHapus
  26. thanks infonya, ijin share ilmu

    BalasHapus
  27. www.indobet77.com

    Master Agen Bola , Casino , Tangkas , Togel Terbesar
    dan Terpercaya Pilihan Para Bettor

    Promo Terbaru :
    - Bonus  10% New Member Sportsbook
    - Bonus 5% New Member Casino Online
    - Bonus 10% Setiap Hari Bola Tangkas
    - Togel Online
    - Sabung Ayam ( New Produk )
    - CASHBACK untuk Member
    - BONUS REFERRAL 5% + 1% Seumur Hidup

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : indobet77_sb2@yahoo.com
    - EMAIL : indobet77@gmail.com
    - WHATSAPP : +63 905 213 7238
    - WECHAT : indobet77
    - SMS CENTER : +63 905 213 7238
    - PIN BB : 2B65A547 / 24CC5D0F

    Salam Admin ,
    http://indobet77.com/

    BalasHapus
  28. Pengen yang lebih seru ...
    Ayo kunjungi www.asianbet77.com
    Buktikan sendiri ..

    Real Play = Real Money

    - Bonus Promo Red Card pertandingan manapun .
    - Bonus Mixparlay .
    - Bonus Tangkasnet setiap hari .
    - New Produk Sabung Ayam ( minimal bet sangat ringan ) .
    - Referal 5 + 1 % ( seumur hidup ) .
    - Cash Back up to 10 % .
    - Bonus Royalty Rewards setiap bulan .

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : op1_asianbet77@yahoo.com
    - EMAIL : asianbet77@yahoo.com
    - WHATSAPP : +63 905 213 7234
    - WECHAT : asianbet_77
    - SMS CENTER : +63 905 209 8162
    - PIN BB : 2B4BB06A / 28339A41

    Salam Admin ,
    http://asianbet77.com/

    BalasHapus
  29. saya tidak mengerti tentang scrip, titip link aja ya http://waptrick.blog2an.com

    BalasHapus
  30. wah terima kasih gan , tutorialnya

    BalasHapus
  31. o...begitu yah gan baru tau saya kalau gitu....

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers