Browse » Home » » Sexy Vertical Sliding Panel

Sexy Vertical Sliding Panel

10/10/2010 0 Komentar

Apakah anda tertarik dengan sebuah panel yang berfungsi semacam drawer (laci) yang menggeser menu atau apa saja ketika membukanya? Memang sepertinya panel ini tampak biasa saja tapi cukup layak qo untuk dicoba. Saya rasa akan terasa menyenangkan untuk menciptakan sesuatu yang berbeda dan bekerja dengan cara yang sama, tapi sedikit lebih fleksibel. Ya, artinya mengubah tampilan menu blog anda sedikit unik biar ga mono itu-itu aja.

Berikut tampilan panel tersebut dan click untuk memperbesar atau periksa di bawah gambar untuk bekerja (demo):


Live DemoKlik di sini untuk melihat demo Sexy Vertical Sliding Panel

Tertarik? Lanjutkan. Berikut Cara membuat Sexy Vertical Sliding Panel mengggunakan jQuery And CSS3 di Blogger:
  • Login dan click Design dan masuk pada Edit HTML.
  • Tambahkan kode dibawah ini diatas kode </head>: 
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".trigger").click(function(){
            $(".panel").toggle("fast");
            $(this).toggleClass("active");
            return false;
        });
    });
    </script>
  • Selanjutnya silakan letakkan kode dibawah ini di atas pada bagian </body>:
<div class='panel'><h3>Sliding Panel</h3><p>Here's our sliding panel (drawer) made using jQuery with the toggle function and some CSS3 for the rounded corners</p>         <p>This panel could also be placed on the right. This could be particularly useful if, <a href="http://insanshalih.blogspot.com" title="The United Muslim Foundation">like me</a>, you have a left-aligned website layout.</p>
<h3>A Little Something About Me</h3>
<p>My name&#39;s <a href='http://www.blogger.com/profile/09230988353278370498' title='Ihsanul Huda'>Ihsanul Huda</a>. My God is Allah. I&#39;m interested in Blogger for Da&#39;wah. I&#39;m not sure if that would count as a Da&#39;wah booth but the best way I can do for Muslim brothers and sisters is to spread Da&#39;wah so that we return to Islam kaffah and follow it properly. Sad truth is most Muslims in Indonesia nowadays place their religion at the lowest priority, and are too caught up with this world. Especially the younger generation, which is being lost in places. I still say alhamdulillah there&#39;s a lot of knowledge spreading among the youth with this media coming out and speaking. This is a majelis for muslimin to share, remind each other so that we can keep our tauheed. Be a true Muslim!     </p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigation</h3><ul>
<li><a href='http://insanshalih.blogspot.com' title='home'>Home</a></li>
<li><a href='http://www.emailmeform.com/builder/form/66D51h3rSiBfd98V' title='contact'>Contact</a></li>
</ul></div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://twitter.com/insanshalih' title='Twitter'>Twitter</a></li>
<li><a href='http://facebook.com/insanshalih' title='Facebook'>Facebook</a></li>
</ul></div></div>
<div style='clear:both;'/></div>
<a class='trigger' href='#'>INFO</a>
  • Copy CSS dibawah ini kemudian letakkan (paste) pada bagaian CSS Blogger atau letakkan di atas ]]></b:skin> atau buat CSS Eksternal Blogger: 
body {background:#1a1a1a; text-align:left;
color:#666;width:700px; font-size:14px; font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;}
a:focus {outline: none;}
h1 {font-size: 34px; font-family: verdana, helvetica, arial, sans-serif; letter-spacing:-2px; color:#9FC54E; font-weight:700; padding:20px 0 0;}
h2 {font-size: 24px; font-family: verdana, helvetica, arial, sans-serif; color:#444444; font-weight: 400; padding: 0 0 10px;}
h3 {font-size:14px; font-family:verdana, helvetica, arial, sans-serif; letter-spacing:-1px; color:#fff;  font-weight: 700; text-transform:uppercase; margin:0; padding:8px 0 8px 0;         }
img{float: right; margin: 3px 3px 6px 8px; padding: 5px; background: #222222; border: 1px solid #333333;} p {         color:#cccccc; line-height:22px; padding: 0 0 10px; margin: 20px 0 20px 0;}
img {border:none; } #container {clear: both; margin: 0; padding: 0;}#container a{float: right; background: #9FC54E; border: 1px solid #9FC54E; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; text-decoration: none; font-size: 16px; letter-spacing:-1px; font-family: verdana, helvetica, arial, sans-serif; color:#fff; padding: 20px; font-weight: 700;}#container a:hover{float: right; background: #a0a0a0;  border: 1px solid #cccccc; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; text-decoration: none; font-size: 16px; letter-spacing:-1px; font-family: verdana, helvetica, arial, sans-serif; color:#fff; padding: 20px;         font-weight: 700;}
.content {font-style:normal; font-family:helvetica, arial, verdana, sans-serif; color:#ffffff; background:#333333; border:1px solid #444444; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; margin: 30px 0 50px; padding: 15px 0;}
.content p {margin: 10px 0; padding: 15px 20px; }
.panel {position: fixed; top: 50px; left: 0; display: none;         background: #000000; border:1px solid #111111; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; width: 330px; height: auto; padding: 30px 30px 30px 130px; filter: alpha(opacity=85); opacity: .85;}
.panel p{margin: 0 0 15px 0; padding: 0; color: #cccccc;}         .panel a, .panel a:visited{margin: 0; padding: 0; color: #9FC54E; text-decoration: none; border-bottom: 1px solid #9FC54E;}
.panel a:hover,
.panel a:visited:hover{margin: 0; padding: 0; color: #ffffff;         text-decoration: none; border-bottom: 1px solid #ffffff;}         a.trigger{position: fixed;  text-decoration: none; top: 80px; left: 0; font-size: 16px; letter-spacing:-1px; font-family: verdana, helvetica, arial, sans-serif; color:#fff; padding: 20px 40px 20px 15px; font-weight: 700; background:#333333 url(images/plus.png) 85% 55% no-repeat; border:1px solid #444444; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; display: block; }a.trigger:hover{position: fixed; text-decoration: none; top: 80px; left: 0; font-size: 16px;         letter-spacing:-1px; font-family: verdana, helvetica, arial, sans-serif; color:#fff; padding: 20px 40px 20px 20px; font-weight: 700; background:#222222 url(images/plus.png) 85% 55% no-repeat; border:1px solid #444444; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px;         display: block;}
a.active.trigger {background:#222222 url(images/minus.png) 85% 55% no-repeat;}
.columns{clear: both; width: 330px; padding: 0 0 20px 0; line-height: 22px;}
.colleft{float: left; width: 130px; line-height: 22px;}
.colright{float: right; width: 130px; line-height: 22px;}ul{padding: 0; margin: 0; list-style-type: none;} ul li {padding: 0; margin: 0; list-style-type: none;}
  • Perhatian! Ini hanyalah merupakan contoh tampilan panel saya, dan untuk merubah link dan lainnya anda bisa ubah sendiri aja ya. Adapun perubahan structure bisa kita lihat di bawah ini. Jika anda ingin menempatkan tombol pemicu dan geser panel di sebelah kanan atau kiri jendela, cukup mengedit a.trigger dan .panel switch 'left' untuk 'right'. Contoh:
Dari:
a.trigger{
position: absolute;
top: 80px; left: 0;
}

.panel {
position: absolute;
top: 50px; left: 0;
}
Menjadi:
a.trigger{
position: absolute;
top: 80px; right: 0;
}

.panel {
position: absolute;
top: 50px; right: 0;
}
Edit pula posisi sudutnya sehingga:

Dari:
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
Menjadi: 
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
Jika anda ingin mengganti tombol tab pemicu dan panel geser tersebut agar selalu tetap terlihat saat anda geserkan scroll mouse ke atas dan ke bawah, ubahlah posisi absolute menjadi posisi tetap, seperti ini:

Dari:
a.trigger{
position: absolute;
top: 80px; left: 0;
}

.panel {
position: absolute;
top: 50px; left: 0;
}
Menjadi:
a.trigger{
position: fixed;
top: 80px; left: 0;
}

.panel {
position: fixed;
top: 50px; left: 0;
}
Jika anda ingin mengedit transparansi panel geser, cukup menghapus atau mengedit bagian CSSnya:
filter: alpha(opacity=85);
opacity: .85;
Demo dan Referensi:




This work is protected by Copyscape and licensed under a Creative Commons Attribution - Non Commercial - Share Alike 3.0 Unported License. Articles cannot be reproduced without permission from the author. For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to this web page.

Artikel Terkait:

Silakan tinggalkan jejak anda dengan berkomentar, Insya Allah agar saya bisa rutin mengunjungi blog anda. Jika belum paham mengenai artikel Sexy Vertical Sliding Panel, tanyakanlah. Jika ada usulan atau keluhan, izinkanlah saya mengetahuinya. Tanggapi dengan komentar yang bijak dan jangan sia-siakan waktu anda dengan melakukan spam.

0 Komentar:

Post a Comment