Beautiful Author Box

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.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:692px;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 chiều rộng cho phù hợp với blog của bạn.


Bước 2: Tìm đến <div class='post-footer-line post-footer-line-3'> và thêm sau nó đoạn mã (lưu ý vị trí này có thể tùy chỉnh cho hợp lý)

<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://lh4.googleusercontent.com/-b1d8xv7WnYg/UPT0D2ZggTI/AAAAAAAABSA/Uw9MGWlfxNU/s50/1406_MOR_symbol_rare.png' width='50'/></div>
<a href='http://www.blogger.com/profile/10018747006607564818' target='_blank'><b>DxH</b></a>: Một người ham mê tìm tòi, sở thích lớn nhất là đọc sách. Mong muốn chia sẻ niềm đam mê của mình đến mọi người.<br/>
<div class='author-inf'>
Liên hệ: <a href='http://dxhdesign.blogspot.com/' target='_blank'><b>DxH blog</b></a>
<div class='plus'><g:plusone/></div>
</div></div>
</div>
</div>
</b:if>

- Thay ảnh đại diện và chỉnh kích thước ảnh cho riêng bạn
- Thay 10018747006607564818 bằng ID của bạn sẽ có được khi bạn vào phần Hồ sơ cá nhân.