Membuat Panel Info Blog (Menggunakan Aplikasi Pemrograman 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 ]]></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 #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 </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

Setelah itu letakan kode dibawah ini sebelum kode </body>

<div class='panel'>
<h3>Selamat Datang</h3>
<p style='text-align:justify'>Selamat datang di WBW-WBW.BLOGSPOT.COM</p>

<div style='clear:both;'/>
<div class='columns'>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

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:

<h3>Foto Saya:</h3>
<img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkCmaB3rKBRkipAFvPfS4_auHqwCCAp5QT0w6fnwqHk4NGatfc1cQClUmbY5W_i8TcPT3yFUiv_47xRWhsnKjoWBVxI4b2eQxaWujyAzCvdKNTbXWC8mZAqW9O9zdrDpnHloB1xgzfIwVx/s400/wahyu-winoto.jpg' width='73px'/>

Jadi, skrip kode yang terakhir selengkapnya menjadi :

<div class='panel'>
<h3>Selamat Datang</h3>
<p style='text-align:justify'>Selamat datang di WBW-WBW.BLOGSPOT.COM</p>

<h3>Foto Saya:</h3>
<img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkCmaB3rKBRkipAFvPfS4_auHqwCCAp5QT0w6fnwqHk4NGatfc1cQClUmbY5W_i8TcPT3yFUiv_47xRWhsnKjoWBVxI4b2eQxaWujyAzCvdKNTbXWC8mZAqW9O9zdrDpnHloB1xgzfIwVx/s400/wahyu-winoto.jpg' width='73px'/>

<div style='clear:both;'/>
<div class='columns'>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

Ref:
- www.bloggertipandtrick.net
- zendry-online.blogspot.com

Membuat Panel Info Blog (Menggunakan Aplikasi Pemrograman JQuery)

Follow @wahyu_winoto