Home » » Membuat Vertical Sliding Info Panel With jQuery dan CSS3

Membuat Vertical Sliding Info Panel With jQuery dan CSS3




Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></skin>, Lalu sasukan (copy paste) kode dibawah ini diatasnya:
/* --------- Sliding Sexy Start --------- */
#sexy a:focus {
outline: none;
}
#sexy h1 {
font-size: 34px;
font-family: verdana, helvetica, arial, sans-serif;
letter-spacing:-2px;
color:#9FC54E;
font-weight:700;
padding:20px 0 0;
}
#sexy h2 {
font-size: 24px;
font-family: verdana, helvetica, arial, sans-serif;
color:#444444;
font-weight: 400;
padding: 0 0 10px;
}
#sexy 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;
}
#sexy img{
float: right;
margin: 3px 3px 6px 8px;
padding: 5px;
background: #222222;
border: 1px solid #333333;
}
#sexy p {
color:#cccccc;
line-height:22px;
padding: 0 0 10px;
margin: 20px 0 20px 0;
}
#sexy img {
border:none;
}
#sexy #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;
}
#sexy .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;
}
#sexy .content p {
margin: 10px 0;
padding: 15px 20px;
}
#sexy .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;
}
#sexy .panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}
#sexy .panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}
#sexy .panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}
#sexy 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(http://i785.photobucket.com/albums/yy131/djnand/plusbutton.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;
}
#sexy 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(http://i785.photobucket.com/albums/yy131/djnand/plusbutton.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;
}
#sexy a.active.trigger {
background:#222222 url(http://i785.photobucket.com/albums/yy131/djnand/minusbutton.png) 85% 55% no-repeat;
}
#sexy .columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}
#sexy .colleft{
float: left;
width: 130px;
line-height: 22px;
}
#sexy .colright{
float: right;
width: 130px;
line-height: 22px;
}
#sexy ul{
padding: 0;
margin: 0;
list-style-type: none;
}
#sexy ul li{
padding: 0;
margin: 0;
list-style-type: none;
}
/* --------- Sliding Sexy End --------- */

7. Selanjutnya letakkan Script Javascript dibawah ini tepat diatas </head> :

<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(){
$(&quot;.trigger&quot;).click(function(){
 $(&quot;.panel&quot;).toggle(&quot;fast&quot;);
 $(this).toggleClass(&quot;active&quot;);
 return false;
});
});
</script>
Jika Anda ingin menghapus transparansi panel geser, cukup menghapus atau mengedit bagian CSS:

filter: alpha(opacity=85);
opacity: .85; 

8. Terakhir letakkan dibawah ini tepat diatas </body> :
<div id='sexy'>
  <div class='panel'>
    <h3>Welcome To My Blog</h3>
    <p>Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...</p>

    <h3>Sekilas Mengenai Saya</h3>
    <img height='75px' src='http://i56.tinypic.com/2dtdag0.gif' width='75px'/>
    <p>Saya Hanya Seorang Pria Miskin Yang Hanya Bisa Bermimpi.</p>

<div style='clear:both;'/>
<div class='columns'>
    <div class='colleft'>
    <h3>Navigation</h3>
        <ul>
            <li><a href='http://www.3xploration.co.cc/' title='Home'>Home</a></li>
            <li><a href='http://www.3xploration.co.cc/' title='About'>About</a></li>
            <li><a href='http://www.3xploration.co.cc/' title='portfolio'>Portfolio</a></li>
            <li><a href='http://www.3xploration.co.cc/' title='contact'>Contact</a></li>
            <li><a href='http://www.3xploration.co.cc/' title='Blog'>Blog</a></li>
        </ul>
    </div>

    <div class='colright'>
        <h3>Social Stuff</h3>
        <ul>
            <li><a href='http://www.3xploration.co.cc/' title='Twitter'>Twitter</a></li>
            <li><a href='http://www.3xploration.co.cc/' title='Facebook'>Facebook</a></li>
            <li><a href='http://www.3xploration.co.cc/' title='Home'>Website</a></li>
            <li><a href='http://www.3xploration.co.cc/' title='RSS'>RSS</a></li>
            <li><a href='http://www.3xploration.co.cc/' title='Here'>Belajar Blogging</a></li>
        </ul>
    </div>
</div>
<div style='clear:both;'/>

</div>
<a class='trigger' href='#'>xXx</a>
</div>

NB : Ganti semua teks yang bewarna Merah dengan data blog anda masing masing

9. Save

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .