Cara Mempercantik Widget Profil

Ini adalah screenshotnya "sebelum di sorot mouse"



dan ini adalah setelah di sorot oleh mouse "hover"


untuk demonya silahkan sobat lihat widget profil di blog ini, di bawah kiri blog ini tepatnya
bagaimana sobat tertarik untuk memakai trik ini di blog sobat?

jika tertarik silahkan ikuti langkah2 brikut :

1. Pertama, masuk dulu ke halaman Edit HTML

2. Cari kode ini ]]></b:skin>

3. Kemudian letakan kode berikut di atasnya
.profile-img {
border: 8px solid #aaa;
opacity: 0.8;
border-radius: 6px;
margin:0 5px 5px 0;
padding: 4px;
background: #eee;
box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
-webkit-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
-o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
-moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in;
-webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in;
}
.profile-img:hover {
opacity: 1.0;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-moz-box-shadow: 1px 1px 1px #33F, -1px -1px 1px #33F, 0 0 16px #33F;
margin: 40px 0px 20px 10px;
-o-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-moz-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-webkit-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-o-transition: margin-left 1.5s ease-in 0.4s, margin-top 1.5s, -o-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-moz-transition: margin 1.5s ease-in 0.4s, -moz-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-webkit-transition: margin 1.5s ease-in 0.4s, -webkit-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
}
.profile-data {
margin:0;
color:red;
font-weight: bold;
line-height: 1.6em;
font: 25px  reenie Beanie;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
color:#fff;
}
.profile-link{ font: 13px IM Fell English,arial,serif; text-transform:none;letter-spacing:2px;line-height:1.2em;}
#menu {
background-color:#333333;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
height:29px;
margin:3px auto 0;
width:1001px;
margin-left:-1px;
}
5. Simpan dan lihat hasilnya
Share this video :
 
Support : Creating Website | Thebugis.com | Thebugis.com
Copyright © 2011. Thebugis.com - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Website Thebugis.com