Membuat Widget Author Blog Keren Bergetar Membuat Widget Author Blog Keren Bergetar

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 == &quot;item&quot;'>
<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>

<script src="http://mafiaproject.googlecode.com/files/Mbs_Getar.js" type="text/javascript"></script>

- 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