Membuat Vertical Sliding Info Panel Dengan JQuery Keren

Berbagi-Kreativitas.blogspot.com - Membuat Vertical Sliding Info Panel Dengan JQuery, apa itu? Anda bisa lihat tampilannya seperti yang saya buat pada blog ini letaknya di sebelah kiri atas (left top) atau lihat gambar di bawah ini

Membuat Vertical Sliding Info Panel Dengan JQuery Keren

Mempermudah SIngunjung Mengetahui Latar Belakang Anda Dengan Sliding Info Keren

Fungsi dari vertical sliding info panel jquery itu sendiri tidak begitu spesifik, karena tips ini di buat sesuai dengan kebutuhan dan kepentingan yang berbeda-beda. Seperti saya yang menggunakan untuk informasi dari tipe blog berbagi kreativitas itu seperti apa, data profil saya, jejaring sosial yang di gunakan, seperti facebook, twitter dan lain-lain. Tampilannya yang menarik dapat Anda langsung rasakan. Langsung saja untuk langkah-langkahnya bisa di lihat sebagai berikut.

7. Masuk ke blogger.com
8. Pilih Rancangan/ Layout ->> Edit HTML, download terlebih dahulu sebelum melakukan pengeditan dan centang Expand Template Widget
9. Cari kode tekan(Ctrl+F) untuk mencari ->> ]]></b:skin>
10. Perhatikan kode css di bawah ini, letakan kode tersebut 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 #666;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:#fff;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;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/AVvXsEiD1tu_YhM7f75vjwWHbF872CTty6GMn5r70gDNzCVaLcWOpNqewyr4CpQT70Fw7UT5dUcduShwG7KbkDUMFBqwxLK69pQIHVLFPdICi43LMVhVZfp90jasbD6p7yt3tJOSVYcubf_j8YI/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-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/AVvXsEiD1tu_YhM7f75vjwWHbF872CTty6GMn5r70gDNzCVaLcWOpNqewyr4CpQT70Fw7UT5dUcduShwG7KbkDUMFBqwxLK69pQIHVLFPdICi43LMVhVZfp90jasbD6p7yt3tJOSVYcubf_j8YI/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-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/AVvXsEgCcARBUWTgiS_yktDvWTs7WDFjGx2I03Bzjmwx27IXAzqdcRmtOqD1FuCyXEIMP7JMN3iTbAJboV2nIDj16SY9Fwcbwg9Y6UdrNYvvV3NfYGufN7T7oZAsRJgPTYTMwojMJIGUEfR6MZA/s320/minus.png) 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 #666;float:right;margin:3px 0px 6px 5px;padding:2px}
.panel h3{border-bottom:1px solid #666;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#fff;font-size:13px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

11. Kemudian cari kembali kode tekan(Ctrl+F) untuk mencari </head> letakan kode di bawah ini tepat di atas kode tersebut

<script src='http://berbagi-kreativitas.googlecode.com/files/Info.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>

12. Simpan template
13. Langkah selanjutnya pilih Elemen laman >> Tambahkan Gadget HTML/ Javascript, kemudian masukkan kode di bawah ini

<div class='Klik Untuk Buat'>
<center><font size="1"><a href="http://berbagi-kreativitas.blogspot.com/2011/05/membuat-vertical-sliding-info-panel.html"target=_blank"><div style="color: #444444;">

<span >make own</span></div></a></font></center>
<h3>Selamat Datang Di <a href="http://www.berbagi-kreativitas.co.cc/"/>Berbagi Kreativitas</a> [Dofollow]</h3>

<p style="text-align:justify">Salam Blogger | Senang rasanya sobat blogger sudah bersedia singgah disini. semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya, dan apabila berkenan silahkan berkomentar dan follow blog saya, dengan harapan kita sebagai sesama blogger bisa menjalin silaturohmi antar sesama blogger.
<br/>
<a title="Berbagi Kreativitas" target="_blank" href="http://www.blogger.com/profile/16540147497183085501">Selengkapnya>>></a></p>
<h3>Sekilas tentang penulis</h3>

<img width="73px" height="73px" alt="Berbagi Kreativitas" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPkR7BSdiwVaRrRBfboZokfbd4rOEYSsIqTYAIT3Zi1vWcGenb4b8Yxx9Ywf0Lic0aKsaPxmCQWGWhCZrf1jstWPPS18O2tBGz-woc_ckkxFfi0VoFmwPqzlsOuyIeQIFDksqHZlBnh4M/s128/5734_1033194046126_1713687922_66143_6873405_n.jpg" />
<p>Nama Saya Suhendri
<br/>
Saya seorang mahasiswa disalah satu Poleteknik di Bandung</p>
<div class='columns'>
<div class='colleft'>
<h3>Social Stuff</h3>
<a href="feeds/posts/default"><img alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo4Lkc3FfHY1yEMKtd6I1q6rk3N1pSQm08R6gkC1N-BomfRLbnimeUmMgBGZ-18TmYlJQbAnUZThrBdzOdpPDoBcQRQeJhdGdMaM7wI_y7w6dakUBeqBZOCOvpgnGyjLzJYiuYqZAcE7k/s320/r.png" /></a>

<a href="http://www.mybloglog.com/buzz/members/suhendri2010/"><img alt="mybloglog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoGgvoQB2mvF57glzvsfGx3JkPNL2iAYNbkO7m_yevZksyNzZUVEjFRuTnowQ1zbou50OpVkaxUuScmOp_-o2ieErHhPn1nlp6rwGWG61rqG9HtJfXoiqH4E7aQ3b7VXnUEvnbXT_k7mM/s320/l.png" /></a>

<a href="https://twitter.com/#!/suhendrikyaya"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk70Y59YhM0SLEN1Nno5dJIstYEJ_Nnim4xHEIK502nIBKWu9va6NMnuzZNOVS0VpDO81bNPR36daD84XO1tT4DZbTR4xTdAWL4GnU4fdMZYRPIbibM1LdY9hyphenhyphen5m94DBG5Bj9c57VIIgU/s320/t.png" /></a>

<a href="http://www.facebook.com/suhendrik.one"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJHs4n7xTEyf2pcpsCwk9SFjYqavi7uuoiJIlobCgM-5EWTLTyXmxIgYMAb4gkvdGdYeqjkA4Yzla6cMiaAg0ONe_VDz2tPqhyphenhyphen1FEZX1T08NvRpF4mlGYP7BliClaqGcj1nUTisKbPaKA/s320/f.png" /></a>
<a href="http://www.berbagi-kreativitas.co.cc/"><img alt="HOME" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm6oH02WZxMMfcq1Duyvnfo5Lj6DRUpKrb8I5niF_PfxIl9-JnYBeGu07Zl3GuMffSGYeqkAHk0Qox9ECcxVTtxVyGR-XLcMT0yLYzRshzW73GUZS2vL-dnqpvhYMl85ImaExBm0zgiD8/s320/b.png" /></a>

</div>
</div>
</div>

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

14. Terakhir perhatikan kode info gadget yang ada di atas, seperti Nama Blog, Profil Blog, Account Blogger, Account Facebook, Account Twitter  dan lain-lain itu harus di ubah pastinya sesuai dengan identitas Anda, barulah siap untuk di simpan. Ok semoga behasil dan selamat mencoba.!