Jumat, 09 September 2016

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=&quot;acill&quot;,&quot;acillramdanprasetyo&quot;
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=&quot;acillramdanprasetyo&quot;,&quot;acillramdanprasetyo&quot;
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: &quot;Tahoma&quot;,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 == &quot;item&quot;'>
      <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="//4.bp.blogspot.com/-a409Bq2T2bE/UmvRU1JEMiI/AAAAAAAAaWA/IdJz0L5Yv2g/s1600/Follow+my+blog.gif" alt="Follow blog" height="21" width="117" data-src="//4.bp.blogspot.com/-a409Bq2T2bE/UmvRU1JEMiI/AAAAAAAAaWA/IdJz0L5Yv2g/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'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</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 MERAH ( Dengan Url Gambar/Foto Anda )

Related Posts

Widget Author Box With CSS Animation
4/ 5
Oleh