Membuat sebuah fungsi yang kompatibel di semua browser merupakan harapan dan keinginan semua blogger. Apa yang terposting atau desain blog terlihat tampil tanpa perbedaan di semua browser adalah kepuasan. Salah satunya adalah text shadow. Memang, untuk membuat sebuah teks shadow dapat kita lakukan dengan menggunakan kode css saja, akan tetapi untuk membuatnya bisa tertampilkan di Internet Explorer maka sebuah kode khusus harus disertakan. Hal seperti ini terkadang terasa "ribet" dan merepotkan dan cenderung membuat kode yang dipergunakan semakin bertambah banyak, dan susahnya untuk menuliskannyapun acap kali terlupa. Untuk mengatasi persoalan seperti ini, kita dapat memanfaatkan jQuery text shadow. Scriptnya tidak terlalu banyak dan setelah terpasang maka text shadow dapat langsung dibuat hanya dengan satu kode yang sekaligus juga berfungsi dengan baik di IE. Cara untuk membuatnyapun teamat sederhana, karena kita hanya perlu menggunakan jQuery-1.2.6.js, jQuery-1.3.2.js atau jquery-1.3.2.js dan jquery-textshadow.js. Dengan pertimbangan banyaknya blogger yang menggunakan jquery-1.3.2.js atau jquery-1.3.2.min.js, maka kita akan sesuaikan saja dengan memanfaatkan jquery ini.
Cara membuat text shadow menggunakan jquery-textshadow
- Copy paste jquery-textshadow di bawah ini kemudian upload di file hosting/javascript hosting :
- Setelah jquery-textshadow.js ter-upload, simpan link-nya bersamaan dengan jquery-1.3.2.min.js dan sedikit script tambahan yang lain di atas <head>
- Contoh kode yang digunakan untuk membuat text shadow menggunakan jquery.
- Dengan kode di atas maka hanya akan berfungsi di luar IE. Supaya di IE-pun dapat berkerja dengan baik, maka kita harus tambahkan sedikit script seperti di bawah ini:
<script type="text/javascript">
Di atas script inilah baru kita letakkan jQuery-1.3.2.min.js dan jQuery-textshadow, sehingga bentuknya seperti terlihat di bawah :
$(document).ready(function(){
$('h1.shadow').textShadow();
});
</script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
Karena dua javascript terbawah hanya akan kita fungsikan di IE, maka kita akan tambahkan kode lain supaya javascriptnya juga hanya bekerja ketika blog dibuka di IE. Bentuknya menjadi seperti di bawah ini :
<script src="http://..../jquery-textshadow.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('h1.shadow').textShadow();
});
</script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<!--[if !IE]>
<script src="http://..../jquery-textshadow.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('h1.shadow').textShadow();
});
</script>
<![endif]-->
<head> - Apabila beberapa fungsi text shadow ingin kita tambahkan, maka kita tinggal rubah script terakhir menjadi seperti ini :
- Setelah script baru seperti di atas dibuat, maka hanya tinggal kita siapkan kode css untuk text shadow dan semua akan berfungsi dengan baik di semua browser.
/* jquery-textshadow.js */
(function($){
$.fn.textShadow = function(useroptions) {
return this.each(function() {
var obj = $(this);
obj.removeTextShadow();
var shadowarray = obj.css("text-shadow").split(" ");
var sradi = parseInt(shadowarray[3], 10);
var text = "" + obj.html() + "";
var padding = {
left:parseInt(obj.css("padding-left"), 10),
top:parseInt(obj.css("padding-top"), 10)
};
var defaults = {
color: shadowarray[0],
radius: sradi,
xoffset: parseInt(shadowarray[1], 10)-1+(padding.left-sradi) + "px",
yoffset: parseInt(shadowarray[2], 10)-1+(padding.top-sradi) + "px",
opacity: 50
};
var options = $.extend(defaults, useroptions);
options.color = (options.color.length == 4) ? options.color.replace(/#([0-9A-f])([0-9A-f])([0-9A-f])/i, '#$1$1$2$2$3$3') : options.color;
var filtertext = "progid:DXImageTransform.Microsoft.Glow(Color="+options.color+",Strength="+(options.radius/6)+") progid:DXImageTransform.Microsoft.Blur(pixelradius="+options.radius+", enabled='true') progid:DXImageTransform.Microsoft.Alpha(opacity="+options.opacity+")";
if($.browser.msie && options != "") {
obj.css({"position":"relative","zoom":"1"}).append(text);
if($.browser.version >= 8) {
obj.css({"z-index":"1"});
}
obj.children("span.jQshad").css({
"position":"absolute",
"z-index":"-1",
"zoom":"1",
"left":options.xoffset,
"top":options.yoffset,
"color":options.color,
"filter":filtertext,
"-ms-filter":filtertext
});
}
});
};
$.fn.removeTextShadow = function() {
return this.each(function() {
$(this).children("span.jQshad").remove();
});
};
})(jQuery);
h2.shadow {
color: #222;
text-shadow: 0px 1px 1px #fff;
background: #888;
}<script type="text/javascript">
$(document).ready(function(){
$('h1.shadow, h2.tshad, h3.tshad-2, p.textsd').textShadow();
});
</script>
Untuk melakukan penyimpanan script lakukan langkah berikut
- Login ke Blogger
- Buka Edit HTML
- Cari Kode <head>
- Simpan seluruh script di atas kode <head> seperti yang terlihat di atas.
- Lanjutkan dengan mencari kode ]]></b:skin>, kemudian kode css textshadow letakkan di atasnya.
- Contohnya seperti berikut:
h2.shadow {
color: #222;
text-shadow: 0px 1px 1px #fff;
background: #888;
}
]]></b:skin> - Apabila kode text shadow yang lain akan di tambahkan, silahkan letakkan mengikuti yang sebelumnya dengan posisi tetap di atas ]]></b:skin>
- Untuk menggunakannya dalam posting atau widget, silahkan gunakan kode html seperti di bawah ini :
<h1 class="shadow">Tuliskan teks di sini</h1>
D E M O jQuery Text Shadow
Anda dapat melihat demo text shadow dan kode css yang digunakan dengan membuka link di bawah ini:
