Friday, July 6, 2012

Membuat Vertical Sliding Info Panel Dengan JQuery

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> DOWNLOAD KODE CSS 
8. Kalau sudah, cari kembali kode:  </head> DOWNLOAD 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:
DOWNLOAD SCRIPT 


JANGAN BERHENTI BERKREASI^^

No comments:

Post a Comment