Khung Tác Giả Đẹp Cho Blog

By Unknown Posted at 1:41 AM Thủ Thuật Blog 0 comments

Khung thông tin tác giả (Author box) được sử dụng phổ biến ở rất nhiều blog, website 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ớ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.

CÁCH TẠO AUTHOR BOX CHO BLOG

1. Đăng nhập vào blog

2. Chọn Mẫu

3. Chọn Chỉnh sửa HTML

4. Dãn trước thẻ ]]></b:skin> đoạn mã sau:

.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}
#mmoforfun{width:660px;height:100px;margin:0;padding:0;background:#778899;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}
.plus{float:right;padding-right:20px;margin-top:-5px}
.author-avatar1{float:left;width:50%}
  .author-inf{padding:0px;float:left;width:48%;margin-top:-20px}
.wdt_button{float:left;margin:6px}

>> Tùy chỉnh:

- Thay đổi width:660px cho phù hợp với độ rộng blog của bạn.

- background:#778899; là màu nền của khung chính mmoforfun.

- #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.

- margin:6px là khoảng cách giữa các nút like hãy điều chỉnh lại nếu chúng quá sát nhau hoặc bị đẩy xuống dòng nha.

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

Đoạn 1 (nếu thấy 2 dòng thì chọn dòng thứ 2)

<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 một 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='mmoforfun'>
<div class='author-box'>
<div class='author-avatar1'>
<div class='author-avatar'><img height='50' src='https://lh3.googleusercontent.com/-XQh6RjJDas0/UxbF49jYbhI/AAAAAAAALgs/REh-PiFUv8o/s0/mmoforfun-blogspot-com.PNG' width='50'/></div>
<a href='https://plus.google.com/u/0/+haianhtieusu?rel=author' target='_blank'><b>Thế Giới Blog</b></a>: Kiếm Tiền Trên Mạng | Thanh Toán Trực Tuyến &amp; Thương Mại Điện Tử | Thủ Thuật Web/Blog: Thủ Thuật Blog
</div></div>
<div class='author-inf'>
<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>

<!-- 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 sharing by mmoforfun --> 
</div>
</div>
</div>
</b:if>

>> Tùy chỉnh:

- Thay link ảnh màu xanh thành thành link ảnh avantar của bạn.

- Thay https://plus.google.com/u/0/+haianhtieusu thành link liên kết tới profile blogger hoặc profile google pluss của bạn.

- Thay phần màu xanh thành mô tả vắn tắt về bạn.

Lưu Ý - Với Blog Nhiều Tác Giả

Ta thay đổi:

<div class='author-avatar'><img height='50' src='https://lh3.googleusercontent.com/-XQh6RjJDas0/UxbF49jYbhI/AAAAAAAALgs/REh-PiFUv8o/s0/mmoforfun-blogspot-com.PNG' width='50'/></div>
<a href='https://plus.google.com/u/0/+haianhtieusu?rel=author' target='_blank'><b>Thế Giới Blog</b></a>: Kiếm Tiền Trên Mạng | Thanh Toán Trực Tuyến &amp; Thương Mại Điện Tử | Thủ Thuật Web/Blog: Thủ Thuật Blog

Thành

<b:if cond='data:post.author == &quot;Tên tác giả 1&quot;'>
<div class='author-avatar'><img height='50' src='https://lh3.googleusercontent.com/-XQh6RjJDas0/UxbF49jYbhI/AAAAAAAALgs/REh-PiFUv8o/s0/mmoforfun-blogspot-com.PNG' width='50'/></div>
<a href='https://plus.google.com/u/0/+haianhtieusu?rel=author' target='_blank'><b>mmoforfun</b></a>: Kiếm Tiền Trên Mạng | Thanh Toán Trực Tuyến &amp; Thương Mại Điện Tử | Thủ Thuật Web/Blog: Thủ Thuật Blog

</b:if>
<b:if cond='data:post.author == &quot;Tên tác giả 2&quot;'>
<div class='author-avatar'><img height='50' src='https://lh3.googleusercontent.com/-XQh6RjJDas0/UxbF49jYbhI/AAAAAAAALgs/REh-PiFUv8o/s0/mmoforfun-blogspot-com.PNG' width='50'/></div>
<a href='Link profile tác giả 2' target='_blank'><b>Tác giả 2</b></a>: Mô tả tác giả 2
</b:if>
<b:if cond='data:post.author == &quot;Tên tác giả 3&quot;'>
<div class='author-avatar'><img height='50' src='https://lh3.googleusercontent.com/-XQh6RjJDas0/UxbF49jYbhI/AAAAAAAALgs/REh-PiFUv8o/s0/mmoforfun-blogspot-com.PNG' width='50'/></div>
<a href='Link profile tác giả 3' target='_blank'><b>Tác giả 3</b></a>: Mô tả tác giả 3
</b:if>