Cara Mudah Membuat Author Box Keren Di Blog

Author box atau kotak admin biasanya digunakan untuk meletakkan informasi singkat tentang admin suatu blog dan dilengkapi dengan gambar, nah kali ini saya akan membahas cara untuk membuat author box seperti disamping ini, tenang cara pembuatannya tidak susah-susah kok dan tidak perlu otak-atik edit html blog, mungkin sudah banyak di google cara membuat author box di blog tapi kali ini saya ingin membagikannya lagi melalui blog saya, ya itung-itung nambah artikel di blog ini :D, berikut cara pembuatannya :

1. Masuk ke blogger
2. Lalu ke Tata Letak > Tambah Gadget
3. Setelah mengklik Tambah Gadget pilih HTML/Javascript
4. Masukkan kode Author Box dibawah ini tepat didalamnya

<style>
#aboutme {
background-color: transparent;
-moz-box-shadow:0 0 3px #7a0a0a;
-webkit-box-shadow:0 0 3px #7a0a0a0;
box-shadow:0 0 3px #7a0a0a;
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:#7a0a0a;
color:#FFF;
font-family:Shojumaru;
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 #7a0a0a;
}
@-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}
}
/* Element yang di Beri Effek*/
.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:#7a0a0a;
}
.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 #000;
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 #000;
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://lh4.googleusercontent.com/-qosxp_0R_jI/AAAAAAAAAAI/AAAAAAAABWQ/P8eOl9bOWtw/s120-c/photo.jpg" />
</div>
<div class='name-author'>
<h3>M. Safryannoor F</h3></div>
<div class='aboutme-text'>Nama Saya Safryannoor. Saya Baru Didunia Blogger, Saya Ingin Menjadi Creative Bukan Plagiat.<a href="https://plus.google.com/+YanzSeo" style="color: #7a0a0a;">...Lihat profil lengkapku</a>
</div></div>
</div>

Keterangan :
- Warna merah = Link gambar, silahkan ganti dengan url atau link gambar anda
- Warna biru = Text author box, silahkan ganti sesuai keinginan anda
- Warna hijau = Link profil lengkapku, silahkan ganti dengan link profil lengkap anda

5. Klik Simpan dan lihat perubahannya di blog anda

Demikian artikel kali ini mengenai cara membuat author box, Semoga Bermanfaat.