Halo teman-teman semuanya masih semangatkah.?? Oh ya tutorial dibawah membahas mengenai animasi jQuery, dimana kali ini aku akan menjelaskan tentang Membuat Info Panel Slide Vertikal dengan jQuery. Sesuai dengan namanya yakni fungsinya ialah memberikan informasi tentang penulis kepada pembaca dengan sedikit kemasan animasi jQuery untuk memperindahnya. Silahkan Lihat contohnya di blog sahabat Saling Sharing Metal-XP bagian atas kiri terdapat tombol Info, silahkan klik dan jika ingin menerapkannya di blog anda, ikuti saja langkah langkah di bawah.
Log in dulu ke account blog anda
- Pada dasbor klik rancangan
- Jangan Lupa Download dulu Template anda untuk menhindari kerusakan
- Pilih Edit HTML jangan lupa centang "Expand Template Widget"
- Cari kode berikut ]]></b:skin>
- Copy paste kode dibawah, diatas kode ]]></b:skin>
- Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
Jika anda telah memasang script Jquery sebelumnya
anda dapat meninggalkan langkah diatas.
- Masukan kode Javascript berikut dibawah script jQuery tadi:
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
Langkah terakhir cari lagi kode berikut </body> setelah itu copas kode dibawah ini dan taruh diatasnya.
<div class='panel'>
<h3>Selamat Datang</h3>
<p style='text-align:justify'>Selamat datang di Saling Sharing, saya harap anda senang berada diblog sederhana ini. dan berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini<a href='http://sanieburonan.blogspot.com/' title='Saling Sharing'>Selengkapnya tentang Saya</a></p>
<h3>Sepintas Tentang Saling Sharing</h3>
<p>Nama saya ................ saya seorang yang ingin belajar blogger. Saya memulai blogger sejak usia 3 th dan baru aja koq memulai aktifitas blogging. :D</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='#' title='home'>Home</a></li>
<li><a href='#' title='about'>About</a></li>
<li><a href='#' title='portfolio'>Portfolio</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='#' title='Facebook'>Facebook</a></li>
<li><a href='#' title='About Me'>About Me</a></li>
<li><a href='mailto:emailmu@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>
- Klik Simpan Selesai dan preview blog.
Selamat mencoba, Selamat berkreatifitas.
tambahkan komentar 23 komentar
absen petang
@puramoz......ngga gan..ga berat kok sob coba liat blogq..walaupu hampir seluruh blogq memakai JQUEry tapi ga papa....
:) visit :)
btw kalau boleh tanya, jquery itu apa brayd? :|
Kapan2 ijin Aplikasiin iLmunya,.. :)
Salam bLogger...
hhe:-L
;)
contohnya yang mana,,, ckckckc
gak ngerti nih... jadi malu...
tapi pasti bermanfaat
salam sukses selalu ..:)
don't forget to visit back..
1. Klik select profile --> pilih Name/URL
2. Isi nama kamu dan Kosongkan URL atau isi dengan alamat fb kamu
3. Klik Lanjutkan
4. Ketik komentar kamu,
5. Klik Publish