Info Panel Slide Vertikal dengan jQuery

hai sobat akhirnya kita ketemu lagi insya allah dalam keadaan sehat walafiat. ok sobat bloger Karya Anak Kidoel ada sedikit tips buat anda tentang Info Panel Slide Vertikal dengan jQuery bila anda tidak tahu bileh anda lihat di atas yang bernama Info +

1. Log in blogger


2. Rancangan, edit html, centang tanda Expand Template Widget


3. Cari kode  ]]></b:skin> dan kopi kan CSS berikut diatasnya :

.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}

Selanjutnya </head> cari kode dan kopikan kode berikut diatasnya :

<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>

Selanjutnya cari kode </body> lalu kopi kan kode berikut diatasnya :

<div class='panel'>



<h3>Selamat Datang kawan-kawan</h3>



<p style='text-align:justify'>Selamat datang di situs blog saya, maaf atas kekurangannya atau saya dianggap so tau dsb, sebenarnya saya membuat blog ini sebagai tempat belajar saya, sebagai tempat memuaskan rasa penasaran tentang semua yang ingin saya ketahui <a href='http://makalah3satu.blogspot.com/' title='Karya Anak Kidoel'>Selengkapnya tentang kami</a></p>



<h3>Sedikit Profil tentang saya</h3>



<img src='http://lh3.ggpht.com/_xTRukLv_HsA/TNjaYa1tSjI/AAAAAAAAABc/jZL2B4_PLHM/s140/screenshaver2.gif' width='73px' height='73px'/>



<p>Nama Saya Syarief Hidayat, saya seorang keluaran MAN bayah jurusan IPA, alamat wr lame</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='Twitter'>Twitter</a></li>

   <li><a href='#' title='Facebook'>Facebook</a></li>



   <li><a href='#' title='Digg'>Digg</a></li>



   <li><a href='#' title='Del.Icio.Us'>Del.Icio.Us</a></li>



   <li><a href='#' title='Gmail'>Gmail</a></li>

  </ul>



 </div>



</div>

<div style='clear:both;'/>



</div>



<a class='trigger' href='#'>Info</a>

keterang :

ganti kode yang berwarna merah deng link anda .......!!!!!!

Simpan template...........  Selamat mencoba........

Terima Kasih

Created By Syarief Hidayat



------------------------------------------------------------------------------------------