Membuat Panel Info
Assalamualaikum ....
Apa kabar mas broo hehehee
sore ini saya mau kasih tutorial cara buat panel info tadi sempet jalan" keblog-blog dan nemu ini artikle hehehe.... Tutorial ini untuk membuat Panel Info , sebenarnya bukan hanya panel info yang bisa di masukan di dalam situ buku tamu, dll juga bisa, kalau mau liat yang buku tamu silahkan klik disini tutorial nya, ksempatan Kali ini masalah panel info ..
ok .. 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>
<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>
| Tweet |