Cara Membuat Author Box V.1

Hai Sobat MRM kali ini saya akan share cara membuat Author box keren dengan CSS!!

oke langsung ajah yah...

1.Login ke blogger !
2.Masuk ke Tata Letak
3.Klik Tambah Widget
4.Pilih HTML/Javascript
5.Taruh Script di bawah ini di dalam nya :D
6.Simpan ...

<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:470px;  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}}

 /* 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:#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="http://carelfelix.files.wordpress.com/2013/09/546391_419200044774723_1844069418_n.jpg" /></div><div class='name-author'><h3>Carel Felix</h3></div><div class='aboutme-text'>Hidup itu seperti CSS, kita bisa merubahnya menjadi lebih berwarna dan memberikan background yang indah. Dan hidup itu seperti... sepertinya saya tidak tau lagi dh.. <a href="https://plus.google.com/u/0/118192939666797616845" style="color: #666;">...Read More</a></div></div>

 Keterangan :

Ganti Link yang berwarna Hijau dengan Link gambar kamu..
-Ganti Text yang berwarna BIRU dengan Text kamu sendiri..
-Ganti Link yang berwarna Orange Itu dengan Link G+ kalian ..

Oke Sekian dulu artikel kali ini semoga bermanfaat bagi kalian semua !!
SUMBER NYA DI SINI