Cara Membuat Info Blog Bergaya Jquery

Cara Membuat Info Blog Bergaya Jquery

Diposkan oleh San San Kamis, 15 Maret 2012 

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.

Related Post: