Widget Profil di Blog Widget Profil di Blog ~ Fae Sa Hyun Blogging or Fashion

Widget Profil di Blog

Back Friends New News My Banner About Me

Rabu, 09 September 2015

Widget Profil di Blog


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>
#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>
Yang aku kasih warna kalian edit ya ^^ 

Yuk! Berikan komentar Kalian dan Follow Blog Sa Hyun ^^

8 komentar: