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.
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>
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='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&amp;callback=av"'/></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
Nhận xét
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaĐề nghị bạn đừng gắn link spam!
XóaĐẹp nhưng nếu muốn đổi màu nền thì làm sao anh nhỉ
Trả lờiXóaMình đã cập nhật hướng dẫn trong bài đăng rùi bạn xem và tùy chỉnh theo ý nha:
XóaMình muốn chèn thêm like facebook , share như của bạn thì làm thế nào ? chỉ mình code với
Trả lờiXóaBạn Thay:
Xóa<div class='plus'><g:plusone/></div>
Thành:
<!-- TWITTER SCRIPT -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- G+ SCRIPT -->
<!-- Place this render call where appropriate -->
<script type='text/javascript'>gapi.plusone.go();</script>
<!-- STUMBLEUPON SCRIPT -->
<!-- Place this snippet wherever appropriate -->
<script type='text/javascript'>
(function() {
var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
li.src = 'https://platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
})();
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script>
<!-- AddThis Button END -->
<style>
.wdt_button{float:left;margin:5px}
<style>
<div class='wdt_button'><a class='addthis_button_facebook_like' fb:like:layout='box_count'></a></div>
<div class='wdt_button'><a class='addthis_button_tweet' tw:count='vertical'></a></div>
<div class='wdt_button'><a class='addthis_button_google_plusone' g:plusone:size='tall'></a></div>
<div class='wdt_button'><a class='addthis_counter'></a></div>
Đưa code vào đây...Lỗi khi phân tích cú pháp XML, dòng 1855, cột 3: The element type "style" must be terminated by the matching end-tag "</style>".
Trả lờiXóaNÓ báo lỗi này bạn à. Xem giúp mình với
Chết trong đoạn code trên mình nhầm một chô bạn sửa:
Xóa<style>
.wdt_button{float:left;margin:5px}
<style>
thành:
<style>
.wdt_button{float:left;margin:5px}
</style>
Nó cứ bị lùi xuống xấu bạn à
Trả lờiXóaẢNH
1- Sửa:
Xóa<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 cho mọi người.<br/>
thành:
<div class='namkna-meta'><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 cho mọi người.</div>
2- Sửa đoạn
.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}
thành:
.author-avatar{height:50px;width:50px;float:left;margin:4px 10px 15px 0}
.namkna-meta{width:200px;marin:5px}
.author-inf{width:250px;padding:5px}
.author-inf a{padding:2px 5px;display:inline;border-radius:3px;margin:5px;color:#fff600}
Sao cho tổng của width:50px và width:200px và width:250px nhở hơn động rộng của khung 10px. (trong bài này là width:520px)
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaCác đoạn mã ở bước 5 đều có 2 đạn giống nhau phải thêm vào đung đoạn mới hiển thị.
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaSao mình đã xóa hết tất cả các phần overflow:hidden rùi mà không hiện ra Riboxom nhỉ Nam. Júp mình với
Trả lờiXóaChèn đoạn code bước 5 trước đoạn <div class='post-footer'>
XóaBác cho em hỏi là blog có nhiều Author thì dùng như nào vậy bác
Trả lờiXóaBài viết tới mình sẽ cập nhật thêm cho bạn nha.
XóaCái đoạn tìm đến
Trả lờiXóa#outer-wrapper{...}
#main-wrapper {...}
.post{...}
....
rồi mình xóa hay làm gì nó thế Add cái khúc đó đọc ko hiểu lắm
bạn tìm trong các thẻ đó xem có các thuộc tính overflow:hidden không nếu có thì xóa nó đi nha.
XóaẢNH
Trả lờiXóasửa thế nào hả anh
Ý em là hình ảnh nào. Anh thấy em đã thay ảnh của em rùi mà.
XóaKhông, mặc dù đã sửa theo phần cmt nhưng nút like v share vẫn bị rớt
XóaBạn xem bài này nha: http://namkna.blogspot.com/2013/08/author-box-co-nut-like-cho-blogger.html
XóaNormal 0 false false false EN-US X-NONE X-NONE ......
Trả lờiXóaanh ơi cho em hỏi em bị lỗi này thì bị sao z ak, và cách sửa nó làm sao vậy
Em cảm ơn anh nhiều
Lỗi đó xuất hiện khi nào và lúc đó ẹm đang làm gì phải nói anh mới trả lời được vì nó có rất nhiều nguyên nhân khác nhau :)
Xóasao blog em áp dụng rồi mà không thấy gì hết anh Nam à.
Trả lờiXóaCode bước 5 em đặt nhầm vị trí nên nó không hiển thị là đúng rồi. Mỗi blog có 2 đoạn như ậy. 1 đoạn dùng cho giao diện mobile một đoạn cho giao diện máy tính. Em kiểm tra lại nha,
Xóasao nó lại xung đột với share box nằm phía dưới của em anh nam nhỉ? LINK
Trả lờiXóaĐoạn code này hoàn toàn từ CSS. Anh đã kiểm tra sharebox của em không hề có id hay class nào trùng với đoạn code này nên không có chuyện xung đột.
XóaNó không hiển thị phần bo ngoài là do thuộc tính overflow:hidden trong mã CSS của em.
Em hãy tìm đoạn::
#main-wrapper{width:70%;padding-top:15px;float:left;word-wrap:break-word;overflow:hidden;}
và sửa thành :
#main-wrapper{width:70%;padding-top:15px;float:left;word-wrap:break-word}
cảm ơn anh Nam nhé, anh nhiệt tình thật...:(
Trả lờiXóaKhông có gì đâu em ak. Rất vui vì giúp được em :)
Xóaanh ơi cái anh hướng dẫn cho em đó ạ :D cái code box thông tin bài viết mà em muốn để xuống dưới đó ,em làm theo anh rồi ,em chèn code đó vào sau cả 4 đoạn mà anh đưa rồi cũng đã thử từng cái 1 mà kết quả là ko có j thay đổi hết anh à @@ ,anh còn cách nào khác ko ạ ^^
Xóasao của em nó chỉ có được phần bo ngoài bên trái, còn bên phải thì nó không được anh Nam nhỉ?LINK
Trả lờiXóaTrong bài có đoạn hướng dẫn rồi mà e :
XóaThay đổi width:520px cho phù hợp với độ rộng blog của e.
Hay bước thứ 6 khá là rườm rà.
Trả lờiXóahttp://thaibinhnguyen.com
Mình chia ra cho dễ làm đó, bạn làm được chưa?
Xóa