Cara Membuat Vertical Sliding Info Panel With jQuery

Hai sobat t"Net..Berikut ada trik yang sangat menarik buat kita pelajari bersama. Dalam tips ini kita akan membuat Vertical Sliding Panel ala jQuery. Mungkin lebih jelasnya dapat sobat lihat pada gambar di bawah ini.

Nah Vertical Sliding itu adalah bagian yang bergaris warna merah itu loh. Sudah tau kan?. Nah artikel ini saya dapt dari teman saya, sewaktu saya berjalan-jalan mencari ilmu. Nah bagi sobat yang tertarik silahkan ikuti instruksi saya.


Seperti biasa Lagi, Login ke blogger>>>Pilih Rancangan>>>Pilih Edit HTML

Kemudian cari kode ini ]]></skin>
Letakkan kode di bawah ini sebelum kode ]]></skin>

    .panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
    .panel p{color:#ccc;margin:0 0 15px;padding:0}
    .panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
    .panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
    a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
    a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
    a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
    .columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
    .colleft{float:left;width:130px;line-height:22px}
    .colright{float:right;width:130px;line-height:22px}
    a:focus{outline:none}
    .panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
    .panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
    .columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

Silahkan lakukan pengeditan kode HTML di atas sesui selera anda, terutama untuk posisi Vertical Slidingnya .

Kemudian cari kode seperti ini </head>
Letakkaan kode di bawah ini tepat setelah kode </head>

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
 $(".panel").toggle("fast");
 $(this).toggleClass("active");
 return false;
});
});
</script>

Selesai ini, cari lagi kode ini </body> 
Letakkan kode di bawah ini tepat sebelum kode </body>

<div class='panel'>
<h3>Selamat Datang Di KARTA JAYA WEB</h3>

<p style='text-align:justify'>Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...
</p>
<h3>Sekilas tentang penulis</h3>
<img height='73px' src='http://i764.photobucket.com/albums/xx289/kartajaya/IMG0333A.jpg' width='73px'/>
<p>Nama saya Karta Jaya (Care),saya seorang Mahsiswa S1 Teknik dan Manajemen Perikanan Tangkap di salah satu Universitas di Bogor, yaitu Institut Pertanian Bogor (IPB). Hobby saya adalah blogging dan ingin memberikan yang terbaik bagi sobat blogger dan khususnya kepada sobat t'Net.</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://kartajaya25.blogspot.com/' title='home'>Home</a></li>
<li><a href='http://kartajaya25.blogspot.com/2011/02/mari-bergabung-dengan-kami-dflashlinx.html' title='about'>Agen Pulsa</a></li>

<li><a href='http://s764.photobucket.com/albums/xx289/kartajaya/' title='portfolio'>Portfolio</a></li>
<li><a href='http://kartajaya25.blogspot.com/2010/03/ucapan-terima-kasih.html' title='contact'>Contact</a></li>
<li><a href='http://sigotomnauli.blogspot.com' title='blog'>Blog</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://twitter.com/#!/jaya_karta' title='twitter'>Twitter</a></li>
<li><a href='http://www.facebook.com/?ref=home#!/jaya.karta' title='facebook'>Facebook</a></li>
<li><a href='http://friendster.com/kartajaya' title='friendster'>Friendster</a></li>

<li><a href='http://ikanmania25.blogspot.com/' title='plurk'>My Blog 1</a></li>
<li><a href='http://kartajaya25.blogspot.com/' title='myspace'>My Blog 2</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Karta Jaya</a>

Lakukan pengediatan pada warna Hijau, Biru, dan Kuning

Kemudian Simpan Template, dan lihat perubahannya