Pasang Author Box Admin Keren diblog Bag.3

Pada kesempatan kali ini saya akn mencoba memberikan Tutorial 'Pasang Author Box Admin' Bag.3, karna pada postingan sy sebelumnya pernah juga membahas trik ini antara lain:
1.  Author Box Admin Plus Info. dan
2.  Author Box Admin with CSS.
Nah kli ini da masuk pd tutorial bag.3, sy sngja membrikan judul trakhir Bag.3 , biar entr teman2 yg lain gk pusing nyri2 Author Box Admin digoogle, kan utta da sharing,..heheee,.. tinggal pilih ajj mau pkai trik pd bagian brp... :D

Saya tidak akan panjang lebar tuk penjlasan tutorial ini, jika sobat tertrik mencobanya silahkan ikuti langkh2 brikut:

1. Login ke blogger

2. Tata Letak.

3. Edit HTML.

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

/*Author Admin
==============*/
#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;}
#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:Tahoma;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">      
<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.ngawicybers.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. 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,.. ^^