Cara Mudah Membuat Info Panel Auto/Hide Slide Vertikal dengan jQuery

Saat nya saya akan melanjutkan tips / tutorial dari saya mengenai Cara Membuat menu Beautiful Slide Out Navigation. Kali ini saya akan melajutkan tips / tutorial yang tidak jauh berbeda yaitu

Cara Mudah Membuat Info Panel Auto/Hide Slide Vertikal dengan jQuery - Cara mudah menjadikan / membuat / mengubah / blogspot / menyembunyikan / web menjadi / mempercantik tampilan menu / dengan mudah / untuk pemula / dengan menu yang melayang di atas dan samping blog / dengan efek slide out vertikal

Perbedaan dari Tutorial kali ini pada dasarnya sama, yaitu kita menyembunyikan panel ini dengan tombol. Hanya disini yang kita sembunyikan adalah informasi tentang blog kita atau seputar tentang penulis blog. Seperti gambar diatas kalian bisa memperindah tampilan mengenai kalaian secara buka tutup setelah ditekan tombolnya. Nah, pada tutorial blog kali ini saya akan memberikan cara dalam membuat info panel slide vertikal dengan jQuery.

Apabila kalian tertarik langsung aja ikuti langkah-langkahnya sebagai berikut:

1.Login ke Blogger
2.Masuk ke "Rancangan - Edit HTML"
3.Seperti biasa klik Download Template Lengkap biar aman
4.Jangan lupa centang Expand Template Widget
5.Selanjutnya cari kode ]]></b:skin>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut:

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

6.Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.

note: Jika kalian sudah memasang script Jquery yang diatas kalian dapat meninggalkan langkah diata.

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

8.Aari lagi kode berikut </body> setelah itu copas kode dibawah ini dan taruh diatasnya. (apabila kalian ingin mengisi tentang kalian)

<div class='panel'>
<h3>Selamat Datang bahasa inggrisnya welcome</h3>
<p style='text-align:justify'>Selamat datang di Tips-Trick, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis dengan komputer yang sederhana dan koneksi internet yang juga sederhana. Saya berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini <a href='http://tipsfaenblog.blogspot.com/' title='creating website'>Selengkapnya tentang blog ini</a></p>

<h3>Sekilas tentang Pendiri Gould Tips-Trick</h3>
<img height='73px' src='isi alamat foto kalian' width='73px'/>
<p>Nama saya fandy saya seorang yang ingin belajar blogger. Saya pemula</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='http://twitter.com/faencool' title='Twitter'>Twitter</a></li>
<li><a href='http://www.blogger.com/profile/00286702234337315654' title='About Me'>About Me</a></li>
<li><a href='mailto:fandy.efendi@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

8.Nah kalau kalian ingin mengisi iklan cbox atau yang lainnya kalian cari lagi kode berikut </body> setelah itu copas kode dibawah ini dan taruh diatasnya.

<div class="panel">

Script ChatBox Anda/ Bisa Diganti Dengan Tulisan Dan Widget Lain

</div>
<a class="trigger" href="">ChatBox</a>

9. Akhirnya Selesai juga, Lalu jangan lupa simpan / save ya teman-teman.

sekian dulu tutorial membuat Cara Mudah Membuat Info Panel Auto/Hide Slide Vertikal dengan jQuery, Semoga tips n tutorial langkah-langkahnya mudah dimengerti dan mudah untuk diterapin.

yang pastinya selamat mencoba dan jangan menyerah....

>>SEMOGA BERMANFAAT<<

>>Selesai baca jangan lupa jempol dan komentarnya y....