Hai, Sa Hyun dah mau berangkat sekolah. Tapi terima Request dari Naila. Dan dapat tutorial bikin dari Neira. Tapi, kodenya udah Sa Hyun modifikasi. Baru semalem pasang Naila langsung Request. Wah, seru nih!
Langsung aja ya! geburu telat sekolah
1. Ke Dasbor kalian
2. Tata Letak
3. Tambahkan Gadget
4. HTML/JavaScript
5. Paste kode di bawah di kotak bawah
<style>Yang aku kasih warna kalian edit ya ^^
#aboutme {
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
transition:all 0.3s ease;
background-color: #FFE6F9;
-moz-box-shadow:0 0 3px #e0e0e0;
-webkit-box-shadow:0 0 3px #e0e0e0;
box-shadow:0 0 3px #e0e0e0;
border:2px dashed #ffc6f9;
padding:3px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
margin:0 auto;
margin-top:15px;
padding:10px;
width:200px;
height:auto;
}
#aboutme:hover {
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
}
.name-author {
margin:0 0 15px;
display:block;
width:100%;
}
.name-author h3 {
position:relative;
display:inline;
background-color:#FFccfa;
color:#FFF;
font-size:15px;
font-weight:bold;
margin: 0 0 0 -15px;
padding:10px;
border: 3px dashed #ff8fe2;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
width:100%;
-moz-text-shadow:0 1px 0 #666;
-webkit-text-shadow:0 1px 0 #666;
text-shadow:0 1px 0 #666;
}
@-webkit-keyframes name-author {
0% {color:white}
20% {color:#EDA3FF}
40% {color:pink}
60% {color:Orchid}
80% {color:#3CBBEC}
100% {color:white}
}
@-moz-keyframes name-author {
0% {color:white}
20% {color:#EDA3FF}
40% {color:pink}
60% {color:Orchid}
80% {color:purple}
100% {color:white}
}
@-keyframes name-author {
0% {color:white}
20% {color:#EDA3FF}
40% {color:pink}
60% {color:Orchid}
80% {color:purple}
100% {color:white}
}
/* Penerapan efek pada element yang akan diberi efek*/
.name-author h3 {
/* Waktu 10 detik */
animation:10s infinite name-author linear;
-webkit-animation:10s infinite name-author linear;
}
.aboutme-text {
font-size:12px;
text-align:left;
margin:0;
}
.aboutme-image-container {
float:left;
width:70px;
height:70px;
margin-right:75px;
z-index:1;
}
.aboutme-image-container {
margin:-10px 0 0px 0;
padding:10px;
position:relative;
}
.aboutme-image-container img {
width:100%;
height:100%;
border:2px dashed #FFA7E9;
border-radius:100%;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
transition:all 0.3s ease;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
padding: 0px;
margin: 0 0 0 -10px;
}
.aboutme-image-container img:hover {
border-radius:10%;
border:2px solid #fff;
cursor:pointer;
margin: 0 0 0 -10px;
-moz-transform:scale(1.2) rotate(360deg);
-webkit-transform:scale(1.2) rotate(360deg);
-o-transform:scale(1.2) rotate(360deg);
-ms-transform:scale(1) rotate(-360deg);
transform:scale(1.2) rotate(360deg);
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
</style><div id='aboutme'>
<div class='aboutme-image-container'>
<img src="URL IMG" />
</div>
<div class='name-author'>
<h3>YOU NAME</h3></div>
<div class='aboutme-text'>ABOUT YOU
</div></div> </div>
Mmm.. kak, kalo modivikasi bilang ya :) hehehehe..
BalasHapusMakasih tutorialnya Kak Sa Hyun! :)
BalasHapusNeira: Hehe.. iya Neira :) Mf ya
BalasHapusNaila: Sama-sama Naila :D
Oia, nama kalian hampir sama Neira dan Naila :P
Nggak papa kak :D ohya, Kakak dulu owner blog yg "Hey! Daily My Daily" itu ya?
HapusIya.. Kenapa neira?
HapusAku suka lhoooo
HapusKak, ijin re-tutorial, ya ^^
BalasHapusberguna banget
BalasHapus