Hai sobat semua lama gak posting kangen juga tapi karena aku bingung mau posting apa mending aku posting tentang Lettering JS, posting ini pertama saya nemu di blog bang Rudy azhar. tapi disana tidak ada cara menerapkannya di blogspot karena di sana postingannya untuk umum namun saya coba - coba terapkan di blogspot dan ternyata bisa. alhamdulilah.
Lettering js ini menurut saya menarik karena bisa untuk memodifikasi tulisan - tulisan di blog kita keren dah tulisan bisa warna pelangi bisa di model kotak - kotak juga bisa pokoknya macem - macem dibawah ini aku kasi Contoh satu.
1. Download lettering.js nya
2. Setelah anda download silahkan simpan kode JS nya di hostingan anda.
3. Masukan kode di bawah ini di BAWAH kode
<head><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script> <script src="Disini url lettering.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".entry-title").lettering(); }); </script>
Setelah itu simpan kode di bawah ini di atas
]]></b:skin>.entry-title {
font-family: "Arial Narrow", Arial, Verdana, sans-serif;
margin: 10px 0 0 0;
font: normal 75px/75px Arial Narrow;
font-weight: bold;
text-transform: uppercase;
color: #5e8b99;
}
.entry-title .char1 {
color: #000;
}
.entry-title .char2 {
color: #AAA;
}
.entry-title .char3 {
color: #ea9;
}
.entry-title .char4 {
color: #50d;
}
.entry-title .char5 {
color: #090;
}Setelah anda simpan cara menggunakannya seperti ini
<h1 class="entry-title">motor</h1>
Perhatikan kata
motor terdiri dari 5 kata jadi kodenya sampai .char5 jadi setiap satu kata itu di hitung satu .char dan perhatikan penulisannya pada kode cssnya penulisan setiap char harus di ikuti dengan .entry-title jadi kodenya .entry-title .char1. anda juga bisa gunakan ini pada judul sidebar, judul blog dan lain - lain yang penting anda tahu ID dari judul sidebar atau judul blog itu, misalnya judul sidebar anda ID nya .sidebar h2 maka ganti .entry-title dengan .sidebar h2 dan mulai deh tuh hitung per_katanya dan tulisin kode cssnya.Jika masih bingung silahkan mampir ke blog bang Rudy Azhar
Oh iya di bawah ini hanya dokumentasi JS dari Lettering.js siapa tau suatu hari linknya broken kan bisa ambil disini aja.
/* Lettering.JS 0.6.1 by Dave Rupert - http://daverupert.com */
(function($){function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length){$(a).each(function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item+'</span>'+after});t.empty().append(inject)}}var methods={init:function(){return this.each(function(){injector($(this),'','char','')})},words:function(){return this.each(function(){injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var r="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,'line','')})}};$.fn.lettering=function(method){if(method&&methods[method]){return methods[method].apply(this,[].slice.call(arguments,1))}else if(method==='letters'||!method){return methods.init.apply(this,[].slice.call(arguments,0))}$.error('Method '+method+' does not exist on jQuery.lettering');return this}})(jQuery);
