Wednesday, 26 November 2014

Penerepan Jquery Lettering di Blogspot.

Jquery Lettering ini menurut ku sangat menarik karena kita bisa memodifikasi tulisan - tulisan di blog kita dengan keren dan tulisan bisa warna pelangi, bisa di bikin model kotak - kotak juga bisa, Typography, pokoknya macem - macem dibawah ini aku kasi Contoh satu.

Penerepan Jquery Lettering di Blogspot.
  • Login ke Blogger.
  • Edit template, kemudian tambahkan JS ini di atas kode </head>
Source Code dari Jquery Lettering yang asli..
<script type="text/javascript">
/* 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);

$(document).ready(function() {
$(".entry-title").lettering();
});
</script>
Keterangan : JS ini berfungsi untuk judul postingan yang menggunakan class .entry-title
  • Setelah itu simpan kode di bawah ini di atas ]]></b:skin> atau <style type='text/css'>
.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;
}
  • Kemudian Simpan template anda..
Penerepan Jquery Lettering di Blogspot.

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 Lettering Typography Styles (words) dan Lettering Typography Styles mungkin akan sedikit berbeda karena saya terapkan di postingan..

Oh iya di atas hanya dokumentasi JS dari Lettering.js karena source code aslinya sudah broken link
Silahkan kreasikan lagi, saya yakin anda pasti bisa !

Ditulis Oleh : Adi Bayu // 07:31
Kategori:

0 comments:

Post a Comment