Membuat Vertical Sliding Info Panel With jQuery di samping blog

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/AVvXsEj3Vpqnp7uPizzbunRGjESsVCSTNCopJKnLM4kcyTtcch04-7jIoXrc7PFUAiZbiybUUB19gcuscXRkMaNtvIck5YBCnEgYnsndtyMjUahTRyP3sX8ZWGsLbInx0_i3Xgd4rwbfhKBgwgU/) 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/AVvXsEg9YHVFUXpPzpCAVFlSjEg2x-m2FapddPvHVvVxRLkD7H9kw2XTP54vlgntBxGG65c39HDeYDnhZ3uy8e3NTnDxIxEw79t3I5BIAkBdiiwfSjlFgwDkgDezjWb5GLPKs8aTGfJ5_nJJABY/) 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/AVvXsEg9YHVFUXpPzpCAVFlSjEg2x-m2FapddPvHVvVxRLkD7H9kw2XTP54vlgntBxGG65c39HDeYDnhZ3uy8e3NTnDxIxEw79t3I5BIAkBdiiwfSjlFgwDkgDezjWb5GLPKs8aTGfJ5_nJJABY/) 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(){ $(".trigger").click(function(){ $(".panel").toggle("fast"); $(this).toggleClass("active"); return false; }); }); </script>

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

<div class='panel'> <h3> ---Blogger Kuansing---</h3> <p style='text-align:justify'> Sebuah blog edukasi, seputar Tips dan Trik Blogger " 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='Opini'>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> Socialita</h3> <ul> <li><a expr:href='data:blog.homepageurl + "feeds/posts/default"' title='rss'><img alt='RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV3uKASnMudMw1EgPccM9GxndyqyX1LfYV2sItPN6XfnYR3N3RRYKj03txBfBGTzClCSlqZt1iH11yQvTKzNoASZgR6e9-53VUDnMeEyiB7ZQ5yJ-aGyvfMPWy3Oimr7d-oZT4bkNVk3I/'/></a></li> <li><a href='http://twitter.com/@super_sekali' title='twitter'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijGTU8jym8EUFNbCOQMCvVsJCjvQrFUtSbsjUZFTyaUs7aSbZqGP_T0jH-sVNDwawDCBHpp2OQM4911EcjwDmz73yXTcimlfDD7AIMS3_wFSQqSA-lYp5RKI23MSJ2BEDMOc15j7sNt8I/'/></a></li> <li><a href='http://www.facebook.com/idonie2' title='facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAq_P4MxgAXbaNIkUqcBsiIlgkcIGx2-vFOKmvoVuRSh4aA7epxdD1kls3uf3KWhelszTjN7N4SsvjH2fV-vSma98T3fzqd0DWlc-Drzu8MJk_q2EugDv_38nPO8FnxTEJdWJ7od34xa8/'/></a></li> <li><a href='http://kuansingfoundation.blogspot.com/2013/02/widget-related-post-artikel-terkait.html' title='home'><img alt='HOME' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirM_vB1b6yyBheiG_rH02SnEIEF-dMHOkvoIG1gdBNiUB4M9dpXRAu3lG78ozaXGgmsgVFgXefvjVpeYBda3uK9RgX4vcHdEiZ35R0sNazMIsxMxMbxY9sttqiAodEn5jU-I574HWBb8k/'/></a></li> </ul> </div> </div> <div style='clear:both;'/> </div> <a class='trigger' href='#'>Ask About me</a>

* Yang ada link nya , bisa sobat ganti sesuai dengan keinginan,..