Cara Membuat Profil Blog Dengan CSS3

Cara Membuat Profil Blog Dengan CSS3

• Buka Blogger
• Tata Letak
• Tambahkan Gadget
• HTML / Javascript
• Pastekan Kode Dibawah Ini Tepat Dibawahnya

<style>

#aboutme {
background-color: none;
-moz-box-shadow:0 0 3px #0000ff;
-webkit-box-shadow:0 0 3px #0000ff;
box-shadow:0 0 3px #0000ff;
border:1px solid #0000ff;
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:#0000ff;
color:#ffffff;
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:#000000}
20% {color:#FFFFFF}
40% {color:#000000}
60% {color:#FFFFFF}
80% {color:#000000}
100% {color:#FFFFFF}
}
@-moz-keyframes name-author {
0% {color:#000000}
20% {color:#FFFFFF}
40% {color:#000000}
60% {color:#FFFFFF}
80% {color:#000000}
100% {color:#FFFFFF}
}
@-keyframes name-author {
0% {color:#000000}
20% {color:#FFFFFF}
40% {color:#000000}
60% {color:#FFFFFF}
80% {color:#000000}
100% {color:#FFFFFF}
}
/* 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;
color:#0000ff;
}
.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 #0000ff;
-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #0000ff;
box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #0000ff;
background-color:#0000ff;
}
.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 #0000ff 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 #0000ff;
}
.aboutme-image-container img {
width:100%;
height:100%;
border:2px solid black;
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 black;
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/AVvXsEhsNOuHi1nxv8IRl5MBul33CVKXNa6lAAhBMTH37CTqgobaZB4Bw253GAEvxCZyWpLuRb4x-o7v0xtE7-XEHVN3LrP2wgbbx7n86CX06Pt5ojpNh7nuKO95abCZOu_n_FcMLHl1Q81MnzI/s1600/Madara+Chibi.JPG?attachauth=ANoY7cpn_lhUa9bWz491BOQCUPQLmm3us4EckEhP2If-wdZEoN-K4i45924I9_Q_ENPg36pcsPA3LJBiSxFkv2-mx6LViWZZe6pJbR61ZVY202xmlkpQtKwi5uybkuhaIc5bnbWTjY6bYabpwLZoJKbT4eAkIUSSBo6ksmbcgsA7CkwRtxJhWCqo-GapSJCOkvXLiiIg4Gbc0BGs35_P5CPiSxCVvUoMkQ%3D%3D&attredirects=0" />
</div>
<div class='name-author'>
<h3>Bayu Andrian</h3></div>
<div class='aboutme-text'>Masukan Kata-kata anda disini<a href="https://plus.google.com/u/0/101420787591273417421" style="color: #666;">Lihat Selengkapnya..</a>
</div></div>

Keterangan Kode Berwarna Biru Ganti dengan Nama kamu dan Kata² kalian

• Simpan

Sumber