Membuat Panel Info Admin di Blog Dengan Jquery

weleh... saya jadi rajin ni meng update Artikel di blog tercinta ini.. hihihihi, gak tau kenapa ya, X aja lagi Semangat. Pada Kesempatan kali ini saya ingin share sedikit ilmu blog yaitu Cara Membuat Menu Info Di blog Atau Cara Membuat Panel Info di Blog Atau yang lain nya sejenis nya deh... setelah kemarin membuat postingan Cara Membuat Start Menu Windows Di Blog Yang Bisa Anda Lihat DISINI Sekarang masih agak Serupa sih, namun ini menggunakan Jquery, yang Sederhana, Jika Ingin melihat Priview dari Menu Jquery ini anda bisa lihat di blog Ini, kan ada tu di sebelah Kiri menu info panel nya ada kan ???

kurang lebih menu nya seperti itu.. he he he
Ok langsung saja ke cara pembuatan nya....
jangan basa-basi langsung >>>>

Login ke blogger dengan akun anda, jangan pakai Akun tetangga ya... #LOL :D

Kemudian klik rancangan > Edit HTML jangan lupa centang "Expand Template Widget" (pada tampilan lawas)
Klik Template > Edit HTML jangan lupa centang "Expand Template Widget" (pada tampilan baru)

Cari kode berikut ]]></b:skin> gunakan Find tools dengan cara tekan ctrl + F biar cepet, kemudian copy kode dibawah ini dan letakkan diatas kode ]]></b:skin> nya

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

Setelah itu cari kode </head> lalu copy kode dibawah ini dan letakkan diatasnya.

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

Perhatikan code warna Hijau, jika code itu ada di edit html anda, dikarenakan pernah membuat Jquery di blog, maka copy code di bawah ini dan letak tepat di bawah code hijau tadi

<script type="text/javascript">  

$(document).ready(function(){  

$(".trigger").click(function(){  

$(".panel").toggle("fast");  

$(this).toggleClass("active");  

return false;  

});  

});  

</script>

Setelah itu (terakhir bos) cari lagi kode </body> setelah itu copas kode dibawah ini dan taruh diatasnya.

<div class='panel'>
<h3>Selamat Datang Di Blog TKJ Comunity</h3>
<p style='text-align:justify'>Selamat datang di blog TKJ Comunity, saya harap anda senang berada diblog sederhana ini. Tujuan didirikan nya blog ini tidak lain tidak bukan hanya untuk share ilmu yang saya miliki ke teman-teman semua, walaupun ilmu yang saya miliki tidak banyak dan kala menarik dengan yang di berikan oleh para blogger senior, namu saya tetap ingin berbagi, dengan tujuan bangsa Indonesia bisa dan maju  <a href='http://yudhacomunity.blogspot.com/' title='TKJ Comunity'>Baaca Selengkapnya tentang blog ini</a></p>
<h3>Sekilas tentang Admin</h3>
<img height='73px' src='lh3.googleusercontent.com/-6HjweYFx_jE/TkotKHe9yAI/AAAAAAAAACM/gICUOc9dZwY/s533/aw.png' width='73px'/>
<p>Orang-orang memanggil saya dengan Sebutan Yudha, saya Lahir di Sumatra bagian utara tepat nya di Medan pada tahun 1995,Saya mulai belajar blogger sejak tahun 2011,namun baru serius tahun ini jika ingin mengetahui saya secara detail, kamu bisa add saya di facebook saya <a href='https://www.facebook.com/jok.yudha'>DISINI</a></p>


<div style='clear:both;'/>


<div class='columns'>
<div class='colleft'>
<h3>Menu</h3>
<ul>
<li><a href='http://yudhacomunity.blogspot.com/' title='home'>Home</a></li>
<li><a href='https://plus.google.com/116758929783952899224/about' title='about'>About</a></li>
<li><a href='https://facebook.com/jok.yudha' title='FB'>FB</a></li>
<li><a href='https://twitter.com/yudhasitumorang' title='Twitter'>Twitter </a></li>
<li><a href='http://yudhacomunity.blogspot.com/2012/07/daftar-sebagai-penulis-blog-ini_25.html' title='Mau Jadi Penulis Blog Ini ???'>Mau jadi penulis</a></li>
</ul>
</div>


<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='https://facebook.com/yudha.fernando.situmorang' title='Fans Page'>Fanspage</a></li>
<li><a href='https://plus.google.com/116758929783952899224/' title='About Me'>G+</a></li>
<li><a href='mailto:fernan.situmorang@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

Save, dan lihat hasilnya

Semoga Menu Itu langsung ada... he he he.... kalau kamu benar melakukan nya sesuai instruksi nya, pasti ada lah.... :)
GOOD LUCK :)

jika ada pertanyaan, atau kamu suka postingan ini, mohon di share atau komen :) he he he