Banner 468x60

Box About Me Versi Cyber Creative

Box About Me Versi Cyber Creative






Malam Sobat Blogger Kali Ini Gw Bakal Post Cara Membuat Box About Me Versi Cyber Creative Soalnya Artikel Ini Banyak Yang Tanya Sama Saya
Ok Langsung Aja Ke TKP....


1.Login Blogger
2.Buka Template Stealah Itu Buka TemplateHTML
3.Cari Kode ]]></b:skin> Agar Lebih Mudah Tekan CTRL+F Lalu Paste Kode Di Bawah Ini

#aboutme {
background-color: none;
-moz-box-shadow:0 0 3px #990000;
-webkit-box-shadow:0 0 3px #990000;
box-shadow:0 0 3px #990000;
border:1px solid #990000;
padding:3px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
margin:0 auto;
margin-top:15px;
margin-left:-10px;
padding:10px;
width:240px;
height:auto;
}
.name-author {
margin:0 0 7px;
display:block;
width:100%;
}
.name-author h3 {
position:relative;
display:inline;
background-color:#990000;
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 #cc0000;
}
@-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:#990000;
}
.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 #990000;
-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #990000;
box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #990000;
background-color:#990000;
}
.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 #990000 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 #990000;
}
.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;
}




5.Setelah Kode Diatas Sudah  Di Paste Klik Simpan Template
6.Sesudah Menyimpan Template Klik Tata Letak Lalu Tambah Gadget Dan Pastekan Kode Di Bawah Ini



<div id='aboutme'>
<div class='aboutme-image-container'>
<img src="http://i.imgur.com/aQ3x5By.gif?attachauth=ANoY7cpn_lhUa9bWz491BOQCUPQLmm3us4EckEhP2If-wdZEoN-K4i45924I9_Q_ENPg36pcsPA3LJBiSxFkv2-mx6LViWZZe6pJbR61ZVY202xmlkpQtKwi5uybkuhaIc5bnbWTjY6bYabpwLZoJKbT4eAkIUSSBo6ksmbcgsA7CkwRtxJhWCqo-GapSJCOkvXLiiIg4Gbc0BGs35_P5CPiSxCVvUoMkQ%3D%3D&attredirects=0" />
</div>
<div class='name-author'>
<h3>Nama Kamu</h3></div>
<div class='aboutme-text'>Ganti Dengan Deskripsi Kamu  <a href="https://plus.google.com/u/0/106862757829000692682" style="color: #666;">Lihat Selengkapnya..</a>
</div></div>


7.Klik Simpan

Gimana Mudah Kan :D

Jangan Lupa Tinggalkan Komentar Kalian

22 komentar

Sama-Sama Bro , Thanks Udah Komment Yah ^_^

keren bener bro , gw coba dulu ah

wah mnatap tuh gan izin coba yah tutornya :D

Keren artikelnya om... Thank's

Silahkan , Sertakan Sumber Yah ^_^

keren box author nya nih sepp tanks yah udah di share :D

Terima Kasih Sudah Berkunjung Yah Bro ^_^

Lumayan keren nie.. ane ijin repost ya bro.. Makasih atas infonya