Chủ Nhật, ngày 15 tháng 5 năm 2016

Share CODE Tác Giả (Author Box) Đẹp Đơn Giản cho Blogspot Blogger

Xin chào các bạn thực ra code tác giả (author box) cho blogspot blogger đã được share khá nhiều và bây giờ http://codeseo.net cũng xin chia sẻ code tác giả mà codeseo.net đang sử dụng. CODE này chỉ là CSS đơn giản được tùy biến nhẹ nhất có thể cho các bạn. Ưu điểm chắc chắn là về tốc độ và độ mượt của trang blog. Vì thế nếu ai cảm thấy nó xấu không thẫm mỹ hoặc quá dễ thì cũng đừng ném đá


Share CODE Tác Giả (Author Box) Đẹp Đơn Giản cho Blogspot Blogger
DEMO bên trên. Rất đơn giản đúng không? Các bạn có thể tùy biến thêm sao cho phù hợp. Bên trái sẽ là avatar và link facebook để cho khách có thể dễ dàng liên hệ với bạn. Bên phải sẽ là tên của bạn + đôi lời tâm sự. Thực ra author box này giúp cho khách cảm thấy bạn gần gũi hơn mà thôi

Không dài dòng nữa đây là code


<!-- AUTHOR -->
        <style type='text/css'>
.authorName{font-size:18px;color:red}
.post-author {
    background: #f2f2f2;
    border-top: 4px solid #354554;
    padding: 10px 10px 5px 10px;
    margin: 10px 0;
}
.author-avatar {
    background: #f3f3f3;
    display: table-cell;
    vertical-align: top;
    width: 90px;
    margin-right: 10px;
}
.author-avatar img {
    width: 80px;
    border: 3px solid #fff;
    display: block;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    box-shadow: 0 1px 1px #aaa;
    -moz-box-shadow: 0 1px 1px #aaa;
    -webkit-box-shadow: 0 1px 1px #aaa;
}
.author-info1 {
    display: table-cell;
    vertical-align: top;
    padding-top: 5px;
    padding-left: 10px;
}
.contactfb{background:#3a5795;color:#fff;padding:2px;border-radius:5px;margin-left:10px}
a.contactfb{color:#fff}
.contactfb:hover{background:blue}
</style>
<div class='post-author'>
<div class='author-avatar'>
<img alt='Avatar' class='avatar ' height='80' src='http://i.imgur.com/ladZfas.jpg' width='80'/><br/>
<a href="http://fb.com/Pro.QB" class="contactfb" target="_blank">Liên Hệ FB</a>
</div>
<div class='author-info1'>
<img src="http://i.imgur.com/UjEM1XA.gif"/>  <span class='authorName'> <b>TÊN ADMIN CỦA BẠN</b></span> 
<br/><br/>
Đôi lời tâm sự của bạn tại đây
</div>
</div>

Nhớ thay những phần in đậm phía trên
http://i.imgur.com/ladZfas.jpg là link ảnh đại diện
http://fb.com/Pro.QB là link facebook của bạn
Thay luôn TÊN ADMIN và ĐÔI LỜI TÂM SỰ
Các bạn vào Mẫu - Chỉnh sửa HTML và đặt nơi nào bạn muốn. Nếu không biết vị trí cần đặt hãy comment mình sẽ giúp vì mỗi template có một cách bố trí khác nhau
Nguồn: codeseo.net