Pasang Author Box Admin (Ver.Getar) ala akaUTta'

Akhirnya kali ini saya akan menshare 'Author Box Admin Ver Getar' ini, dan sebenarnya trik ver getar ini lbh awal saya buat dr pada postingan saya yg sebelumnya 'Author Box Admin Keren diblog Bag.3' :D.
karena saya rasa, lebih baik saya membuat efek getar dan non getar, tp tampilan tetap sma, dgn bgt kan tmn2 akautta bs memilih mau ver. mana..hehee,..
Saya tidak akan panjang lebar tuk penjlasan tutorial ini, jika sobat tertrik mencobanya silahkan ikuti langkh2 brikut:

/*Author Admin Getar
====================*/
#authorboxakaUTta {
background:#333 url(http://2.bp.blogspot.com/-L5Tvv0yJrr4/TvsFt-Mh82I/AAAAAAAACC0/9eva5jXci8U/s1600/about_author.jpg) no-repeat scroll left top;
width:auto;overflow:hidden;color:#fff;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;
margin:5px auto;padding:40px 10px 10px 20px;}
.author_getar{position:relative}
#authorboxakaUTta:hover {-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);box-shadow:0px 0px 20px  rgba(0, 0, 0, .3);}
#authorboxakaUTta h6 {font-size:17px;clear:none;text-shadow:0px 0px 0 rgb(10,11,12), -1px -1px 0 rgb(4,5,6),-2px -2px 1px rgba(0,0,0,0.25),-2px -2px 1px rgba(0,0,0,0.5),0px 0px 1px rgba(0,0,0,.2);
margin:0;font-family:Arial;padding:10px 10px 5px;}
#authorboxakaUTta .author_small {font-style:italic;}
#authorboxakaUTta img {-webkit-transition:-webkit-transform .15s linear;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);padding:5px 5px 5px 5px;-webkit-transform:rotate(+2deg);-moz-transform: rotate(+2deg);float:left;border:4px solid #04a5d1;margin:10px;padding:0;}
#authorboxakaUTta img:hover {-webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);-moz-box-shadow:0 3px 6px rgba(0,0,0,.5);-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);}
#authorboxakaUTta p {color:#F9EAD4;text-shadow:0px -1px 1px rgb(3,3,3);margin:0;font:normal 14px bedizen;padding:0 10px 10px;}
#authorboxakaUTta a {color:#089fc9;}

4. Langkah Selanjutnya cari lagi Kode <data:post.body/> , Setelah ketemu, letakkan kode berikut tepat dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="authorboxakaUTta" class="author_getar" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this);top.focus()" onclick="top.focus()">
<img alt='' src='http://1.bp.blogspot.com/-lu9dL_yq7hk/TvsFsoW5UAI/AAAAAAAACCs/e4r09grJSdM/s1600/Untitled-1+copy.jpg' height='100' width='100'/>
<h6><a href="http://www.ut2a-4down.blogspot.com/" title="Posts by Admin" rel="author">Posts by akaUTta'</a></h6>
 <p>Hi`i'm aka UTta ,from Makassar,i love to blogging, Desing Blogger template, Web Developing and Designing.i like to learn and share technical hacking/security tips
with you,i love my friends.</p> <p>Follow Me On <a href="https://twitter.com/uttakracker15">Twitter</a> Or <a href="https://www.facebook.com/uttamelanikz">Facebook</a> !!</p></div>
</b:if>

-Bisa juga dibawah kode : <div class='post-footer-line post-footer-line-1'> atau diatas kode : <div class='post-footer'>

5. Selanjutnya letakkan script berikut diatas kode </head>

<script src="http://ut2a-4down-blogspot-com.googlecode.com/files/akaUTta_Getar.js" type="text/javascript"></script>

6. Priview dulu, jika tidak terjadi masalah pada templatenya, maka baru Klik SIMPAN TEMPLATE.

NB :>> Diatas terdapat tulisan yang saya beri warna, sobat tinggal merubahnya saja sesuai keinginan masing-masing.

Semoga tutorial ini berguna bagi anda, jangan lupa komentarnya yach.hehee,.. ^^ Please rate this article: