Beranda » Jquery » Cara Membuat Vertical Sliding Info Panel With jQuery

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/AVvXsEjuFMDXQvXiR3OQlPKMZIddzO2-NXGBh6ZMYE5eKlh-NaDXTNdW4Mr8DdrduF_fN1dQvGJELK3OnIezROPwUwKWOt-Eukx_0GjGqMr4yq4KIUckXsiYEIvObOEqi-WtbEk_Bkdm8aMMPaU/)
 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/AVvXsEjRyBXMaXmGiQXD1MFQri-mABxLoWTAEJKLypyYxiCOYuNAAW2nOBpfcXUBtefFlGJqDGTJUhQR9iGDVxmfAnO7PR2P9b711bvuecGTqYnuxQNt53agAVy3isNcDL1heU92iUkz-Es62EE/)
 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/AVvXsEjRyBXMaXmGiQXD1MFQri-mABxLoWTAEJKLypyYxiCOYuNAAW2nOBpfcXUBtefFlGJqDGTJUhQR9iGDVxmfAnO7PR2P9b711bvuecGTqYnuxQNt53agAVy3isNcDL1heU92iUkz-Es62EE/)
 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/AVvXsEiVuFdHMWIQIHFShqImK3L7RlLKVCqFC6HZWsK3EnRty6RN4az1rsX7WdfOlkpWvLU01iuyPHdFybkVZ6U9pvVPcZ3GeJt8pPu0dHS5u2i7lwXs954haVbGQYuVL7NWfuWQu663do74JTI/'/></a></li>

   <li><a href='http://twitter.com/@oktridarmadi' title='twitter'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhioaPBaq93wJi0XkPtAVe9dQe0UpclwGCYfbSoZZ7JyIO4m7pCph2dmBkJ_gCHqf6hbC3j8HijcAIKnEm5-X-vkLUzL97Fejjkn4Hbpe5o_XL696mpAaah5rCRA-_zx_td9mqosILKkW4/'/></a></li>

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

   <li><a href='http://tutorialbelajarblogger.blogspot.com/' title='home'><img alt='HOME' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcfNjooBW3RCISYIgV9GUK9f2r1S04-7SS9uaqexXLgeshbG9jafu8J6eO4AOSXzAt1sUkoDNBZLaIooblNsrxm-C9_29FCsSX9hHgZBv5dkUSvHs3CXPY_LruHZHGQd-TA8E4ZFsMdWc/'/></a></li>

  </ul>

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

</div>

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

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

Belum ada tanggapan untuk "Cara Membuat Vertical Sliding Info Panel With jQuery "

Posting Komentar