10 January 2017

Menggunakan alt tag untuk caption gambar Blogger

Selain menggunakan fitur caption yang biasanya memakai tag seperti tabel dan div, juga bisa menggunakan alt sebagai alternatif. Alasan menggunakan alt sebagai caption salahsatunya karena jika menggunakan tag selain alt pada gambar pertama, akan ikut terbawa tulisan lain yang bisa menjadi deskripsi atau cuplikan tulisan.

Masalah ini berlaku untuk pengguna yang menggunakan tipe template dengan cuplikan tulisan yang biasanya disertai thumbnail. Namun jika posisi gambar tidak berada di area cuplikan tulisan, maka caption gambar tidak akan terbawa.

Image : alt tag

Demo seperti pada gambar di atas. Copy script di bawah ini dan paste di atas kode </head>

<script type="text/javascript">//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/

var altBackground   = "#ffffff";
var altTextColor   = "#000000";
var altPaddingTop   = 5;
var altPaddingBottom  = 0;
var altPaddingSides   = 5;
var altMarginBottom   = -60;

$undefineddocument).readyundefinedfunctionundefined){
 $undefined'.post-body').findundefined'img').eachundefinedfunctionundefinedn, image){
        var image    = $undefinedimage);
  var alt    = image.attrundefined'alt');
  var id     = image.indexundefined);
  var imageAltId   = 'imagealt'+n;
  image.parentundefined).addClassundefined'postImage');
  var paddingString  = altMarginBottom + 'px ' + altPaddingTop + 'px ' + altPaddingSides + 'px ' + altPaddingBottom + 'px ' + altPaddingSides + 'px'
  image.afterundefined$undefined'<div>
').cssundefined'padding',paddingString).cssundefined'color',altTextColor).cssundefined'background-color',altBackground).cssundefined'opacity','0.6').cssundefined'filter','alphaundefinedopacity=60)').attrundefined'id',imageAltId).textundefinedalt));
  var divHeight = $undefined'#'+imageAltId).heightundefined) + altPaddingTop + altPaddingBottom;
  $undefined'#'+imageAltId).cssundefined'margin-top','-'+divHeight+'px');
    });
});
//]]></script>

Menggunakan alt tag untuk caption gambar Blogger Rating: 4.5 Diposkan Oleh: Megilan

0 comments

Komentar tidak relevan, tidak akan ditampilkan.

Show EmoticonHide Emoticon
Terima kasih sudah berkomentar