Author Box Simple Profile For Blogspot

Author: imron

Simple Author Box Biodata For Blogspot

Terkadang penulis blog membutuhkan suatu halaman khusus untuk memperkenalkan dan memberitahu kepada pembaca mengenai biografi pendeknya. Untuk itu sering kita temukan kata Abaut Me, Tentang Saya, Tentang pada suatu halaman. Style rotate image author box mungkin bisa digunakan untuk membuat biodata singkat penulis selain menggunakan profile bawaan google plus atau yang lain.

Lihat Demo

CSS

/* 
// Simple CSS - Responsive Auto Biografi For Blogspot
// Made with ❤ by @imronfhatoni
// http://imronfhatoni.blogspot.com 
*/
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
.vCard{
  margin:4% auto;
  padding:15px;
  width:80%;
  background-color:#f5f5f5;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
  border-radius:10px;
}
.vCard img{
  margin:10% 0% 0% 30%;
  height:auto;
  width:35%;
  border-radius:50%;
  border:double 10px #CCC;
  box-shadow: 0 7px 4px #555;
}
.vCard h1{
  font-family: 'Lobster', cursive;
  text-align:center;
  text-shadow: 0 1px 1px #444;
}
.vCard p{
  font-family: 'Indie Flower', cursive;
  text-align:center;
  text-shadow: 0 1px 1px #444;
}
.vCard ul{
  list-style:none;
}
.vCard ul > li{
  display:inline-block;
  padding:5px;
  margin-bottom:10px;
  font-family: 'Shadows Into Light', cursive; 
}
.vCard a:link, a:visited{
  text-decoration:none;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  padding:5px;
  border-radius:10px 0px 10px 0px;
  color:#000;
  font-weight:bolder;
}
.vCard a:hover{
  box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
  border-radius:0px 10px 0px 10px;
}
.vCard a[title]{
    position:relative;   
}
.vCard a[title]:before{
 content: "";
 position:absolute;
 bottom:10px;
 border-width: 14px 7px;
 border-style: solid;
 border-color:#3c404b  transparent transparent transparent;
 left:-9999px;
    opacity:0;
 transition:.75s opacity, .75s bottom;
  
}
.vCard a[title]:after{
    content:attr(title);
    color: #FFF;
    font:bold 16px arial, sans-serif;
    background:#3c404b;    
    padding:10px;    
    position:absolute;
    left:-9999px;
    opacity:0;
    bottom:38px;
    white-space:nowrap;
    border-radius:8px;  
   transition:.75s opacity, .75s bottom;
    font-family: 'Indie Flower', cursive;
}
.vCard a[title]:hover:before{
 left:35px;
    opacity:1;
    bottom: 30px; 
}
.vCard a[title]:hover:after{
    left:0px;
    opacity:1;
    bottom: 58px;
}
/* Animation Effect - effectRotateOut */
@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 1;
  }
}
@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 1;
  }
}
.vCard img:hover
{
animation:rotateOut 1s ;
-webkit-animation:rotateOut 1s ; /* Safari and Chrome */
}

HTML

<div class="vCard">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUY_tOmUovLMs1YVSE5h9RVkh4aCni81r3Gm-ZbsN4mGAuPxCoxzrcNYYPn5BrlWwL6Ky2V0vFmBQVpeIsOXPD3rI8tzttmFuBPIBCayEK0zMnZE0u2Qz2L-KaE7jJklsshacFTgh3_w0/s320/animeboy2.jpg" />
  <h1>Hi, Saya Admin Ganteng!</h1>
<p>Nama saya Imron Fhatoni, saya belum menikah, gimana mau nikah pacar aja ngak punya. yang ingin mengetahui tentang biografi saya silahkan klik tautan yang ada dibawah. sekian ya wassalam.  </p>
  <ul>
    <li><a href="#Twitter" title="Follow me on : Twitter">Twitter</a><li>
    <li><a href="#Facebook" title="Follow me on : Facebook">Facebook</a><li>
    <li><a href="#Google+" title="Follow me on : Google+">Google+</a><li>
    <li><a href="#Tumblr" title="Follow me on : CSSdeck">Tumblr</a><li>
    <li><a href="#Instagram" title="Follow me on : CodePen">Instagram</a><li>
  </ul> 
</div> 

Penerapannya sederhana, salin semua script diatas dan letakan dimanapun anda inginkan.
itu hanyalah versi sederhana, anda dapat mengembangkannya sesuai selera.