Cara membuat Sexy Vertical Sliding Panel mengggunakan jQuery And CSS3 di Blogger

Semakin banyak kita melihat orang yang menggunakan panel geser horizontal di situs Web mereka. Dan terlihat sangat bagus, beberapa dari mereka akan meletakkan formulir kontak atau login, ada juga yang menaruh beberapa informasi tentang mereka, atau bahkan hal-hal tag, label, atau tombol jaringan sosial.

sliding
Jadi, bagaimana dengan sebuah panel geser vertikal yang akan bertindak sebagai semacam laci bukannya geser horizontal panel atas biasa yang mendorong segala sesuatu ke bawah ketika membuka?.

Dengan membuat markup, CSS dan kemudian kami akan menggunakan jQuery untuk membuka dan menutup panel vertikal kita geser. Berikut ini 3 demo yang berbeda:
Live Demo
Berikut Cara membuat Sexy Vertical Sliding Panel mengggunakan jQuery And CSS3 di Blogger :
  • Setelah Login pada edit Template Blogger, selanjutnya 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 silahkan tambahkan kode dibawah ini pada bagian body :
    <div id="sexy">
      <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://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>
        <h3>A Little Something About Me</h3>
        <img class="right" src="images/jon_image.jpg" alt="Jon Phillips" />
        <p>My name's Jon, I'm a freelance designer, blogger, musician. I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>
    <div style="clear:both;"></div>
    <div class="columns">
        <div class="colleft">
        <h3>Navigation</h3>
            <ul>
                <li><a href="http://spyrestudios.com/" title="home">Home</a></li>
                <li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
                <li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
                <li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li>
                <li><a href="http://spyrestudios.com" title="blog">Blog</a></li>
            </ul>
        </div>
    
        <div class="colright">
            <h3>Social Stuff</h3>
            <ul>
                <li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
                <li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
                <li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
                <li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
                <li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
            </ul>
        </div>
    </div>
    <div style="clear:both;"></div>
    </div>
    <a class="trigger" href="#">infos</a>
    </div>
  • Selanjutnya copy CSS dibawah ini kemudian paste diatas kode ]]></b:skin>
    #sexy a:focus {
        outline: 0
    }
    
    #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: #444;
        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: #222;
        border: 1px solid #333
    }
    
    #sexy p {
        color: #ccc;
        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 #ccc;
        -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: #fff;
        background: #333;
        border: 1px solid #444;
        -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: absolute;
        top: 50px;
        left: 0;
        display: none;
        background: #000;
        border: 1px solid #111;
        -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;
        opacity: .85
    }
    
    #sexy .panel p {
        margin: 0 0 15px 0;
        padding: 0;
        color: #ccc
    }
    
    #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: #fff;
        text-decoration: none;
        border-bottom: 1px solid #fff
    }
    
    #sexy a.trigger {
        position: absolute;
        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: #333 url(images/plus.png) 85% 55% no-repeat;
        border: 1px solid #444;
        -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: 0;
        -webkit-border-bottom-left-radius: 0;
        display: block
    }
    
    #sexy a.trigger:hover {
        position: absolute;
        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: #222 url(images/plus.png) 85% 55% no-repeat;
        border: 1px solid #444;
        -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: 0;
        -webkit-border-bottom-left-radius: 0;
        display: block
    }
    
    #sexy a.active.trigger {
        background: #222 url(images/minus.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
    }
Referensi Artikel :
How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3 dan dapat lihat langsung pada Original Demo.

Baca juga :

4 comments:

  1. Halo mas.. lama gak updet neh blog nya.. hehehehehe...

    ReplyDelete
  2. Kok ga bisa dan template saya jadi berantakan ?????
    :(

    ReplyDelete
  3. Maaf buat style blogger template, ternyata bisa hanya aku yang keliru masukin kodenya , maklum lagi belajar !!!!

    ReplyDelete
  4. Terimakasih telah berkunjung di Style Blogger Template

    ReplyDelete

to Top