Cara Membuat Vertical Sliding Info Panel With jQuery

Kali ini saya akan share cara membuat vertical sliding info panel with jQuery.. Oke langsung aja ke tutorialnya sob :D cekidot..

1. Login ke blogger sobat

2. Masuk ke Template --> Edit HTML

3. Kemudian cari kode ]]></b:skin>  gunakan ctrl+F

4. Lalu copas kode di bawah ini tepat di atas kode ]]></b:skin>

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px
solid
#940000;width:320px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px
30px 30px 100px}

.panel p{color:#ffffff;margin:0 0 15px;padding:0}

.panel a,.panel a:visited{color:#940000;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}

.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}

a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana,
helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtVIPIdkw_XKapT5peDEUaFJLCVaM1ozLl4NolKnH05iX-7Depij9BvsiLpuzxiv5bYzC1dL_wXxOuaJNhHvisF1mvP_NFuVx6LU21uWNYxIVvBsBD_AgKyiuYxPNgoeDBMAhYUAJdVrw/)
85% 55% no-repeat;border:2px solid
#940000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px
35px 10px 10px}

a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana,
helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDva0zK_ThG7tgpah_R-iiGSc_wlnSiK3Y4LGCMkUb8lzC583MBYGy9q-uZcbcV87s1QW0It4-N7TPfYiolSSKEIbjQKGSjR-DXNBejjM3qgohY91vxaJdYqSEi61obY1LZFY6yI1ikfQ/)
85% 55% no-repeat;border2px solid
#940000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px
40px 10px 10px}

a.active.trigger{background:#222
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDva0zK_ThG7tgpah_R-iiGSc_wlnSiK3Y4LGCMkUb8lzC583MBYGy9q-uZcbcV87s1QW0It4-N7TPfYiolSSKEIbjQKGSjR-DXNBejjM3qgohY91vxaJdYqSEi61obY1LZFY6yI1ikfQ/)
85% 55% no-repeat}

.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}

a:focus{outline:none}

.panel img{border:1px solid #FFFFFF;float:right;margin:3px 3px 6px 5px;padding:3px}

.panel h3{border-bottom:1px solid
#FFFFFF;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#940000;font-size:13px;font-weight:700}

.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}</ div>

5. Cari kode </head>
6. Kemudian copas kode di bawah ini tepat di atas kode </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>

7. Yang terakhir cari kode </body>
8. Dan letakkan kode di bawah ini tepat di atas kode </body>

<div class='panel'>
<h3>Selamat Datang</h3>
<p style='text-align:justify'>Selamat datang di blog saya yang sederhana ini, semoga bisa bermanfaat bagi kalian semua. Silahkan tulis kritik dan saran kalian <a href='http://taufan-fhm.blogspot.com/p/blog-page_1.html' title='Kritik dan Saran'>di sini</a>. Terimakasih atas kunjungannya</p>

<h3>About Me</h3>

<img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8eOXDPi-HiHfhSInk88W_sbMSXv6drWGLKN4vwIWQ9vIjmxz1tTIPG8gp0lcMqiCSWex9E9j1ONjU1jw-fivC8XTKOOjsOmg_rObbPUTix-JYV8yd-_JUZTH11QOhzEzGF0ORrKXoO14/s320/picture026.jpg' width='73px'/><p style='text-align:justify'>Seorang bloger pemula yang selalu ingin berbagi informasi, dan sekarang ini sedang proses pencarian jati diri..</p>

<div style='clear:both;'/>

<div class='columns'>

 <div class='colleft'>

 <h3>Social Stuff</h3>

  <ul>

   <li><a expr:href='data:blog.homepageurl + &quot;feeds/posts/default&quot;' title='rss'><img alt='RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUhJMWNHJcYmVoyiExvEuHanNqTIz685yq-5e9P_S9EynKUFU3eMJk3xmVe2jxewKkCcIclB75lyX75Mf7C6-agFei7Hq2xsRvG-8LEn6W8bBYDyjY3cT-HwIAyWgOFLhlsf0-rauqFLI/'/></a></li>

   <li><a href='http://twitter.com/haha_29' title='twitter'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0a0AtnkCMH_OL-kbpLIdv7Y53YyBQhx5yOFGo0GvI0-U77CfwbV0zGtQimfnM5hxFqS8HPoEkolIJmdQ_a0__EhzT1BSbRXBu5z8ugfNCclL5fXZ5HfJdbyOMApdcksM7avwwnQfjIL4/'/></a></li>

   <li><a href='http://www.facebook.com/nafuat' title='facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwMmuV-OjkjEkIRUYX1H3M2sEcy7Wk4GqiI6cXQdHXJj-P5EYpmt1awt4-scwKBq6S0ngUpQKXrJFZl0RfBpC5p1TXrUQtJmrSAUkxeuk-bhqoq30uHwjR8zIP483dVXV6ZxBnW1HqTA/'/></a></li>

   <li><a href='http://taufan-fhm.blogspot.com/' title='home'><img alt='HOME' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh81xXMh-5GhD5lEYMZEH9qYfdrk9Zarw3s50BN-3GgG0s0XEL-Ao18GBkIAMZaqWk7QAxwmKfQzj2I3zwsdpc59w-gcgHdmK_GNOPsBtU5VAWU9ZJu7LkFxaHrlxU4kJtjsiDmL8F1SQg/'/></a></li>

  </ul>

 </div>
</div>
<div style='clear:both;'/>

</div>

<a class='trigger' href='#'>About</a>

Keterangan :
Ganti link yang berwarna biru  dengan url gambar sobat
Ganti haha_29 dengan username twitter
Ganti nafuat dengan username facebook