Content

Penerapan Lettering js di blogspot

Diposting oleh Unknown 30 Oktober 2011 Label: , , ,
aku posting tentang Lettering JS, posting ini pertama saya temukan di blog bang Rudy azhar, namun di sana 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
Ok langsung ke Cara penerapannya :


  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 yang anda simpan di hostingan anda"></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-top: 10px; margin-left: 0;
 font-size: 75px;
font-weight: bold;
 text-transform: uppercase;
letter-spacing: -1px; color: #5e8b99;
text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}
.entry-title .char1 {
color: #2d2d2d;
font-size: 100px;
 letter-spacing: -4px;
 text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}
.entry-title .char5, .entry-title .char11, .entry-title .char16, .entry-title .char22 { color: #a44838; }
.entry-title .char3, .entry-title .char7, .entry-title .char9, .entry-title .char13, .entry-title .char19 { color: #757268;
}


Setelah anda simpan cara menggunakannya seperti ini

<h1 class="entry-title">Penerapan Lettering Js</h1>


Anda juga bisa Terapkan di judul blog anda, jadi anda tidak Perlu memakai kode :

<h1 class="entry-title">Penerapan Lettering Js</h1>


Anda bisa langsung terapkan dengan cara cari kode header blog anda, biasanya kode nya seperti ini

#header h1 {
......
......
}

Jadi kalau anda ingin terapkan di judul blog anda maka silahkan anda tambahkan kode seperti di bawah ini


#header h1 .char2 {
color: #2d2d2d;
font-size: 100px;
 letter-spacing: -4px;
 text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}
#header h1 .char5{ color: #a44838; }


kode nya bisa anda simpan di atas ]]></b:skin> Lalu setelah itu simpan.

kode Jquery nya Pun nanti jadi seperti ini :


<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 yang anda simpan di hostingan anda"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#header h1").lettering(); });
</script>


Jadi kalau anda ingin menerapkan di elemen lain maka kode berwarna merah pun harus di ganti sesuai elemen tersebut.

Pengertian kode  :

.char2  berarti huruf ke dua yang ada dalam satu kalimat anda bisa pilih huruf mana saja dalam kalimat yang anda ingin beri beda warna DLL.
jadi setiap satu spasi di hitung satu char misalnya ZINTO itu ada 5 char misalnya anda pilih char3 berarti huruf N akan berbeda warna dengan yang lain.

Begitu seterusnya. anda juga bisa sesuaikan style nya dengan style anda sendiri.
Demo nya bisa anda lihat di bawah ini dan juga di judul postingan saya.

HAPPY BLOGGING

Untuk Lebih Jelas nya silahkan masuk di blog bang Rudy Azhar

0 komentar:

Posting Komentar

Rss: Top

Blog Archive