Widget Author Box With CSS Animation

Langsung Saja . Berikut caranya !

Langkah #1 - Silakan Copy kode CSS Dibawah ini , dan letakan ( Paste ) tepat di atas kode ]]></b:skin> atau kode </style>

/*
Widget Animation Getar With CSS
css design: authorbox-style="acill","acillramdanprasetyo"
sumber: mastamvan.blogspot.com / www.acillramdanprasetyo.id
*/
.getar{animation-duration:100ms;animation-iteration-count:infinite;animation-name:acill;animation-timing-function:ease-in-out}@keyframes acill{2%{transform:translate(0.5px,-1.5px) rotate(-0.5deg)}4%{transform:translate(0.5px,1.5px) rotate(1.5deg)}6%{transform:translate(1.5px,1.5px) rotate(1.5deg)}8%{transform:translate(2.5px,1.5px) rotate(0.5deg)}10%{transform:translate(0.5px,2.5px) rotate(0.5deg)}12%{transform:translate(1.5px,1.5px) rotate(0.5deg)}14%{transform:translate(0.5px,0.5px) rotate(0.5deg)}16%{transform:translate(-1.5px,-0.5px) rotate(1.5deg)}18%{transform:translate(0.5px,0.5px) rotate(1.5deg)}20%{transform:translate(2.5px,2.5px) rotate(1.5deg)}22%{transform:translate(0.5px,-1.5px) rotate(1.5deg)}24%{transform:translate(-1.5px,1.5px) rotate(-0.5deg)}26%{transform:translate(1.5px,0.5px) rotate(1.5deg)}28%{transform:translate(-0.5px,-0.5px) rotate(-0.5deg)}30%{transform:translate(1.5px,-0.5px) rotate(-0.5deg)}32%{transform:translate(2.5px,-1.5px) rotate(1.5deg)}34%{transform:translate(2.5px,2.5px) rotate(-0.5deg)}36%{transform:translate(0.5px,-1.5px) rotate(0.5deg)}38%{transform:translate(2.5px,-0.5px) rotate(-0.5deg)}40%{transform:translate(-0.5px,2.5px) rotate(0.5deg)}42%{transform:translate(-1.5px,2.5px) rotate(0.5deg)}44%{transform:translate(-1.5px,1.5px) rotate(0.5deg)}46%{transform:translate(1.5px,-0.5px) rotate(-0.5deg)}48%{transform:translate(2.5px,-0.5px) rotate(0.5deg)}50%{transform:translate(-1.5px,1.5px) rotate(0.5deg)}52%{transform:translate(-0.5px,1.5px) rotate(0.5deg)}54%{transform:translate(-1.5px,1.5px) rotate(0.5deg)}56%{transform:translate(0.5px,2.5px) rotate(1.5deg)}58%{transform:translate(2.5px,2.5px) rotate(0.5deg)}60%{transform:translate(2.5px,-1.5px) rotate(1.5deg)}62%{transform:translate(-1.5px,0.5px) rotate(1.5deg)}64%{transform:translate(-1.5px,1.5px) rotate(1.5deg)}66%{transform:translate(0.5px,2.5px) rotate(1.5deg)}68%{transform:translate(2.5px,-1.5px) rotate(1.5deg)}70%{transform:translate(2.5px,2.5px) rotate(0.5deg)}72%{transform:translate(-0.5px,-1.5px) rotate(1.5deg)}74%{transform:translate(-1.5px,2.5px) rotate(1.5deg)}76%{transform:translate(-1.5px,2.5px) rotate(1.5deg)}78%{transform:translate(-1.5px,2.5px) rotate(0.5deg)}80%{transform:translate(-1.5px,0.5px) rotate(-0.5deg)}82%{transform:translate(-1.5px,0.5px) rotate(-0.5deg)}84%{transform:translate(-0.5px,0.5px) rotate(1.5deg)}86%{transform:translate(2.5px,1.5px) rotate(0.5deg)}88%{transform:translate(-1.5px,0.5px) rotate(1.5deg)}90%{transform:translate(-1.5px,-0.5px) rotate(-0.5deg)}92%{transform:translate(-1.5px,-1.5px) rotate(1.5deg)}94%{transform:translate(0.5px,0.5px) rotate(-0.5deg)}96%{transform:translate(2.5px,-0.5px) rotate(-0.5deg)}98%{transform:translate(-1.5px,-1.5px) rotate(-0.5deg)}0%,100%{transform:translate(0,0) rotate(0)}}
/*
Widget author box with css only
css design: authorbox-style="acillramdanprasetyo","acillramdanprasetyo"
sumber: www.acillramdanprasetyo.id
author: Rhull
*/
.acillramdanprasetyo-authorbox {
position: relative;margin: 15px auto;
padding: 10px;width:auto;
border: 2px solid #07ACEC;
background: #e9fbe9;
height:auto;overflow:auto;}

.acillramdanprasetyo-avatar {
background: #FFFFFF;
float: left; height: 145px;
width: 135px;left: -5px;
padding: 5px 5px 5px 5px;
position: relative;}

.acillramdanprasetyo-avatar img {height: 135px; width: 125px; border: 2px solid #000;}
.acillramdanprasetyo-authorcontent {margin-left: 150px;}
.acillramdanprasetyo-titlebox {
box-shadow:7px 7px 7px rgb(174, 185, 195);
border-radius:17px 17px 17px 17px;
-webkit-border-radius:17px 17px 17px 17px;
background: #FFFFFF;width:auto;
left: -2px;margin-bottom: 7px;
padding: 5px 0px 5px 20px;position: relative;}

.acillramdanprasetyo-authorbox h3 {
font:bold 14px Verdana;
color: #000;
line-height: 20px; margin: 0;}
.acillramdanprasetyo-join {
background: #FFFFFF;
float: left; height: 21px;
width: 135px;left: -5px;
padding: 5px 5px 5px 5px;
position: relative;}

.acillramdanprasetyo-join img {height: 21px; width: 135px; border: 2px solid #000;}

.acillramdanprasetyo-info {font:12px Trebuchet MS; text-align:justify; color:#000;}
.acillramdanprasetyo-info a {color: #000; text-decoration: none;}
.acillramdanprasetyo-footerbox {padding:10px 0 0 0; font:12px Trebuchet MS;}
.acillramdanprasetyo-social {overflow: hidden;}

.acillramdanprasetyo-social a {
display: block;
color: #FFFFFF !important;
font-weight: 600;
font-family: "Tahoma",Verdana,Arial;
text-decoration: none;
transition: border-radius 0.50s;}

.acillramdanprasetyo-social a:hover {border-radius: 10px 0px;}
.acillramdanprasetyo-social div {float: left; margin-right: 6px; width: 79px;}
.acillramdanprasetyo-social .acillramdanprasetyofacebook a {padding: 7px 0px; text-align: center; background: #3B5999;}
.acillramdanprasetyo-social .acillramdanprasetyofacebook a:hover {background: #07ACEC;}
.acillramdanprasetyo-social .acillramdanprasetyotwitter a {padding: 7px 0px; text-align: center; background: #01BBF6;}
.acillramdanprasetyo-social .acillramdanprasetyotwitter a:hover {background: #07ACEC;}
.acillramdanprasetyo-social .acillramdanprasetyogoogleplus a {padding: 7px 0px; text-align: center; background: #D54135;}
.acillramdanprasetyo-social .acillramdanprasetyogoogleplus a:hover {background: #07ACEC;}

Langkah #2 - Carilah Kode <data:post.body/> , Kode tersebut terkadang tidak hanya ada 1 , ada yang 2-3 . Anda coba Satu persatu aja :D

Langkah #3 - Jika Anda sudah menemukan Kode <data:post.body/> Silakan anda Copy Kode dibawah ini , Lalu letakan ( Paste ) Tepat dibawah Kode <data:post.body/> .

Jika anda kreatif , Kode dibawah ini bisa di taruh dimana saja , semau anda :D

<b:if cond='data:blog.pageType == "item"'>
<div class='acillramdanprasetyo-authorbox'>
<div class='acillramdanprasetyo-avatar'><img alt='acillramdanprasetyo' class='getar' src='http://i.imgur.com/BooQ678.jpg' title=''/>
<div class='acillramdanprasetyo-join'><a href="//www.blogger.com/follow-blog.g?blogID=4879246360271319291" title="Follow this blog" target="_blank"><img class="getar-mas" title="Follow this blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgffn5kW-5veFH1PaWbrujYyQP0PkOdz0E1WSRowdjm37tgrewHffrUGUXgkEaqWSzBT70GDXH1E0H1TYbPIBnchAOj4lY0RWnSA7saEABeGQHinbuKA5lK-bNBuPUtkDuA0drKXfcxHKbM/s1600/Follow+my+blog.gif" alt="Follow blog" height="21" width="117" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgffn5kW-5veFH1PaWbrujYyQP0PkOdz0E1WSRowdjm37tgrewHffrUGUXgkEaqWSzBT70GDXH1E0H1TYbPIBnchAOj4lY0RWnSA7saEABeGQHinbuKA5lK-bNBuPUtkDuA0drKXfcxHKbM/s1600/Follow+my+blog.gif" /></a></div>
</div>
<div class='acillramdanprasetyo-authorcontent'>
<div class='acillramdanprasetyo-titlebox'>
<marquee behavior='alternate'><h3>Penulis: <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></h3></marquee>
</div>
<div class='acillramdanprasetyo-info'>
Anda Sedang Membaca <a expr:href='data:post.url'><span style='color:red;font-weight:bold;'><data:post.title/></span></a><br/>Boleh Di Copy Paste , Tapi Sertakan Sumber Link Dibawah Ya Mas :)
<textarea cols='41' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='5'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea>
</div>

<div class='acillramdanprasetyo-footerbox'>
<div class='acillramdanprasetyo-social'>
<div class='acillramdanprasetyofacebook'>
<a class='getar' href='https://www.facebook.com/AcillSK1' title='Join To Facebook'>Facebook</a>
</div>
<div class='acillramdanprasetyotwitter'>
<a class='getar' href='http://twitter.com/rhull27' title='Join To Twitter'>Twitter</a>
</div>
<div class='acillramdanprasetyogoogleplus'>
<a class='getar' href='https://plus.google.com/u/0/104021143245146032539' title='Join To Google+'>Google+</a>
</div>
</div>
</div>
</div>
</div>
</b:if>

CATATAN

Ganti : 4879246360271319291 ( Dengan ID Blog Anda )
Ganti : Yang Warna BIRU ( Dengan Link Medsos + Google + anda )
Ganti : Yang Warna KUNING ( Dengan Url Gambar/Foto Anda )

Widget Author Box With CSS Animation

Langsung Saja . Berikut caranya !

By Rhull - 16:56:00 - Add Comment

Share this