Khung thông tin tác giả đẹp

Bạn cần giúp đỡ?

Khung thông tin tác giả - Author box là một phần không thể thiếu giúp đọc giả hiểu hơn về người viết bài, và đi liền với nhu cầu đó là việc làm đẹp khung thông tin tác giả này. Trên mạng đã có rất nhiều hướng dẫn cho thủ thuật này nhưng hôm nay mình sẽ đem đến cho bạn một style mới hoàn toàn phá cách và tất nhiên rất đẹp.

Demo

Bạn có thể thấy style này giống với việc ta sử dụng ribbon bằng hình ảnh nhưng với thủ thuật này ta thuần chỉ sử dụng đến CSS - tối ưu cho tốc độ load blog của bạn.

Nào chúng ta cùng bắt đầu thủ thuật.

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://dxhbook.blogspot.com/p/contact_19.html' target='_blank'><b>DxH blog</b></a>
<div class='plus'><g:plusone/></div>
</div></div>
</div>
</div>
</b:if>

Lưu ý:
- Chỉnh lại ảnh đại diện và kích cỡ 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.

Ok thủ thuật đã hoàn thành. Rất đơn giản để có một khung tác giả đẹp cho mình phải không nào. Nếu gặp vướng mắc trong khi thực hiện thủ thuật, bạn hãy để lại nhận xét cuối bài này nhé.

Note: Chú ý nhỏ

Sau khi thực hiện xong thủ thuật mà khung tác giả của bạn không tràn ra được ngoài khung bao của bài đăng (bị khuất mất) hãy tìm đến #outer-wrapper , #main-wrapper , .post , ... Hoặc tương tự những thành phần bao ngoài phần bài đăng của bạn và xóa đi thuộc tính overflow:hidden