Cara Membuat Info Blog Bergaya Jquery

Diposkan oleh Sanie 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.

Jangan lupa like, setelah membaca ya



Artikel Terkait:

Related Posts Plugin for WordPress, Blogger...

tambahkan komentar 24 komentar

Kamis, 15 Maret 2012 18.42.00 WIB  
wah nice tutor sob kapan" ane coba dah,,,
absen petang
Kamis, 15 Maret 2012 19.22.00 WIB  
gak bikin berat tuh sob..?? loadingnya ke situs qt?
Kamis, 15 Maret 2012 20.28.00 WIB  
wahhhhh mice post san san......qblogq malah di pke demo sob....thanks dah...
@puramoz......ngga gan..ga berat kok sob coba liat blogq..walaupu hampir seluruh blogq memakai JQUEry tapi ga papa....
Kamis, 15 Maret 2012 21.22.00 WIB  
Nice tutor bro, kapan" ane bakal coba,

:) visit :)
Jumat, 16 Maret 2012 09.49.00 WIB  
wiw.. jadi keren gitu ya,,, nemplok di samping :D
Jumat, 16 Maret 2012 12.41.00 WIB  
Wahh..mantab bang san san..

Perlu di coba nih..
:-)
Jumat, 16 Maret 2012 14.46.00 WIB  
oke, ijin copy ya? maksudnya scriptnya doang. tapi juga gak diposting kok.

btw kalau boleh tanya, jquery itu apa brayd? :|
Jumat, 16 Maret 2012 15.10.00 WIB  
@Zero CodeXgigasbaca disini http://id.wikipedia.org/wiki/JQuery :D
Jumat, 16 Maret 2012 22.24.00 WIB  
Tampilannya memang keren!
Sabtu, 17 Maret 2012 00.39.00 WIB  
Wah,,, inpo yang sangat bermanfaat SOb...
Kapan2 ijin Aplikasiin iLmunya,.. :)
Salam bLogger...
Sabtu, 17 Maret 2012 06.14.00 WIB  
makasih... saya balik lagi mau nyomot Script nya lagi, kemarin ilang atau lupa nyimpennya dimana.

hhe:-L
Sabtu, 17 Maret 2012 07.40.00 WIB  
keren sih gan tapi banyak bgt ya scriptnya, blog saya sudah kebanyakan script takut berat. maunya yang ringan2 saja tanpa edit HTML.
Sabtu, 17 Maret 2012 07.46.00 WIB  
Bro backgroun di blakang tanda plus + itu bisa d ganti gak warnannya?
Sabtu, 17 Maret 2012 08.54.00 WIB  
Terima kasih atas tutorialnya. Sangat bermanfaat :)
Sabtu, 17 Maret 2012 23.33.00 WIB  
bisa diterapin di template dinamis enggak gan?
Minggu, 18 Maret 2012 18.30.00 WIB  
http://cousbravo.blogspot.com/2012/03/tips-menentukan-tujuan-wisata-dan.html

;)
Senin, 19 Maret 2012 05.48.00 WIB  
info bagus nih ...ijin copas mau di coba yah.....
Senin, 19 Maret 2012 09.57.00 WIB  
Ini apa dan bagaimana ya sob?
contohnya yang mana,,, ckckckc

gak ngerti nih... jadi malu...

tapi pasti bermanfaat
Rabu, 21 Maret 2012 14.31.00 WIB  
kunjungan ..
salam sukses selalu ..:)
Rabu, 31 Oktober 2012 13.09.00 WIB  
gan gagal gan dalam srciptnya..
don't forget to visit back..
Minggu, 25 November 2012 11.22.00 WIB  
gan klo langkah langkah nerapin jquery di dalam blog gmn
Minggu, 25 November 2012 11.26.00 WIB  
bisa gak gan jquery di masukkan kedalam pos content misalnya kayak jquery image thank
Minggu, 25 November 2012 11.29.00 WIB  
trima kasih tipnya sangat berguna
Sabtu, 04 Mei 2013 23.50.00 WIB  
referensinya mantap gan....salam kenal.....coba dulu ah....
Cara Berkomentar untuk yang tidak memiliki blog:
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

download kalender 2013 CDR

9 Artikel Terbaru