Author Box Style Social Icon đẹp cho Blogspot

Author Box là công cụ hữu ích giúp người truy cập hiểu rõ hơn về tác giả. Bạn là một Blogger và muốn chia sẻ một vài điều gì đó về mình? Thì tiện ích "Author Box Style Social Icon" mình giới thiệu sau đây sẽ giúp bạn thực hiện điều đó.

Các bước thực hiện

Bước 1: Thêm đoạn code sau vào trên thẻ đóng ]]></b:skin

/* About-author by dongvietblog.blogspot.com*/
.about-author{width:100%}
.dongviet-box{overflow:hidden;padding:0;background:#F5F5F5;color:#ccc;border:1px solid #e1e1e1}
.dongviet-box .authorinfo{color:black}
.dongviet-box .authorsocial{float:left}
.dongviet-box .authorsocial li{list-style:none;margin:0;position:relative}
.dongviet-box .authorsocial li a{width:32px;display:block;background:url("http://3.bp.blogspot.com/-oVAh7WFq-cQ/VGGQiI0US3I/AAAAAAAABa0/ws3z6HFHbE8/s1600/social-author.png");height:32px;margin:0}
.dongviet-box .authorinfo img{float:left;margin:4px 10px 4px 5px;border-radius:100%;width:17%;background:#fff;padding:5px}
.dongviet-box .authorinfo p{margin:0;font-size:14px;padding:0 5px;line-height:25px!important;font:15px Arial;text-align:left}
.authorinfo p a{text-decoration:nonecolor:#fff}
.dongviet-box h3{margin:0;display:inline-block;background:#333;color:#fff;font:Arial;padding:5px 10px}
h3.boxtitle{background:#F5F5F5;color:black;margin:0 auto;padding:2px 10px;font:Arial;border:1px solid #e1e1e1}
.dongviet-box .authorsocial li .fb{background-position:0 0}
.dongviet-box .authorsocial li .twitter{background-position:0 -32px}
.dongviet-box .authorsocial li .google{background-position:0 -64px}
.dongviet-box .authorsocial li .in{background-position:0 -96px}
.dongviet-box .authorsocial li .in:hover{background-position:-32px -96px}
.dongviet-box .authorsocial li .google:hover{background-position:-32px -64px}
.dongviet-box .authorsocial li .twitter:hover{background-position:-32px -32px}
.dongviet-box .authorsocial li .fb:hover{background-position:-32px 0}
.dongviet-box:hover img{background:#1BC3F8}
.dongviet-box .authorinfo img,.dongviet-box .authorsocial li a{-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s}

Bước 2: Thêm đoạn code sau vào vị trí mà bạn muốn đặt khung thông tin tác giả.

<div class='about-author'>
<h3 class='boxtitle'>Tiêu đề tiện ích</h3>
<div class='dongviet-box'>
<div class='authorsocial'>
<li><a class='fb' href='http://www.facebook.com/ID của bạn' rel='nofollow'></a></li>
<li><a class='twitter' href='http://twitter.com/ID của bạn' rel='nofollow'></a></li>
<li><a class='google' href='https://plus.google.com/ID của bạn?rel=author' rel='author'></a></li>
<li><a class='in' href='http://vn.linkedin.com/in/ID của bạn' rel='nofollow'></a></li>
</div>
<div class='authorinfo'>
<img src='Link hình ảnh Avatar tác giả'/>
<p>Nội dung viết về tác giả</p>
</div>
</div>
</div> 

 Bản quyền: thuthuatpro.info - Liên hệ để biết thêm thông tin chi tiết

Share this

Author : Unknown

Bài Viết Cùng Chủ Đề