How to Make a Box Author

Want to every post you show your photo (photo author). Now I will share how to make your blog title box. What's the author's box? hmmm ... Quote of the length x width jelasinnya Below is an example author box or see Here

Interested? If so please continue to read it but if not interested please read my other articles.


Make the following steps:
1. Login first to Blogger
2. Then click the Layout »Edit HTML
3. Do not forget to Check the Expand Widget Templates
4. Then find this code]> </ b: skin> Press Ctrl + F (mozzilla) to facilitate the search.
Then put the following code above.

/* Author Box */<br /> #author-box{float:left;padding:10px;width:560px;background:#fff;margin:0 0 0 -30px;position:relative;text-shadow: 1px 2px 1px red; color:#000;border: 3px solid #000;-moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F;-o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out)}<br /> <br /> #author-box:hover{opacity:0.7; width:auto;background:red;color:#000;text-shadow: 1px 2px 1px white;border-radius:10px; border: 3px solid #ccc;-moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000;}<br /> <br /> #author-box a{font-size:15px; text-shadow: 1px 2px 1px #000; color:#fff} <br /> #author-box a:hover {font-size:18px;color:hijau} <br /> #author-box h4 {font-size:18px; text-shadow: 1px 2px 1px #000; color:orange} <br /> <br /> .author-corner{background:url(URL) no-repeat left top #33F; bottom:-13px;height:12px;left:2px;position:absolute;width:120px;}<br /> .author-avatar{float:left;margin:0 20px 0 0}<br /> .author-avatar img {width:110px;height:120px; border: 2px solid #ccc}<br /> .author-text{float:left;width:480px}<br /> .author-text p{line-height:2em}
5. Lau cari code <div class='post-footer-line post-footer-line-1'>. jika sudah ketemu, lalu copas kode berikut tepat dibawahnya.










<!-- Author Box Code Start--><br /> <b:if cond='data:blog.pageType == "item"'><br /> <div id='author-box'><div class='author-avatar'><img alt='NAMA SOBAT' src='URL FOTO SOBAT'/></div><h4>Post Author : <a href='URL BLOG SOBAT' title='Posts by admin'>NAMA SOBAT</a></h4>TEXT TENTANG DIRI SOBAT <a href='http://feedburner.google.com/fb/a/mailverify?uri=NAMA BLOG' target='_blank'><strong><blink>Via Email</blink></strong></a> atau <a href='http://feeds.feedburner.com/NAMA BLOG' target='_blank'><strong><blink>Feed Rss</blink></strong><center><a href='http://feeds.feedburner.com/BLOG SOBAT'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/BLOG SOBAT?bg=660033&fg=FFFFFF&anim=1&label=listeners' style='border:0' width='88'/></a></center></a></div></b:if><br /> <!-- Author Box Code End-->


6. Terakhir Save.dan lihat hasilnya...


Selamat mencoba