Salam persahabatan
Akhirnya bisa posting lagi nih, sekarang pembahasannya tentang text-shadow tapi yang satu ini di terapkan di dalam Jquery. Kalu yang terdahulu saya pernah mempostingnya tentang text-shadow yang ada dalam css3 akan tetapi kalu yang diartikel ini agak berbeda. Penasaran kan?Okeh, sebelumnya saya pernah melihat ada satu blog yang mempunyai animasi di judul blog tersebut seperti tulisan yang terbakar, setelah saya lihat mereka banyak menggunakan tolls online padahal kalau kita cermati kita bisa membuatnya sendiri. Nah... diartikel ini kita akan membahas bagaimana cara membuatnya. Ada dua cara membuat text-shadow seperti itu yang pertama sobat bisa menerapkan di postingan dan yang kedua sobat bisa menerapkan di dalam template seperti di judul blog atau yang lainnya.Apabila sobat ingin menerapkannya dalam postingan sobat hanya perlu memasukan kode di bawah dalam postingan sobat di edit html.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript">(function ($){$.fn.ignite = function (burn){$(this).each(function (){var letters = $(this).text().split('');$(this).html('<span>' + letters.join('</span><span>') +'</span>');$spans = $(this).find('span');setInterval(function () {$spans.each(burn);}, 100);});}})(jQuery);function gasFlame(){var colors = ['#FFF', '#99f', '#CC0066', '#CC0033'];if (Math.random() > 0.90){colors.push('#3333CC');}var hv = 0.04;var textShadows = [];var c = 0;var h = 0;var s = 0;while (c < colors.length){s = 2 + Math.round(Math.random() * 2);while (s--){shadow = '0 ' + h + 'em ' + -h + 'em ' + colors[c];textShadows.push(shadow);h -= hv;}c++;}$(this).css({color: colors[0], textShadow: textShadows.join(', ')});}$(begin);function begin(){$('#mandra').ignite(gasFlame);}</script><style type="text/css">#mandra{font-size: 2em;line-height:2.50em;text-shadow:4px 2px 6px blue;color:#000;}
</style><div id="mandra">
Ini adalah contoh text-shadow yang mengunakan Jquery 1.4.2
</div>
</style><div id="mandra">
Ini adalah contoh text-shadow yang mengunakan Jquery 1.4.2
</div>
Lalu bagaimana menerapkannya di dalam header atau template? Seperti tehnik dasar menaruh javascript, kalu sobat teliti sebenarnya ini hanya penempatan di head dan body tapi perintah dokumen jquery harus juga di tempatkan. Gambaran penempatan javascript di template blogspot agak berbeda, yang perlu di perhatikan adalah/*<![CDATA[*/ di awal script dan /*]]>*/ di akhir script. Oke..mari sekarang kita buat, saya akan memberikan di judul blog/header.
- Masuk ke edit html template.
- Jangan centong, eh salah maksudna centang Expand Widget Templates.
- Lalu masukan kode dibawah tepat diatas
</head> - Kemudian masukan kode dibawah tepat di atas
</body> - SAVE DAN LIHAT HASILNYA
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'> </script>
<script type='text/javascript'>/*<![CDATA[*/ (function ($){$.fn.ignite = function (burn){$(this).each(function (){ var letters = $(this).text().split('');$(this).html('<span>' + letters.join('</span><span>') +'</span>');$spans = $(this).find('span');setInterval(function () {$spans.each(burn);}, 100);});}})(jQuery);function gasFlame(){var colors = ['#FFF', '#99f', '#CC0066', '#CC0033'];if (Math.random() > 0.90){colors.push('#3333CC');}var hv = 0.04;var textShadows = [];var c = 0;var h = 0;var s = 0;while (c < colors.length){s = 2 + Math.round(Math.random() * 2);while (s--){shadow = '0 ' + h + 'em ' + -h + 'em ' + colors[c];textShadows.push(shadow);h -= hv;}c++;}$(this).css({color: colors[0], textShadow: textShadows.join(', ')});}$(begin);function begin(){$('h1').ignite(gasFlame);}/*]]>*/ </script>
Cara memodifikasi text-shadow
Nah..sekarang kita akan belajar cara memodifikasinya dengan mengenali sintaks yang ada dalam Jquery tersebut. Jadi sobat bisa merubahnya sesuai keinginan. Silahkan temukan kode di bawah dan modifikasi sendiri.- var colors = ['#FFF', '#99f', '#CC0066', '#CC0033'] : Kode ini berfungsi untuk warna dan pencahayaan blur dari text-shadow. Seperti yang terlihat ada 4 kode warna css warna pertama(#fff) adalah warna dasar dari teks dan warna berikutnya adalah warna dari blur yang keatas dan kebawah.
- colors.push('#3333CC'); : Kode ini berfungsi untuk efek, seperti sobat lihat text-shadow di atas ada warna biru yang berjalan.
- {$('#mandra') : Ini adalah element yang akan kita buat text-shadow. Sobat bisa menggantinya menjadi h2-h3 sesuai keinginan, kalu h1 otomatis yang akan terlihat text-shadownya adalah bagian judul blog/header. Untuk yang template sudah saya sesuaikan menjadi h1.Sedangkan untuk yang di postingan saya memberi #mandra. Ini bertujuan untuk memanggil div dari css.
RSS FeedBurner
@UnoZoneuTM on Twitter