Cara Membuat Sliding Panel Menu di Blog

Posted by Tips Trick Blogger Thursday, February 3, 2011 0 comments

Sebelumnya saya pernah memposting cara membuat menu tersembunyi, namun posting kali ini kita menggunakan trik yang berbeda. Mungkin beberapa template sudah menggunakan fasilitas ini, namun jika belum kita akan membuatnya dengan cara yang cukup sederhana. Penggunaan script masih berkisar pada css dan jquery, tapi anda hanya perlu edit sedikit dengan mudah, langsung pasang...jadi dan lihat hasilnya. Ok sahabat...mari kita mulai instalasinya...kayak listrik aja!!!

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan Kode CSS ini sebelum ]]></b:skin>

#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: absolute;
    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: 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:#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: 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:#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;
    }

Cari Kode </head>

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<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>

Simpan Template
Klik Lagi Racangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan Kode berikut di dalamnya

<div class="panel">
        <h3>Judul</h3>
        <p>Tulisan di bawah judul</p>
        <p>Keterangan anak judul</p>

        <h3>Judul anda di sini</h3>
        <img class="right" src="http://s1.hubimg.com/u/105098_f260.jpg" alt="sexy tattoo" /> /* ganti text h\biru dengan alamat gambar anda */
        <p>masukkan tulisan anda di sini</p>

    <div style="clear:both;"></div>
    <div class="columns">
        <div class="colleft">
        <h3>Navigasi</h3>
            <ul>
                <li><a href="http://blogonol.com/" title="home">Home</a></li>
                <li><a href="http://blogonol.com/about/" title="about">About</a></li>
                <li><a href="http://blogonol.com/portfolio/" title="portfolio">Portfolio</a></li>
                <li><a href="http://blogonol.com/contact/" title="contact">Contact</a></li>
                <li><a href="http://blogonol.com/" title="blog">Blog</a></li> /* ganti text merah dengan link yang ingin anda pasang */
            </ul>
        </div>

        <div class="colright">
            <h3>Judul anda di sini</h3>
            <ul>
                <li><a href="http://twitter.com/beritapanasssss" title="Twitter">Twitter</a></li>
                <li><a href="http://link sosial anda.com/user/147" title="DesignBump">DesignBump</a></li>
                <li><a href="http://link digg anda.com/users/" title="Digg">Digg</a></li>
                <li><a href="http://link delicious anda.com/" title="Del.Icio.Us">Del.Icio.Us</a></li>
                <li><a href="http://link designmoo anda.com/" title="DesignMoo">DesignMoo</a></li> /* ganti text merah dengan alamat url yang ingin anda pasang */
            </ul>
        </div>
    </div>
    <div style="clear:both;"></div>

    </div>
    <a class="trigger" href="http://blogonol.blogspot.com/">infos</a> /* silahkan fanti text hijau dengan alamat link yang ingin anda pasang dan berikan judul pada text hijau ke dua */