HẢI PHÒNG clan

[HAIPHONG TP TOI YEU]

 

(¯`·.º-:¦:-† namkna †-:¦:-º.·´¯)

(¯`·.º-:¦:-† namkna †-:¦:-º.·´¯)

Author box đẹp chèn bên dưới bài đăng

Posted: 19 Jul 2014 08:08 AM PDT

authorĐôi khi bạn muốn chia sẻ tới các độc giả một vài điều về bản thân hay một vài mô tả về blog của mình. Hôm nay mình sẽ hướng dẫn các bạn tạo một khung thông tin tác giả đẹp mắt chèn bên dưới bài đăng trong Blogger. Sau đây là các bước thực hiện:







Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>: 
/* Author box by tqd.96.lt */
#post-footer-author {
width: 90%;
height: 67px; 
background: #e6e6e6; 
border:3px solid #b3b3b3;
margin: 8px 0px 8px 0px; 
font-family: Arial,Verdana; 
}
#author-img { /*  Tùy chỉnh avatar */
width: 54px; 
height: 54px; 
background: #fff; 
float: left;
margin: 7px; 
}
#author-box {
padding-right: 5px;
margin: 0px;
}
#author-box p{ / * Tùy chỉnh phần mô tả * /
font-size: 12px; 
padding: 10px; 
margin: 0;
text-align: justify;
text-transform: normal;
color: #666666;
}
#author-box a{ / * Tùy chỉnh link * /
color: #000fcc; 
text-decoration:none;
}
#autor-box a:hover { 
color:#7780ee; 
text-decoration:underline; 
}

Bước 2: Tìm đến dòng <data:post.body/> và chèn vào ngay sau nó đoạn code bên dưới (nếu template của bạn có nhiều hơn 1 dòng trên thì cứ chèn vào từng dòng rồi xem kết quả): 
<!--Author box by tqd.96.lt-->
<div id='post-footer-author'>
<div id='author-img'>
<img src='URL avatar của bạn' style='width: 50px;height: 50px; border: 2px solid #b3b3b3; padding: 0; margin: 0;'/>
</div>
<div id='author-box'>
<p>
Nội dung phần mô tả
</p>
</div>
<!--/Author box by tqd.96.lt-->
</div>

Chúc các bạn thành công !

Xem thêm thủ thuật: tqd.96.lt
Bài viết bạn đang xem được viết bởi http://namkna.blogspot.com/

Bài viết liên quan

Related Posts Plugin for WordPress, Blogger...