Widget Menu Profil Keren untuk Blog

Posted by Fauzi Alamsyah

Friday, February 14, 2014

DEMO

Assalamualaikum Wrwb, Selamat sore sob. Pada kesempatan kali ini saya akan menulis artikel yang berjudul Widget Profil Keren untuk Blog.  Silahkan sobat apabila tertarik untuk mencobanya, Apabila ada sebuah pertanyaan tanyakan saja kepada saya :) Terimakasih, mari kita simak dengan baik-baik yang dibawah ini :

1. Login ke blog pilih Tata Letak

2. Pilih Tambahkan Gadget

3. Pilih HTML/JavaScript.

4. Copy kode dibawah ini, lalu Paste di HTML/JavaScript

<style>
#aboutme {
  background-color:#fff;
  -moz-box-shadow:0 0 3px #e0e0e0;
  -webkit-box-shadow:0 0 3px #e0e0e0;
  box-shadow:0 0 3px #e0e0e0;
  border:1px solid #666;
  padding:3px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  margin:0 auto;
  margin-top:15px;
  padding:10px;
  width:270px;
  height:auto;
}
.name-author {
  margin:0 0 7px;
  display:block;
  width:100%;
}
.name-author h3 {
  position:relative;
  display:inline;
  background-color:#0097BD;
  color:#FFF;
  font-family:Segoe UI;
  font-size:15px;
  font-weight:bold;
  margin:0 0 0 -3px;
  padding:3px 5px 3px 10px;
  width:100%;
  -moz-text-shadow:0 1px 0 black;
  -webkit-text-shadow:0 1px 0 black;
  text-shadow:0 1px 0 black;
}
.name-author h3:after {
  content:" ";
  width:0;
  height:0;
  position:absolute;
  left:100%;
  top:0;
  border-width:13px;
  border-style:solid;
  border-color:transparent transparent transparent #0097BD;
}
@-webkit-keyframes name-author {
  0% {color:white}
  20% {color:Orange}
  40% {color:pink}
  60% {color:Orchid}
  80% {color:gold}
  100% {color:white}
}
@-moz-keyframes name-author {
  0% {color:white}
  20% {color:Orange}
  40% {color:pink}
  60% {color:Orchid}
  80% {color:gold}
  100% {color:white}
}
@-keyframes name-author {
  0% {color:white}
 20% {color:Orange}
 40% {color:pink}
 60% {color:Orchid}
 80% {color:gold}
 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:-20px 0 5px 0;
  padding:9px;
  position:relative;
  -webkit-border-bottom-right-radius:10px;
  -webkit-border-bottom-left-radius:100%;
  -moz-border-radius-bottomright:100%;
  -moz-border-radius-bottomleft:100%;
  border-bottom-right-radius:100%;
  border-bottom-left-radius:100%;
  -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  background-color:#59B52E;
}
.aboutme-image-container:before {
  content:' ';
  position:absolute;
  top:0;
  left:-10px;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 0 10px 10px;
  border-color:transparent transparent #333 transparent;
}
.aboutme-image-container:after {
  content:' ';
  position:absolute;
  top:0;
  right:-10px;
  width:0;
  height:0;
  border-style:solid;
  border-width:10px 0 0 10px;
  border-color:transparent transparent transparent #333;
}
.aboutme-image-container img {
  width:100%;
  height:100%;
  border:2px solid yellow;
  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;
}
.aboutme-image-container img:hover {
  border:2px solid GOld;
  cursor:pointer;
  margin-left:0;
  -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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzNLxlr0eobIKAdICavqnvXA91Wq36H3whl29hh6nlRI-lPTsOCCAiYUPsq1K0b9xt2XYHUsUNkTPVujJWf4Rbg7gPZNS_Yo-LsPuThyphenhyphenpxHmEFjnR36m89lJMaVGDVRJ1j-Er6BogrxOc/w573-h574-no/C360_2013-12-19-17-46-12-367.jpg" />
</div>
<div class='name-author'>
<h3>Fauzi Alamsyah</h3></div>
<div class='aboutme-text'>Untuk mengejar cita-cita dibutuhkan keberanian. Tanpa keberanian kesuksesan takkan terwujud<a href="https://www.blogger.com/profile/06907963166790405766" style="color: #666;">...Read More</a>
</div></div>

Keterangan :
 Untuk kode yang berwarna Biru : ganti dengan gambar profile sobat yang di inginkan
 Untuk kode yang berwarna Merah : ganti dengan nama profile sobat yang di inginkan
 Untuk kode yang berwarna Kuning : ganti dengan kata-kata sobat yang di inginkan
 Untuk kode yang berwarna Hijau : ganti dengan URL Blogger sobat yang di inginkan

5. Lalu SIMPAN & liat hasilnya sob :)

Itulah artikel tentang Widget Profil Keren untuk Blog, semoga bermanfaat ya sob :)

Share This :