Thursday, March 18, 2010

Info Panel Slide Vertikal dengan jQuery

Posted by dav On 9:53 PM
Memenuhi permintaan para pembaca setia Blogger Tune-Up mengenai info profil slide panel sebelah kanan, maka kali ini mari kita bongkar skenario dibelakang semua itu. Artikel ini diadaptasi dari spyrestudios.com[1] dengan judul asli "Vertical Sliding Info Panel With jQuery"[2] yang kemudian diberikan sedikit sentuhan oleh Blogger Tune-Up sehingga menjadi seperti yang sekarang digunakan. Artikel kali ini masih berbasis jQuery seperti efek-efek yang lainnya, makanya bagi teman-teman blogger yang mengikuti artikel demi artikel mungkin akan menemukan teknik terbaik pemasangan jQuery[3]. Pada tips-n-trick kali ini semua informasi yang dimasukan masih serba manual, hal ini agar mudah dipahami bagaimana kerja dari sliding panel, sehingga kedepannya kita hanya perlu melakukan modifikasi pada bagian isi dari sliding panel.

Info Panel Slide Vertikal dengan jQuery

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode di bawah ini:
]]></b:skin>
Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:
.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}
Langkah 6
Cari kode dibawah ini:
</head>
Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:
<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>
Langkah 8
Cari kode dibawah ini:
</body>
Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:
<div class='panel'>
<h3>Selamat Datang</h3>
<p style='text-align:justify'>Selamat datang di Kotretan Hendriono - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan berselancar di sini dan membaca lebih lanjut tentang artikel dunia teknik (elektronika, otomotif, komputer) yang kami susun. Ada banyak hal tentang kami, Anda mungkin akan menemukan sesuatu yang menarik. <a href='http://dedehendriono.blogspot.com/' title='Hendriono Online'>Selengkapnya tentang kami</a></p>

<h3>Sepintas Tentang Kotretan Hendriono</h3>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjGhfmoFOUXGSmwKuZqK3fR9e2GFVzj-9D8eTQylzYmg8iDeLTqA3hX8VpKWjMqWRQV5SdrvqPvEtE2acubWkQuraDRJ9_Wr1UBd5beJxqDtER49mr_HbCzoYb7DZk3hMvAk3aqrMSm-8/s220/eyelashes_mascara.gif' width='73px' height='73px'/>
<p>Nama saya Hendriono, Saya seorang freelance designer, blogger, teknisi. Spesialisasi pada Blogger blogs, CSS, XHTML dan jQuery</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/hendriono' title='Twitter'>Twitter</a></li>
<li><a href='http://facebook.com/hendriono' title='Facebook'>Facebook</a></li>
<li><a href='http://digg.com/users/hendriono' title='Digg'>Digg</a></li>
<li><a href='http://delicious.com/hendriono' title='Del.Icio.Us'>Del.Icio.Us</a></li>
<li><a href='mailto:hendriono@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>
Langkah 10
Simpan Template dan Preview blog...

Keterangan:
  • Lakukan modifikasi kode pada langkah 9 sesuai keinginan anda (yang diblok putih), dari mulai informasi blog, informasi author/penulis, sampai link-link yang akan dimasukan.
  • Mohon ma'af, kali ini belum bisa dijelaskan bagaimana semua ini bekerja, nanti kedepannya artikel ini akan diupdate mengenai bagaimana kode ini bekerja.
Catatan kaki:
[1] Spyre Studios
[2] Vertical Sliding Info Panel With jQuery
[3] Mempercepat Pemuatan Perpustakaan JavaScript
,

Popular Posts

Blog Archive