About Panel Slide Vertikal Dengan JQuery

About Panel Slide Vertikal Dengan JQuery

Kemaren ada sobat bloger yang kepincut pingin tau gimana cara bikin Panel Slide Vertikal Dengan JQuery,...
seperti yang ada di blog PLANETTO ini,... . bukan bermaksud menggurui akan tetapi jika kita saling berbagi sesama blogger pasti akan :

1. Nambah Pahala
2. Menyenagkan
3. Banyak Teman
4. Disukai Banyak wanita, (hahaha)

Ada yang mau nambain Brow ,...???

Ya, ya, ya... sebenarnya saya ini juga masih sangat awam mengenai ilmu ngeblog, dan tutorial seperti ini saya juga mendapatkanya dari sang master Hendriono dari Blogger Tune-Up. salam tengkyu lah buat beliau,.. he, hampir mirip dengan punya beliau namun saya rombak sedikit hingga menjadi seperti yang q punya,...
bisa dilihat di Pojok Kiri pada blog ini,...

Yap oke, langsung aja ke tutorialnya, :

Login di blogger Anda
    * Masuk ke Dasbor
    * Pilih Tata Letak / Rancangan Dan Edit HTML
    * Klik "Expand Template Widget"
    * Jangan lupa untuk memback-up template anda terlebih dahulu (very recomended)


      Kemudian

1. Cari code : ]]></skin>
Sisipkan code berikut di Atas-nya :

.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/AVvXsEhTB4_pwkkmF6-5PRpwjg9XxrnoVohcliDRF6m1LscKdiLsVuPOSlcZ8uYVonl1_V_WJWNbFh_gyOuuIMBMuOnRuiCOljnH389dT_xAPCpcbmX70XQ_ponW20WaaUNNhj_sqF6nCHbCjIA/) 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/AVvXsEijaCIDCMjV7KYicdsPTjXaqz8EOOhDivAmykMDF3QAXVLWDHgzlInU3RrC62E50T7M2oNS_GVZcb97S9pYZ8M8i38Xy9oQhVUG72-s0X1ROM5vTveNaJLi_YoL5qnxxs25UtdpZb4xzL8/) 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/AVvXsEijaCIDCMjV7KYicdsPTjXaqz8EOOhDivAmykMDF3QAXVLWDHgzlInU3RrC62E50T7M2oNS_GVZcb97S9pYZ8M8i38Xy9oQhVUG72-s0X1ROM5vTveNaJLi_YoL5qnxxs25UtdpZb4xzL8/) 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}

2. Dilanjutkan dengan mencari code : </head>
dan taruh code berikut di Atas nya :

 <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>

3.  Yanag terakhir cari code :  </body>
 Dan masukan code berikut di Atas-nya juga :

<div class='panel'>
<h3>---PLANETTO.BLOGSPOT.COM---</h3>
<p style='text-align:justify'>Sebuah blog edukasi, seputar Internet, berbagai macam software&quot; ada disini. Ini adalah diary kecil dari manusia yang selalu ingin belajar dan belajar, berbagi informasi , sharing dan belajar bersama mengenai Blog, Facebook <a href='http://planetto.blogspot.com/p/about-me_15.html' title='Prolog Gue'>Baca Kelanjutannya</a></p>

<h3>About Me</h3>

<img height='73px' src='http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs171.ash2/41624_1653307434_3027_q.jpg' width='73px'/><p style='text-align:justify'>Serj.Omend, tinggal di solo, Jawa Tengah,Seorang bloger pemula yang selalu ingin berbagi informasi, dan sekarang ini sedang meniti karir perkuliahanya di Universitas Sebelas Maret</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/AVvXsEjYCPG_A5sEzFifLmJG_3Otn2AvEHkPVj_N5ol_Ob5M1yeB1dNxuyFU-eO0mnn1gAMDwF7M_pyAmJE2G5eYnNobECRnmzEjrga73G3Va9ANAiYvMOYAHIIXJqarU1zgvo0krz_0uJJAfkM/'/></a></li>
   <li><a href='http://twitter.com/@Omend' title='twitter'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzRFRHCLTa3ZYikBIW0d68aZN7MjiDXVz4LhcMSF0id9KnY-YOW2A9Ukj2HCx6u_je_y9gdz1imRWcD_gK-5NZUOu_eg9YIspcch3-ajM8S76bu7n1OZygf5BI_FUKZ76faPz6rLChguo/'/></a></li>
   <li><a href='http://www.facebook.com/serj.omend' title='facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6V6skcIYYDfeD28DiVvE5rg44Og-r_kLRcq0oIwqaEKHXk0IGOUmyeoBcUZ4GZSbv-KYOtlBUIPjPEVazM3sj65C0Pbz1oigHHu31ujHqDuSSsLkw7NnVRBHFVENrzyfNSoqPd01N7WQ/'/></a></li>
   <li><a href='http://planetto.blogspot.com' title='home'><img alt='HOME' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4BC01fA4t2OV6qeDVQyYrjXN1iZbHQ-Lh2rRKZK9VqK79CJzv8NXi-VCXl-ESaOsnFxiPtTZ0Yw9VCR5yDTMGUUMOYDae9vt1bECDRIVLQ3b4FI-Z1BOZ2LJZmqUHC8bScFD7nsZ-Gww/'/></a></li>
  </ul>
 </div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>About</a>

* Yang berwarna Ijo , bisa sobat sesuai dengan keinginan,..


Untuk Panel Slide Vertikal yang berada di kanan silakan baca juga tutorial membuat Buku Tamu Panel  Slide Vertikal Jquery nya.Yap, silakan di coba, tunjukkan kreatifitas sobat dengan mengedit pada bagian-bagian tertentu agar terlihat lebih menarik lagi,..