MENU

Membuat Panel Info (jQuery)

Buat yang bertanya tentang cara memasang Panel Info Blog seperti terdapat pada pojok kiri atas blog wbw ini (lihat gambar)



Berikut wbw cuplikkan caranya.
Panel info blog ini dibuat menggunakan aplikasi pemrograman JQuery.
Jika anda tertarik untuk menerapkanya di blog anda, silahkan ikuti langkah demi langkah dibawah ini:

# Login dulu ke akun Blogger anda
# Klik pilihan Rancangan »» Edit HTML
# Klik Expand Template Widget

# Letakan kode dibawah ini sebelum kode ]]>

.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 #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;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(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-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:15px 40px 15px 15px}
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://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-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:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}
Lalu, masukan kode dibawah ini sebelum kode


Setelah itu letakan kode dibawah ini sebelum kode

Selamat Datang


Selamat datang di WBW-WBW.BLOGSPOT.COM


Terakhir Simpan Template dan silahkan lihat hasilnya....


NB:
- Tulisan yang dicetak tebal pada script kode diatas silahkan diedit sesuai nama blog atau keinginan kamu.
- Jika ingin menambahkan gambar/foto, silahkan tambahkan alamat gambar/image location dari situs atau blog kamu pada script kode terakhir diatas(lihat contoh berikut)

Tambahkan lokasi image/foto:

Foto Saya:


Jadi, skrip kode yang terakhir selengkapnya menjadi :


Selamat Datang


Selamat datang di WBW-WBW.BLOGSPOT.COM


Foto Saya:




Info ini gw dapet dari blognya Wahyu Winoto Thanks bud :) 

ABOUT THE AUTHOR
BAGUS FRAYOGA EFFENDI : Simple and cool! That's me! I like write and do copy paste on my post. I love photography and chatting with friends. Follow me on TWITTER!!! Don't forget! ^^ Artikel / posting tentang Membuat Panel Info (jQuery) ini dibagikan oleh Bagus Frayoga Effendi pada tanggal 12 March 2011. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Membuat Panel Info (jQuery) dapat Anda sampaikan melalui kotak komentar dibawah ini.

Share this article :
 

Post a Comment

Leave comment please ...

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2010-2013. IsJustYoga1 - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger
Related Posts Plugin for WordPress, Blogger...