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 Admin4. Langkah Selanjutnya cari lagi Kode <data:post.body/> , Setelah ketemu, letakkan kode berikut tepat dibawahnya.
==============*/
#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;}
<b:if cond='data:blog.pageType == "item"'>-Bisa juga dibawah kode : <div class='post-footer-line post-footer-line-1'> atau diatas kode : <div class='post-footer'>
<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.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>
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,.. ^^
Post a Comment