Tampilkan postingan dengan label jquery. Tampilkan semua postingan
Tampilkan postingan dengan label jquery. Tampilkan semua postingan
Minggu, 24 November 2013
Membuat Effect pada Blogger menggunakan JQuery
JQuery memiliki banyak sekali fitur yang dapat dimanfaatkan dalam membangun suatu website, selain itu juga akan mempermudah programmer dalam penggunaan Ajax, Javascript ataupun Coding Semantik, yang bisa menjadikan website lebih profesional. Fitur yang akan saya bahas kali ini, yaitu membuat efek pada website menggunakan JQuery.Efek yang akan dibuat ini sangatlah sederhana, yaitu menampilkan gambar ketika sipengunjung melakukan klik pada tombol yang telah dibuat. biasanya digunakan oleh para programmer untuk mempercantik websitenya ataupun untuk memasang iklan, agar tidak memenuhi website kita.
Ketikklah coding program seperti ini:
<!-- Programming : Hadi Kurniawan -->
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#klik1").click(function(){
$("p").show(500,pesan);
});
});
function pesan(){
alert("Gambar orang keren :p");
}
</script>
</head>
<body bgcolor="black">
<style type="text/css">body {
background-image:
url(http://i958.photobucket.com/albums/ae69/putrablidz/storm.gif);
background-color:transparent; }</style>
<center>
<h1><font color="green">------ </font><font color="white">( ? )</font>
<font color="green">------</font></h1>
<p style="display:none">
<img src="http://i1253.photobucket.com/albums/hh596/Hadi_Kurniawan/cyber-magic.jpg" width="200"></img></p>
<button id="klik1">KLIK dan Lihat Gambar Siapa Ini</button>
</body>
</html>
Keterangan:
<script type="text/javascript" src="jquery/jquery.js"></script>
Memanggil library jquery
$(document).ready(function(){
awal penulisan jquery
$("#klik1").click(function(){
$("p").show(500,pesan);
memilih elemen "p" , 500 = kecepatan efek untuk menampilkan
alert("Gambar orang keren :p");
memunculkan kotak pesan saat tombol dklik
<body bgcolor="black">
<style type="text/css">body {
background-image:
url(http://i958.photobucket.com/albums/ae69/putrablidz/storm.gif);
background-color:transparent; }</style>
<center>
<h1><font color="green">------ </font><font color="white">( ? )</font>
<font color="green">------</font></h1>
<p style="display:none">
<img src="http://i1253.photobucket.com/albums/hh596/Hadi_Kurniawan/cyber-magic.jpg" width="200"></img></p>
<button id="klik1">KLIK dan Lihat Gambar Siapa Ini</button>
</body>
</html>
Halaman yang akan ditampilkan
sekarang save program anda, lalu jalankan pada browser.
Jika berhasil, maka akan tampil seperti gambar dibawah ini:
dan coba anda klik tombol tersebut, jika berhasil akan muncul seperti ini
semoga tutorialnya bermanfaat buat teman-teman yah :)
salam kenal dan salam blogger Indonesia!
Selasa, 12 November 2013
Mempercepat Loading Blog jQuery Lazy Load Plugin
Ada banyak faktor kenapa lalu lintas blog kehilangan pengunjung, salah satunya adalah kecepatan loading blog yang memerlukan waktu lama. Hal seperti ini benar-benar akan berdampak buruk buat blog Anda, jadi penting buat Anda untuk memperhatikan beban dari template blog Anda. Salah satu faktor yang memperngaruhi beban loading blog yaitu dengan adanya gambar-gambar apalagi jika gambar itu berukuran besar, akan sangat mempengaruhi kecepatan blog. Langsung saja lihat tutorialnya di bawah :
- Login ke Blogger
- Klik Template lalu klik Edit HTML
- Cari tag </head> (gunakan ctrl + f untuk mempercepat pencarian)
- Copy javascript yang ada di bawah
- Letakan sebelum </head> atau di atas tag </head>
- Simpan Template
Klik disini untuk mendapatkan Kode Javascript
Silahkan Cek Kecepatan Blog Anda.
Semoga Bermanfaat...
Langganan:
Postingan (Atom)