Dasar Membuat Neon Text Effect With jQuery & CSS Ala TutorialZine
Berhubung Judulnya saya katakan Ala TutorialZine, jadi gak perlu saya sebutkan sumbernya lagi anda pasti udah bisa nebak dari mana Tutorial ini berasal hhe.. Yupz untuk ke Sumber KLIK DISINI. Neon Efect ini kebetulan hanya dibuat Oleh Martin dengan menggunakan jquery dan CSS (Bukan CSS3), jadi untuk tutorial ini, anda harus terlebih dahulu menyiapkan satu buah Image yang berbentuk Tulisan dengan bertumpuk untuk menampakkan Efect Neon ini, dan berhubung saya tidak ingin repot-repot membuatnya akhirnya saya gunakan Image dari Sumber Langsung, Contohnya seperti dibawah ini:
Nha, Image tersebutlah yang nanti kita buat menjadi satu Image dengan Efect Neon, jadi bisa dibilang ini hanya tipuan halus untuk membuatnya seolah menjadi Efect Neon hhe...
Untuk Melihat Demo-nya Silahkan KLIK DISINI dan Scroll ke bawah... bentuknya seperti gambar paling atas.
Lantas bagaimana cara membuatnya?
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:
]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:
/* The two text layers */
#neonText span{
width:700px;
height:150px;
position:absolute;
left:0;
top:0;
background:url('http://i785.photobucket.com/albums/yy131/djnand/text.jpg')
no-repeat left top;
}
span#layer1{
z-index:100;
}
span#layer2{
background-position:left bottom;
z-index:99;
}
/* The h1 tag that holds the layers */
#neonText{
height:150px;
margin:180px auto 0;
position:relative;
width:650px;
text-indent:-9999px;
}
6. Kemudian Beralihlah, dan Cari Kode <body>, Jika sudah letakkan HTML dibawah ini setelah Kode <body> tersebut atau tepat dibawahnya:
<h1 id="neonText">
Neon Text Effect With jQuery & CSS.
<span class="textVersion" id="layer1"></span>
<span class="textVersion" id="layer2"></span>
</h1>
7. Jika Sudah, Cari Kode </body>, dan letakkan Javascript berikut sebelum atau tepat diatas kode </body> tersebut:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/>
<script src='http://css3.googlecode.com/files/Neon.js'/>
8. Save Template anda dan Lihat Hasilnya....
Selamat Mencoba...
Ps: Warna Merah, silahkan ganti dengan gambar yang ingin anda buat efek Neon...
Posting Komentar
Posting Komentar