Cara Membuat Sliding Panel Menu di Blog

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 #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}
.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}
.content p{margin:10px 0; padding:15px 20px}
.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; filter:alpha(opacity=85); opacity:.85}
.panel p{margin:0 0 15px 0; padding:0; color:#ccc}
.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:#fff; text-decoration:none; border-bottom:1px solid #fff}
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: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:#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:0px; -webkit-border-bottom-left-radius:0px; display:block}
a.active.trigger{background:#222 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 */

• Simpan Template dan lihat hasilnya
• Selamat Mencoba dan Sukses Selalu

"keep spirits and do the best"