Breaking News

Home / Công nghệ / Thêm author box vào trang Blog

Thêm author box vào trang Blog

June 03, 2016




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/AVvXsEiN_6sKvyPMm8GPR__a7mj01zLVg0j2629Fx1pZj2PjVRGfFrSBHHGeyrJZAvDa-Kxta0NTa1joN4-v6u8wVFzQrhyphenhyphenIf2jqJvJ8zCW0k9kgqrqsTaqNt06VOaAkVbxRPFi5tkNl-rMrUPQ/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/AVvXsEiSRe3klvSb9RSmrWHKYFt5BDe5VaiPouiecgD6YpaxmfOLeKhb5f98NOuZkq1eGBVwafFlf7m2kUA-AMBRo-6lO42vsx7gnyO1SPDOpHstGcL0_iKZn-psgTT4uMC_G2nxYd2DXJgp7JtT/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/AVvXsEi2ykVAYjmt5FAyBp1IGl7Zk3mL5WpwsIOUmvwz4Uh0BXPb4nFozpki9GQQtsZfsNMZLcCwRIWqsvMWBVYdI0kJLHvnUrJs-B9u6aB93FTxFVIeZaPaMhYcE2zYWCM88_sjWUcSGsrSpjGa/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/AVvXsEgtXn0saior1vToRATHwhAwprrw9g2cV-JU9iDGrvX79TbQa9__aHS1pv9wF_Ue8dQ5lyvHZ3SPp4RJCUUBNBH3T_9mkWTfMK2xzhHObN69qVXi3064-pT8gyphvUtN-Dud-DX_nJZBdBGe/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/AVvXsEj0sIHUH3N3UJfKezHCWsKlRMfMj9SLJZeghyphenhyphen70Hpc9RFI4P7RsYtOoX_5FnddmW9c27RjrX9hf9v1txj8RXcZbHWOa2fyGZ3pVlp6PTcpXDcHmtQND-AuwUdnPKqNchyRFDIbFUR_TBuqX/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:


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

Popular Posts