Khung Author box đẹp từ CSS3 cho blogger

Khung thông tin tác giả (Author box)được sử dụng phổ biến hiện nay ở tất cả các blog, web site hay diễn đàn. Nếu để ý kỹ bạn cũng có thể thấy namkna cũng có một khung Author box từ CSS.

» Cách tạo Author box CSS cho blog của bạn?

1- Đăng nhập vào blogger
2- Chọn Mẫu (Template)
3- Chọn Chỉnh sửa HTML
4- Dán code bên dưới trước thẻ ]]></b:skin> :

.author{position:relative;padding:20px 0;border-top:1px solid #fff;border-bottom:1px solid #bbb}
.exlefttop{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-right:9px solid #42718b;font-size:0;line-height:0;position:absolute;top:11px;left:-10px;z-index:4}
.exleftbottom{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-right:9px solid #42718b;font-size:0;line-height:0;position:absolute;top:113px;left:-10px;z-index:4}
.exrighttop{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-left:9px solid #064888;font-size:0;line-height:0;position:absolute;top:11px;right:-10px;z-index:4}
.exrightbottom{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-left:9px solid #064888;font-size:0;line-height:0;position:absolute;top:113px;right:-10px;z-index:4}
#dxh-reb{width:520px;height:100px;margin:0;padding:0;background:#5390ad;border-top:1px solid #42718b;border-bottom:1px solid #42718b;position:relative;top:0;left:-10px;z-index:5}
.author-box{padding:22px 20px;line-height:18px;font-family:Arial;font-size:15px;color:#fff}
.author-box a{color:#fff600}
.author-box a:hover{color:#590000}
.author-avatar{height:50px;width:50px;float:left;margin:4px 10px 15px 0}
.author-inf{padding:5px}
.author-inf a{padding:2px 5px;display:inline;border-radius:3px;margin:5px;color:#fff600}
.author-inf a:hover{background:#00a6dd;color:#fff;box-shadow:0 1px rgba(255,255,255,.2) inset}
.plus{float:right;padding-right:20px;margin-top:-5px}

Thay đổi width:520px cho phù hợp với độ rộng blog của bạn.
5- Tìm dòng:

<div class='post-footer-line post-footer-line-3'>

- Thêm vào sau nó đoạn code bên dưới: 

<b:if cond='data:blog.pageType == "item"'>
<div style='clear: both;'/>
<div class='author'>
<div class='exlefttop'/><div class='exleftbottom'/><div class='exrighttop'/><div class='exrightbottom'/>
<div id='dxh-reb'>
<div class='author-box'>
<div class='author-avatar'><img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3mbdxYnWVx7bwUBYxT24_J8e3i17E-2BspsQKySwrO633UK8PG4UnfpMI9cGL2TSS1nWEF9C-krVsJIDe52Hov75BWzmBQzcp9c_wFsfagfJaxtjmWHfTxr6kycNeBTBWnCDyW9oFqrI/s45/avanta-namkna-blogspot-com.JPG' width='50'/></div>
<a href='http://www.blogger.com/profile/01703481174977803825' target='_blank'><b>Namkna</b></a>: Một blogger nghiệp dư, chuyên chia sẻ những thủ thuật blog và các phim hay chho mọi người.<br/>
<div class='author-inf'>
Kết nối: <a href='https://www.facebook.com/namkna.blogspot' target='_blank'><b>Facebook</b></a>, <a href='http://twitter.com/namkna' target='_blank'><b>Twitter</b></a><div class='plus'><g:plusone/></div>
</div></div>
</div>
</div>
</b:if>

Thay các phần in đạm theo ý bạn nha. nguồn: namkna.blogspot.com

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →