Blog Author Blog Author

Minggu, 7 Oktober 2012 jam 13:57 siang

Membuat widget Author Blog keren Membuat widget Author Blog keren

Diposkan oleh █▓▒╣╠•[̅P̲̅U̲̅N̲̅K̲̅]Creativity •╣╠ ▒▓█ di 22.57 ·

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