Membuat Vertical Sliding Info Panel Dengan JQuery

Viyan Pradita Minggu, Mei 22, 2011 ,

Membuat Vertical Sliding Info Panel Dengan JQuery, itulah yang akan saya share pada kesempatan kali ini. Setelah kemarin blogwalking kesana-kesini, ada beberapa sobat blogger yang menanyakan bagaimana sih caranya membuat menu Info Panel, seperti menu dipojok kiri atas blog sobat?? Selagi saya sempat dan bisa, pasti saya buatkan tutorialnya, ini juga saya cari sana-sini koq. cuman untuk CSS dan tambahan menu, saya modifikasi sendiri. dan pastinya untuk kode CSS-nya lebih simple.
Untuk lebih jelasnya silahkan sobat lihat gambar/demonya dibawah ini.

Sceenshot/Demo Vertical Sliding Info Panel Dengan JQuery

Kiranya seperti gambar diataslah yang kali ini akan saya share.
Berikut langkah-langkah membuatnya:

1. Seperti biasa, Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Tekan Ctrl+F (untuk mempermudah pencarian) dan cari kode: ]]></b:skin>

7. Taruhlah kode CSS berikut tepat diatas 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(http://3.bp.blogspot.com/-xVriNomN0QM/TcGZYgBZBhI/AAAAAAAAAo0/Eq6W8TAcO8U/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(http://3.bp.blogspot.com/-xVriNomN0QM/TcGZYgBZBhI/AAAAAAAAAo0/Eq6W8TAcO8U/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(http://4.bp.blogspot.com/-7z5GA-G6HtE/TcGaZLSwjiI/AAAAAAAAAo8/hoiwsj5T1aA/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}

8. Kalau sudah, cari kembali 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>

9. Simpan/Save Template.

Langkah terkahir, agar menu Info panel-nya bisa nongol di blog sobat,
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 Kode Blogger [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="Viyan Pradita" target="_blank" href="http://www.blogger.com/profile/08113139411481282535">Selengkapnya tentang saya</a></p>
<h3>Sekilas tentang penulis</h3>
<img width="73px" height="73px" alt="Viyan Pradita" src="http://3.bp.blogspot.com/-4UW1eGYlTIY/TcGQyNnXuSI/AAAAAAAAAos/F7D9RS-H9mk/s320/pepenk.jpg" />
<p>Nama Saya Yus Aviyan
<br/>
Saya seorang mahasiswa disalah satu perguruan tinggi di Yogyakarta</p>
<div class='columns'>
<div class='colleft'>
<h3>Social Stuff</h3>
<a href="feeds/posts/default"><img alt="RSS" src="http://3.bp.blogspot.com/-76Zucz4bky8/Tc21ra3-lwI/AAAAAAAAArM/13nkYhZZWZ4/s320/r.png" /></a>
<a href="http://www.mybloglog.com/buzz/members/08113139411481282535/"><img alt="mybloglog" src="http://3.bp.blogspot.com/-FVuAQde9i0Q/Tc3mGeCW0fI/AAAAAAAAArk/UD3ERP_kZgs/s320/l.png" /></a>
<a href="https://twitter.com/#!/viyan_padita"><img alt="twitter" src="http://2.bp.blogspot.com/-KEgIbUnk2tw/Tc21rS3d0bI/AAAAAAAAArE/vJHksxtWCMk/s320/t.png" /></a>
<a href="http://www.facebook.com/fiyant"><img alt="facebook" src="http://2.bp.blogspot.com/-bcyUWAsCaxM/Tc21rDJyJiI/AAAAAAAAAq8/nIKR08D7G70/s320/f.png" /></a>
<a href="http://kode-blogger.blogspot.com"><img alt="HOME" src="http://4.bp.blogspot.com/-44mliT_w4HI/Tc21rDFEeoI/AAAAAAAAAq0/tAbFk-lDbKg/s320/b.png" /></a>
</div>
</div>
</div>
<a class='trigger' href='#'>Info</a>

Seppp sampai disini selesai sob, Simpan dan lihatlah hasinya.
Eittt... tunggu dulu, sebelum menyimpannya harap rubahlah untuk kode widget ditas, sebab nanti prifile sayalah yang keluar diblog sobat. hehehe :p


Tambahan:
BIla dalam pemasangan Info panel di blog sobat 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.

Ditulis Oleh :

Artikel Membuat Vertical Sliding Info Panel Dengan JQuery ini dipublish pada hari: Minggu, Mei 22, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

19 komentar
Terjun Ke Kolom Komentar

  1. keren mas :) ntar dah saya pasang ^^

    BalasHapus
  2. @Muhammad Ihsan: Sipp mas, met mencoba :)

    BalasHapus
  3. lumayan ni sob bisa hemat tempat, berhubung udah padatnya blog ane.hehe
    thanks ya :)

    BalasHapus
  4. Keren sob info-na.! patut untuk di terapkan. salam kenal+kompak jha shbt.

    BalasHapus
  5. @Yohanes: Hehe, iya sob, sama2, senang bisa berbagi ;))

    @Berbagi Kreatifitas: Ok sob, salam kenal juga ya :)

    BalasHapus
  6. manarik juga .. ;)) patut untuk di coba neh :p

    salam kenal ya gan, kunjungan pertama neh ..! :D

    BalasHapus
  7. @Fix Computer: Yupz, silahkan sob, salam kenal balik sob? Thank...

    BalasHapus
  8. ini template blog mengingatkan ke si modifikasi blog :D
    Beben Koben si bloglang anu ganteng kalem tea \m/

    BalasHapus
  9. @Kang Beben: Yah emank terinspirasi darisana... hoho tiap ane nanya disana kekna gak pernah ada yg di respon deh :D hadew...
    Oia kang, avatar di komentar blog ente udah nongol belum ??

    BalasHapus
  10. kapan-kapan saya coba mas.save page dulu.

    BalasHapus
  11. Kebetulan saya lagi kutak-katik blog neh mas,..nice info dan salam kenal.

    BalasHapus
  12. @Honda Center Semarang: Sip, silahkan Mas.

    @Yudi: Ok Mas, salam kenal juga :)

    BalasHapus
  13. wah Info yang menarik nih, patut di coba. :)

    BalasHapus
  14. @M.Iqbal Arifhan: Sip, silakan mas bro :)

    BalasHapus
  15. mantab gan ,, ini yang q cari ..
    moga sukses ,, n jgn lupa comment back ia gan ..

    BalasHapus
  16. @Begiloguide: Sip gan, oia itu untuk link sumber yang nyantol di kode script'nya jgn lupa dihapus gan. biar gak keluar tuh "selengkapnya di:" hehe :D

    BalasHapus
  17. Keren sob. dah dicoba dan berhasil. ngomong cara buat panel home, blog, about, portofoliso de el el kayak punya sobat gimana??? mohon bombingannya :D

    BalasHapus
  18. @na2ngismail: lama gak nongol kmn aja sob :D
    Okedeh besok2 saya share juga sob.

    BalasHapus
  19. gan kok sy error yah, jd hasilnya gk ada tombol info di atas tp malahan tampil biasa di tempat sy naruh kode tersebut?

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers