Khung Author box đẹp từ CSS3 cho blogger [ves1]

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. Đây là phần giới thiệu vắn tắt về tác giả hoặc cũng có thể để chưa một số liên kết tắt tới các mạng xã hội. Thông qua khung này các độc giả có thể hiểu sơ qua về tác giả của bài viết hoặc blog.
Hiện nay có rất nhiều các tùy biến khung Author box. Cách hôm nay namkna giới thiệu hoàn toàn sử dụng CSS sseer tạo các hiệu ứng bo góc riboxom nhắm tối ưu tốc độ tải trang. Đây có thể sẽ là lựa chọn tuyệt vời cho các bạn không thích sử dụng hình ảnh trong template. Nếu để ý kỹ bạn cũng có thể thấy namkna cũng có một khung Author box từ CSS.

Ảnh minh họa:

Xem demo trên blog: VIEW DEMO

» Những tính năng của thủ thuật.

- Giao diện sử dụng thuộc tính riboxom css với kiểu dáng đẹp.

- Có link tới các trang mạng xã hôi.

- Tự động cập nhật avantar tác giả viết bài và tên tác giả viết bài.

» 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 (Edit HTML) => Chọn Mở rộng tiện ích mẫu:
4- Dán đoạn code bên dưới vào trước thẻ đóng </head>

<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s72$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>

- Đây là đoạn mã dùng để cài đặt chất lượng ảnh thumbail thu nhỏ của tác giả viết bài. Muốn điều chỉnh chất lượng ảnh bạn chỉ cần thay đổi đoạn mã s72 trong đoạn mã trên.

5- 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}
#namkna-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}
.avatar-author{float:left;margin-right:10px;border:0;border-radius:50%;padding:0;width:50px;height:50px}

Trong đó:

• Thay đổi width:520px cho phù hợp với độ rộng blog của bạn.
• background:#5390ad; là màu nền của khung chính namkna-reb.
• #42718b Là màu nền của tam giác riboxom bên trái. 
• #064888 Là màu nền của tam giác riboxom bên phải.
  
  
• Nếu không biết về các mã màu hãy sử dụng công cụ lấy mã màu của namkna: Color conveter beautiful. 
• border-radius:50% là bo tròn avantar của tác giả viết bài nếu không muốn bo góc thì bạn có thể xóa bỏ đoạn này đi.
• width:50px;height:50px lần lượt là chiều rộng và chiều cao của ảnh avantar.

6- Tìm một trong các đoạn code bên dưới:

Đoạn 1:

<div class='post-footer'>

Đoạn 2:

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

Đoạn 3:

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

Đoạn 4:

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

- Thêm vào ngay sau mootrj trong các đoạn code trê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='namkna-reb'>
<div class='author-box'>
<div class='author-avatar'><script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/></div>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn author'>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn author'><span itemprop='name'><data:post.author/></span></span>
                  </b:if>
                </b:if>
: Một blogger nghiệp dư, chuyên chia sẻ những thủ thuật blog và các phim hay cho 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>

Tùy chỉnh:

• Thay https://www.facebook.com/namkna.blogspot thành URL tới trang facebook cá nhân hoặc fanpage của bạn.
• Thay http://twitter.com/namkna thành URL trang twiter của bạn.
• Thay phần màu hồng là phần mô tả vắn tắt về bạn.

» Cập nhật!

Với một số blog khung tác giả không hiển thị phần riboxom bên ngoài khung bài đăng (bị ẩn) . Khi đó bạn hãy tìm đến các đoạn id hoặc class có dạng

#outer-wrapper{...}
#main-wrapper {...}
.post{...}
.... 

Hoặc những id hay class chứa phần bài đăng của bạn và xóa đi thuộc tính overflow:hidden

» Tùy chỉnh nang cao

Thêm nút like bạn có thể xem bài viets này: Khung Author box có nút like cho blogger ves 2