Cara membuat Vertical Sliding Info Panel Dengan jQuery

Kesempatan kali ini Fhikar Note akan meberi tahu cara memasang widget "Vertical Sliding Info Panel" Widget ini dahulunya sering saya pakai,karena menurut ane keren sih.. untuk jelasnya agan bisa lihat screenshot widget tersebut di bawah ini di bawah ini:

Sceenshot/Gambar Vertical Sliding Info Panel Dengan JQuery

Kalu agan masih belum puas melihat screenshotnya silahakan lihat demo livenya di sini

nah bagaimana, menarik nggak? widget ini sebenarnya ane dapat di http://kode-blogger.blogspot.com/ dan kemudian saya modifikasi bagian CSS dan menunya agar kelihatan keren :D

Jika agan berminat memasang widget ini di blog agan ! silahkan ikuti tutor yang akan saya jelaskan!!!

1.Seperti biasa masuk ke blogger
2.Klik rancangan pada blog yang akan agan taruh widget ini
3. Klik "Download Template Lengkap" (ini untuk memBackUp template agan )
4. Beri tanda centang "Expand Template Widget"
5. Tekan Ctrl+F (untuk mempermudah pencarian) dan cari kode:]]></b:skin>
6.Jika sudah ketemu, letakkan kode di bawah ini 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/AVvXsEipxkhMqcMPJbxl4Bq2cAzBsgfEkdZLyRg7VxBkba7EVyBm_8LVcGwnxdqgjo57M-q6pbf4x65Jx61g0aFO8ND0D1SlEGLmGXiaAuyKGVsNzA5qQ9O_rodAAoVOx1f8qc-QHF9HTD1sWqQ/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/AVvXsEipxkhMqcMPJbxl4Bq2cAzBsgfEkdZLyRg7VxBkba7EVyBm_8LVcGwnxdqgjo57M-q6pbf4x65Jx61g0aFO8ND0D1SlEGLmGXiaAuyKGVsNzA5qQ9O_rodAAoVOx1f8qc-QHF9HTD1sWqQ/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/AVvXsEgudfu-ubjfvEGaf32MtDigMAnKJ1U0OPjJ2MX3g1gh25D9i5Hh4sOsjXhvYsNWROQHwlgcwXD7kHJ15J9ZHRFZIw8_W8XR45HxyUGfZZJobqLzi28xD4GRyXf2V4Tbter4y-yL5CVUkHc/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}

7.Kalau sudah agan cari lagi kode </head> dan taruh kode JavaScript berikut, tepat diatasnya

<script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.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>

• Kode berwarna biru = Kode jQuery
  

8.Save/Simpan template
9.Ini yang terakhir agar menu Info panel-nya bisa nongol di blog agan,
Masuk ke:
> Tata Letak/Rancangan
> ADD New Widget
> Tambah Gadget
> Pilih HTML/Javascript

Kemudian Masukan kode dibawah ini:

<div class='panel'>
<center><font size="1"><a href="http://kode-blogger.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 Fhikar Note [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="Fhikar Note" target="_blank" href="http://www.blogger.com/profile/13964977269585876663">Selengkapnya tentang saya</a></p>
<h3>Sekilas tentang penulis</h3>
<img width="73px" height="90px" alt="Fhikar Note" src="http://i1143.photobucket.com/albums/n635/Zhulfhikar/Foto0789.jpg" />
<p>Nama Saya Zhulfhikar Altafb ramadhan
<br/>
Nama lengkap saya adalah Zhulfhikar anak pertama dari tiga bersaudara. saya sering di panggil fhikar oleh teman-teman saya, saya berasal dari keluarga sederhana, tidak kaya juga tidak miskin, saat ini saya sedang bersekolah di sekolah teknik Di SMKN 1 KUALA KENCANA (TIMIKA-Papua)</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/AVvXsEiXMb2PG0ENZn2_tyaCg2H9Aqb1mCN2YMX6VGsAwHWlpBwdyA3iWPTUzF6fwUB7Ml0Df4Y98yg7NDdQZ3j6xG5vs_fekWhxfEQUGs0OJY6EsxTV7ICZ4NVR8x6zMgQUN8s74CPbXKXDUlo/s320/r.png" /></a>
<a href="http://www.mybloglog.com/buzz/members/08113139411481282535/"><img alt="mybloglog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_FogoWHZnx2hJEKeCh0oLpl9mj4FFc1W9meU1Xj3YfRza0L9te2lXH5cekTiRHd2Y8bkjIyEgPLN3pZGYk74A6NdqY_2qV2gXHeBb_6tKU9PaTQpL6qc29gPRTGBJUVQZOarFqzQNgw/s320/l.png" /></a>
<a href="http://twitter.com/#!/Fhikar_doktrin"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_W6QJZ-8KXYwpyN92yyWH7SWhZVQV_x49s3O-qyzaByRktIgUuIxTXNZAeiPisHFzqwlvOEiYSPuFCngduqFcZfRsqVBiAhFeXdgnJvJzWNo5xHkw7FkLuIbA0Px8RaA1kcL6HoOaHDU/s320/t.png" /></a>
<a href="http://www.facebook.com/fhikar.musisi"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbXsh6cHrksJcZKT-PZv63F9m3extleIrUlegj0V3dmbd6ObxhNO1aYePwueHfWtlmzUjkBhou4eGAo4ML237D9LQr8EPS-FDe5L8y3kBHkJEPXDTPwXPbFninQRNAyEArCt1KscxA9r0/s320/f.png" /></a>
<a href="http://fhikar-note.blogspot.com/"><img alt="HOME" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFgZ2pOjZet6epDvEJfwSUF0LpE_0sWoaPQ2iBwWQY-8Odt-fNNzNCFT8roc4zbkJAAsqc8U4_qLrPYLKhXPO9WkrtW0lCuOPHHh2O_XJpB9AmyHwy65ogaIu0jpb5WhDEjm9VtHvqL4Y/s320/b.png" /></a>
</div>
</div>
</div>
<a class='trigger' href='#'>Info</a>

• Untuk kode yang di beri warna, agan rubah dengan data agan sendiri.
• Simpan widget
  
• Seppp sampai disini selesai, Simpan dan lihatlah hasinya

Tambahan:
BIla dalam pemasangan Info panel di blog agan bermasalah? ini bisa dikarenakan kode.js di template sobat double, dan mungkin diblog sobat sudah tepasang kode jquery-1.3.2.js atau semacamnya. Untuk itu hapuslah salah satu kode.js tersebut.
jadi bila ditemplate sobat sudah terdapat jquery-1.3.2.js, maka sobat tidak perlu lagi menambahkan kode.js tersebut.
Ok... Selamat mencoba, dan semoga bermanfaat.

Ingin mendapat tulisan terbaru Fhikar Note™ langsung ke Email Anda? masukkan alamat email Anda untuk berlangganan, Gratis!

*cek email Anda untuk konfirmasi berlangganan

Artikel terkait....