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 ...

Bài viết liên quan:

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(' http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds.png' ); 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/AVvXsEg4hDb6nhRlCeSMoLt-DNw8jU4DG4hUCMoalYfZTCZFmDljnVqFiRPv8P-jwLHhCV7GhyGbPTngA8IaEwDaIxoggTPPzwlW4cuN6rr1p4OzvdQMQUY6pIjVkPaBV8LJ7FTkGoIPpeYGSzQ/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/AVvXsEj9BYkTpFbKMw4kF7De0AfkrvUkO6_YIUPq6XWXhs9aYJLdJ6rdeBrMc2wbdl_eBtMXrVnecglEeBCv2bcYjZJeUzx_DRbCTQQlX9YGjJ5cqzXjgPT_9iEel2q9_WX1JrK8OfWsKCUKnRGe/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/AVvXsEjS-bCWMeYv2tnHxraSnp_WYgFxvR87B_Z9wIT8N5S3ed9-XmU2XMBJxhLhVXUt6cmfJWJ4PHth7nsigdPd9feQd21gcesjTAIALlXJLjv7peLpRCXqEGRhCws15unEVvsywPfB2IPZCirn/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/AVvXsEjSXVSqN6-smQR7ONCqlRlDwm6z8WI45S3xINIknVl7MBJAex_oSXUVfK-Seu58g3cQigc-T_SKmzDC9Dozgb6gZ3B8uusFhorKadGi2hFnlbtt7652ebNFp16_sZ16AUi-RdhyWqlDCHh3/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/AVvXsEjY80-JyjyPmM3wZzqhEODMbRB46sqcuTOUN4KJ5m3FTBocygpFxER7M8DMmKViv-92bRhc07oVBmPE5u6rlZg-UDRum1njDHPBkTyrnJ-wI_WnY63ek3ao3M5Xl3q1uwTM83YQ6_fkHwx4/s1600/Youtube+square.png' target='_blank' width='40px'/></a></div>
 </div>
 </b:if>

6- Save lại Templatebạn mới vừa bổ sung.
7- Cho Blogspot hoạt động thử để biết kết quả của hiệu ứng.

Xem bản Demo:

• DEMO

Chúc các bạn thành công với tài liệu chia sẽ mà mình đã Cóp được từ nguồn thebloggerguide.com

Khanhnguyen's Blog