Kali ini tutorial cara buat panel info, sebelumnya juga saya posting panel info yang ada diatas kiri pojok blog saya, tapi bedannya yang ini buka tutup otomatis, sebenarnya bukan hanya panel info yang bisa di masukan di dalam situ buku tamu, dll juga bisa, ksempatan Kali ini masalah panel info ..
Langsung aja ke tutorial nya :
1. Login ke Blogger dengan akun anda.
2. Kemudian pilih Rancangan >> Edit HTML
3. Seperti biasa klik Download Template Lengkap biar aman
4. Jangan lupa centang Expand Template Widget
5. Selanjutnya cari kode </body>
taruh kode di bawah ini diatas kode </body>
KODE<style type='text/css'>#panelinfojaparus2 {z-index: 1000;background:-moz-linear-gradient(top, #CFFBC1, #000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #CFFBC1;-moz-box-shadow:-2px -2px 8px #FCFFBC1, 2px 2px 20px #CFFBC1;-webkit-box-shadow:-2px -2px 8px #CFFBC1, 2px 2px 20px #FF0000;width:400px;position: fixed;top:50px;left:0;margin-left:-325px;border:1px solid #444;background-position:top right no-repeat;height:35px;font:11px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#panelinfojaparus2{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #panelinfojaparus2:hover{width:410px;opacity:1.0;margin-left:0;}.panelinfo {border:1px solid #444;width:290px; margin:0px 90px 10px 10px;background:#000;color:#CFFBC1; border-radius :20px; padding:5px 0;-moz-border-radius:20px; -webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:0.2;}.panelinfo:hover{opacity:1.0;box-shadow:1px 1px 15px #000; -moz-box-shadow: 1px 1px 15px #000; -webkit-box-shadow: 1px 1px 15px #000;background: #000;}.panelinfo2 {margin:5px 10px;padding:0px 8px 10px;color:#FFFFFF;overflow:hidden;height:450px;}.japarus007 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}.japarus2 ul.bom {margin: 0; padding: 0;}.panelinfo2 li {margin-left:20px;}.panelinfo2 li a {color: #CFFBC1; line-height: 4px; font-size: 11px;font-weight: bold; text-decoration:none;}.panelinfo2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}.panelinfo2 h2 { font: 18px Droid Serif;font-weight:bold;padding:0 8px;color: #CFFBC1;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #CFFBC1;}.japarussentuh {font-size:22px;font-weight:bold;font-family:Arial Narrow;float:right;margin: 3px 10px 0 0;-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}.japarussentuh:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: greend;}</style>
<div id='panelinfojaparus2'><span class='japarussentuh'>Info</span>
<div class='panelinfo'><div class='panelinfo2 japarus007'>
<h2>sekilas tentang diriku</h2>
<li><a href='http://japarus.xtgem.com/aboutme.html' target='_blank' title='klik aja, g mengandung unsur haram ko, wkkkkkk'><img alt='about me' src='http://japaruspunya.xtgem.com/image/Enter.gif'/></a></li>
<h2>contact</h2>
<center>
<li><a href='ymsgr:sendIM?japarus_hdl' title='yahoo mesengger'><img alt='yahoo' src='http://japaruspunya.xtgem.com/image/y_button.png1301885017'/></a></li>
<li><a href='http://twitter.com/japarus' title='twitter ku'><img alt='Twitter' src='http://japaruspunya.xtgem.com/image/tw_btn.png1301885017'/></a></li>
<li><a href='http://www.facebook.com/japarus' title='facebook ku'><img alt='Facebook' src='http://japaruspunya.xtgem.com/image/fb_btn.png1301885017'/></a></li>
<li><a href='http://www.koprol.com/users/japarus' title='koprol'><img alt='koprol' src='http://japaruspunya.xtgem.com/image/koprol.jpg'/></a></li>
<li><a href='http://profiles.friendster.com/gwhanyanewbie' title='friendster'><img alt='friendster' src='http://japaruspunya.xtgem.com/image/friendster.jpg'/></a></li></center>
</div>
</div>
</div>
6. simpan ....
Catatan:
Dibagian URL facebook dan lain-lain di ganti dengan url anda
Sumber http:// www.japarus .com.
Sumber http:// www.japarus .com.
www.isunuklir.blogspot.com
