Cara Memasang Widget Author Blog Keren Bergetar

Akhirnya kali ini saya akan mengshare 'Author Box Admin Ver GeTaR'
Mau tau Screen Shotnya ?

Ini DIA

Karena Saya Rasa lebih enak kalo pake efek getar, dari pada seperti di blog blog lain, memakai author blog, tapi gak ada efek getarnya, kan bosan !
Hahahaha

Nih lihat :

Mau Tau Caranya, SIMPLE kok

- Login ke blogger

- Tata Letak.

- Edit HTML.

- Carilah kode ]]></b:skin> ,lalu letakkan Kode CSS berikut tepat diatasnya.

/*Author Admin Getar

====================*/
#authorboxmbs {
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}
#authorboxmbs: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);}
#authorboxmbs 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;}
#authorboxmbs .author_small {font-style:italic;}
#authorboxmbs 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;}
#authorboxmbs 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);}
#authorboxmbs p {color:#F9EAD4;text-shadow:0px -1px 1px rgb(3,3,3);margin:0;font:normal 14px bedizen;padding:0 10px 10px;}
#authorboxmbs a {color:#089fc9;}

Kode Yang Di Beri Garis Tebal Bisa Diganti Dengan Background Sesukamu !

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

<b:if cond='data:blog.pageType == "item"'>
<div id="authorboxakaUTta" class="author_getar" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this);top.focus()" onclick="top.focus()">
<img alt='' src='https://lh6.googleusercontent.com/-pWBw9iUmbtg/AAAAAAAAAAI/AAAAAAAAACQ/nT1DJgMW7N4/s250-c-k/photo.jpg ' height='100' width='100'/> <h6><a href="http://www.mafiasitez.blogspot.com/' rel='author' title='Posts by Hazhama MafiaWare'>Posts by Mafia Hacker</a></h6>
<p>Hi aku Yandi, Itu Foto Profil editan ku waktu itu , terima kasih telah membaca Artikel Ini</p> <p>Follow Me On <a href='https://twitter.com/Yandim_MBS'>Twitter</a> Or <a href='https://www.facebook.com/yandidoetha'>Facebook</a> !!</p><a href='https://www.mafiasitez.blogspot.com'>Get This Widget !!</a></div></b:if>

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

atau diatas kode : <div class='post-footer'>

- Selanjutnya letakkan script berikut diatas kode </head>

- Tolong Di Preview Dulu, Takutnya Ada Kesalahan !

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

Semoga Tutorialnya Bermanfaat, Dan Jangan Lupa Komentarnya ! :D