MEMBUAT VERTICAL SLIDING INFO PANEL DENGAN JQUERY

Membuat Vertical Sliding Info Panel Dengan JQuery, itulah yang akan saya share pada kesempatan kali ini. Setelah kemarin blogwalking kesana-kesini, ada beberapa sobat blogger yang menanyakan bagaimana sih caranya membuat menu Info Panel, seperti menu dipojok kiri atas blog sobat?? Selagi saya sempat dan bisa, pasti saya buatkan tutorialnya, ini juga saya cari sana-sini koq. cuman untuk CSS dan tambahan menu, saya modifikasi sendiri. dan pastinya untuk kode CSS-nya lebih simple.
Untuk lebih jelasnya silahkan sobat lihat gambar/demonya dibawah ini.

Sceenshot/Demo Vertical Sliding Info Panel Dengan JQuery

Sesuai dengan namanya fungsi dari menu ini adalah memberikan informasi tentang penulis kepada pembaca dengan sedikit kemasan animasi jQuery untuk memperindahnya.Untuk contoh gambarnya anda bisa lihat di atas, atau langsung lihat disini, klik tombol info yang ada di sebelah kiri atas. Bagi anda yang tertarik untuk membuatnya berikut ini langkah-langkahnya :

Kemudian klik rancangan

Pilih Edit HTML jangan lupa centang "Expand Template Widget"

Cari kode berikut ]]></b:skin> gunakan control + f biar cepet, kemudian copy kode dibawah dan letakkan diatas kode 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}

Setelah itu cari kode </head> lalu copy kode dibawah ini dan letakkan diatasnya.

view plainprint?
<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:

view plainprint?
<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 bahasa inggrisnya welcome</h3>
<p style='text-align:justify'>Selamat datang di AITARZ 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://gtips-trick.blogspot.com/' title='creating website'>Selengkapnya tentang blog ini</a></p>

<h3>Sekilas tentang Pendiri Gould Tips-Trick</h3>
<img height='73px' src='http://i1054.photobucket.com/albums/s494/Tong-Tong45/l2.jpg' width='73px'/>
<p>Nama saya Azka Soekamti saya seorang yang ingin belajar blogger. Saya mulai belajar blogger sejak bulan Oktober 2010, dan blog ini saya buat pada bulan Desember 2010</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/harvestblog' title='Twitter'>Twitter</a></li>
<li><a href='https://plus.google.com/102304319196914192198/' title='About Me'>About Me</a></li>
<li><a href='mailto:yandismart@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

Terakhir Save Template anda, dan lihat hasilnya

Tentu temen-temen sudah tahu kan? Tulisan yang saya beri warna bisa diganti dengan tulisan yang diinginkan. Demikian tadi penjelasan mengenai membuat panel info dengan jQuery selamat mencoba

0 komentar:

Ayo Berikan Sedikit Komentar Sobat Buat Blog Ini Sedikit Komentar Dari Sobat Sangat Berarti Bagi Blog Ini,^^

Peringatan,,!!! Bagi Sobat Yang ingin berkomentar, mohon sesuaikan dengan tema postingan, dan saya mohon juga untuk tidak mencantumkan link (URL) pada komentar karena akan saya anggap spam dan mohon maaf apabila saya hapus komentar Sobat,,!!!