Membuat Panel Info dengan jQuery

Pertama-tama baiknya kita ketahui dulu apa itu Panel info dan jQuery~

Panel info adalah panel yang fungsinya memberi info mengenai blog ataupun informasi dari pembuat blog.
jQery adalah JavaScript yang menyederhanakan traversing dokumen HTML, penanganan even, animasi, dan interaksi Ajax untuk pengembangan web yang dirancang untuk mengubau cara menulis JavaScript.

Untuk lebih memahami lihat contoh panel yang sudah saya buat untuk blog saya berikut ini :

Klik gambarnya :)

Nah, kalau kamu mau membuat panel seperti ini, berikut langkah-langkahnya :

• Login ke akun blogger kamu
• Pada Dashbor, klik Design atau Rancangan
• Klik Edit HTML kemudian centang kotak di sebelah tulisan  Expand Widget Templates
• Cari kode ]]></b:skin> (cara mudah menemukannya, tekan Ctrl+F kemudian ketik codenya)
• Copy-Paste script berikut tepat di atas kode tadi

copy script ini

.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}

• Cari lagi kode </head>
• Copy-Paste script ini tepat di atas kode tadi

copy script ini

<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(){$(&quot;.trigger&quot;).click(function(){$(&quot;.panel&quot;).toggle(&quot;fast&quot;);$(this).toggleClass(&quot;active&quot;);return false;});});</script>

• Cari kode </body>
• Copy-Paste script berikut di atas kode tadi

copy script ini

<div class='panel'><h3>Selamat Datang</h3><p style='text-align:justify'>Terima kasih telah mengunjungi F-Learning, ini adalah blog khusus edukasi mengenai Pendidikan Teknik Informatika dan Komputer <a href='http://febriyanisyafri.blogspot.com/p/about.html' title='F-learning'>Selengkapnya tentang F-Learning</a></p>
<h3>Sepintas Tentang Admin</h3><img src='http://3.bp.blogspot.com/-h7K_3O4UdVI/TZlYZhi5oAI/AAAAAAAAABk/Eq29npMqMIM/s1600/167185_1441706897514_1678333415_852116_5547740_n.jpg' width='73px'/><p style='text-align:justify'>Saya Febriyani, 19 tahun. Sekarang sedang menjalani semester 5 di salah satu Universitas Negeri di kota Makassar... <a href='http://febriyanisyafri.blogspot.com/p/profile.html' title='Profile'>Baca selengkapnya</a></p>
</div><a class='trigger' href='#'>Info</a>

• Terakhir, Klik Save dan lihat hasilnya~ xD

Note :: kamu dapat mengganti tulisan yang berwarna coklat sesuai dengan kebutuhan :)