Thêm author box vào trang Blog

Các bước thực hiện như sau:
1- Mỡ Blogger, vào template, tạo một Widget Edit HTML
2- Nhấn Ctrl+F tìm thẻ ]]></b:skin>

3- Chép Source Code dưới đây dán vào dưới mã Code tìm được:

.wc-aboutauthor { float:left; width:100%px; padding:15px; border:1px solid #ccc; margin-bottom:15px; margin-top:15px; background:url(&#39; http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds.png&#39; ); color:#444444; }
.wc-aboutauthor h5 { color:#6E6F69; font-family:Arial; font-weight:bold; text-shadow:#64665b 0 1px 1px; font-size:18px; margin-bottom:-4px; margin-top:-6px; }
.wc-aboutpic { float:right; margin:0 0 0 10px; }
.wc-aboutpic img { border:1px solid #999999; -webkit-transition:-webkit-transform .15s linear; -moz-transition:-moz-transform .15s linear; -o-transition:-o-transform .15s linear; transition: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); box-shadow:0 3px 6px rgba(0,0,0,.25); padding:5px 5px 5px 5px; -webkit-transform:rotate(+5deg); -moz-transform:rotate(+5deg); -ms-transform:rotate(+5deg); -o-transform:rotate(+5deg); transform:rotate(+5deg); float:left; }
.wc-aboutpic img:hover { background:#FFFFFF; -webkit-box-shadow:0 0 10px  rgba(0,0,0,.3); -moz-box-shadow:0 0 10px  rgba(0,0,0,.3); box-shadow:0 0 10px  rgba(0,0,0,.3); -webkit-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -ms-transform:rotate(-1deg); -o-transform:rotate(-1deg); transform:rotate(-1deg); }
.wc-aboutsoc img { height:35px; margin-bottom:-13px; }
.wc-aboutsoc  p { font:16px georgia; color:#ffffff; background:#ea5a50; display:inline; border-radius:5px; padding:5px; margin-right:30px; }

4- Nhấn Ctrl+F tìm thẻ <data:post.body/>

5- Chép Source Code dưới đây dán vào dưới mã Code tìm được:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='wc-aboutauthor'>
 <div class='wc-aboutpic'>
 <img alt='Author image' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRQVd74HBW_bdqPokQpPwCymM_Bw-XYlG09hYD0qWar8bk1qlDp-fXHQjFU-d9L8m2NzI2jmZQRlUgjJmULqLQ2I893b8JihB1fBkd4ITaR33QiZgKMulrngOCcKbjVlNI3kRP6ys-io0/s1600/Co-Author.jpg' width='100'/>
 </div>
 <h5>About Me :</h5>
 <div style='text-align: justify;'>
 <b>YOUR BIO HERE</b></div>
 <div class='wc-aboutsoc'>
 <p> Find us on Socail Media
 </p>    <a href='https://facebook.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg7xUe9Qvqf6cSKELYvukdZVS_WBYIPH8EX3L416YTUpJvaj_U1lxblRocO4syiedZ66SAubnLkexeVniANzuLuVDSy-w_pFy_q00L5gPdHMsiSPqVR8_AQ9AnqEivLWzmicX1yfWWd6aL/s1600/Facebook+Square.png' target='_blank' width='40px'/></a>
 <a href='https://twitter.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Wt8y8S_v0XjWeI70Npc2s5l3KAP81PAGV-skNXQg9PPToLfoig38VdfZ_4SgabPEfI9vCZpwfkwD3GzmXQuZ98z-ka41KbVjTDua13suSRbFvZBnSG75JFfq4chJ9hjIj_nbci4AHt00/s1600/Twitter+square.png' target='_blank' width='40px'/></a>
 <a href='https://plus.google.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho3jXeBUVI9f1f9zhuh_iwmG-hHEz83VEvOW1QilPKms5mrj1BiikPgXu82EvpaYtJF6oR0TuC2bznnspG8lZg40il8CA8G9qvzFgTIWZLWcCJnA5SdUjjBOAPPm2lS3LoDmDUUt1XHJdq/s1600/Google+plus+square.png' target='_blank' width='40px'/></a>
 <a href='http://youtube.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbMuQ3OMfB7oBvTBfIKgeLy79v7FACrWwlTeMhbtaa5VFYh91ltNKa-pwR8B4uT9MUXguXdqV0i_p1F79aQWfF3jaJW2XpHQFc1ywr1M3Jhv7oIgi5B1VhZySeGk1mCtGDpJ856zgKf3PT/s1600/Youtube+square.png' target='_blank' width='40px'/></a></div>
 </div>
 </b:if>