Cara Membuat Vertical Sliding Info Panel With jQuery

TUTORIAL BLOG | TIPS TRIK BLOG - 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,...

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/AVvXsEitIV6VDQZYXgLqYferwV4XW9haQb5jbGpug2gmpXziWmEJhjB8y3oDl6__IjQmDJgmGJ5NZUCZ-J1pd-dwI76YYBSA_ffShUYZtjA0DwE-Y4ORRYGpS8ch41kgVEsv4dbdyqaXDzhyphenhyphenXoo/)
 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/AVvXsEgkqvfqhc_oL0ubaSVvlyuj83ek_l2edoXskTvpL0I2tpakzmHNf0RX7lQrP7NWOYy45YMQUBJ4cNNf4HwSAHg16MW2G0YzYCnDpTHWnxspjgQg5x2_hpux5VlEBxOnkxmAwS33OEuuc4A/)
 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/AVvXsEgkqvfqhc_oL0ubaSVvlyuj83ek_l2edoXskTvpL0I2tpakzmHNf0RX7lQrP7NWOYy45YMQUBJ4cNNf4HwSAHg16MW2G0YzYCnDpTHWnxspjgQg5x2_hpux5VlEBxOnkxmAwS33OEuuc4A/)
 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>---TUTORIAL BLOG---</h3>
<p style='text-align:justify'>Sebuah blog edukasi, seputar Tips dan Trik Blogger &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://tutorialbelajarblogger.blogspot.com/' title='Prolog Gue'>Baca Kelanjutannya</a></p>

<h3>About Me</h3>

<img height='73px' src='http://images.zaazu.com/img/devil-animated-animation-devil-smiley-emoticon-000386-large.gif' 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/AVvXsEgJ5IEgPMz4OwO1WuesWy7sSotJh_VdhHq-gzj0XjCDOOkjJj_giPG6hiFBYGKtf7o-Pr7rqTK06aY4JO-sJ14lzSGxlpDplC8fTXhzymAlBvVqX-nlTOV3HsSA9YvQXV6g0RqDOJHxwcM/'/></a></li>

   <li><a href='http://twitter.com/@oktridarmadi' title='twitter'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyNBXSAnKqplM0Tub-uy2znelmXHFfjvkkcKb8QFWJ-0URyUbcPXZmEhf7sWQvGW1hk2pmqv5HI0X_EMdrJ27HJKi3JJlJ_wOkO51Y6OLE8bPNxU0nPOFoxtytoqN5kd2vs7NXSzz-WI0/'/></a></li>

   <li><a href='http://www.facebook.com/oktri.darmadi' title='facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO0TBP4_htuPeLT4uA4r1kxv8pIKwEJKaLsxE_2s5VdkuiQKbdH2bnA2azPIuO1BbbpSJJPLx9GjwEkX7pEGSllsnBDIejqHIh3LFSvjYXefV73yqzyDwi_uwUUSopIE3yUV1rASyhxn4/'/></a></li>

   <li><a href='http://tutorialbelajarblogger.blogspot.com/' title='home'><img alt='HOME' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi52OdWFMy3nFMDs5ILoAx59TlY5utf-c95pS4HlywXg-AUfjC4ac5lN7_G6YHquNYTgSvtS-fID0k-c7KRVdcRFqQaoDdKEbp7mDi71a7iNkIdrNyeDxEG15LDPuDHfFUny-n-oPpZ9Pc/'/></a></li>

  </ul>

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

</div>

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

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

Anda sedang membaca artikel tentang Cara Membuat Vertical Sliding Info Panel With jQuery Anda juga dapat menemukan artikel Cara Membuat Vertical Sliding Info Panel With jQuery ini dengan url http://tutorialbelajarblogger.blogspot.com/2013/01/cara-membuat-vertical-sliding-info.html, juga bisa menyebar luaskannya jika artikel Cara Membuat Vertical Sliding Info Panel With jQuery ini dianggap bermanfaat bagi teman-teman.