Author box kết hợp nút follow cho Blogger

Author box là phần giới thiệu đôi chút về tác giả bài viết. Hôm nay khi đang lang thang trên mạng mình chợt thấy có vài nút follow của Facebook - Google Plus và Twitter nữa, tất cả đều là nút follow có sử dụng javascript nên chỉ cần click vào là follow được ngay. Với ưu điểm như vậy nhưng mình chưa thấy ai đưa nó vào author box cho Blogger nên đã làm một cái. Sau đây là các bước thực hiện:

Author box kết hợp nút follow

Xem demo ngay dưới bài viết hoặc tại Codepen.

#Thêm CSS

1. Đăng nhập Blogger

2. Mẫu > Chỉnh sửa HTML

3. Tìm thẻ ]]></b:skin> (nếu không tìm được thì tìm thẻ </style> )

4. Dán code dưới vào trước thẻ mà bạn vừa tìm

/* http://www.khanh98.blogspot.com/2015/08/author-box-ket-hop-nut-follow-cho-blogger.html */.khanh98-author-box{overflow:hidden;display:inline-block;background:#F1C40F;font-family:arial}
.khanh98-author-box .author-content{margin:5px;}
.khanh98-author-box .author-content .author-avatar img{height:100px;width:100px}
.khanh98-author-box h2{margin:0;background:#e74c3c;overflow:hidden;padding:2px;font-size:120%}
.khanh98-author-box h2 a{color:#fff; text-decoration:none; }
.khanh98-author-box .author-avatar{float:left;margin-right:5px;}
.khanh98-author-box .follow-button{display:block;overflow:hidden;background:#e67e22;padding:4px 0 0 2px}
.khanh98-author-box .gioithieu{overflow:hidden;background:#d35400;padding:2px}

#F1C40F là màu nền author box,
#e74c3c là màu nền của phần tên tác giả
#e67e22 là màu nền của phần nút follow
#d35400 là màu nền phần giới thiệu của tác giả

Arial là font chữ của author box
height:100px và width:100px là chiều cao và chiều rộng của avatar

#Thêm HTML

1. Tìm thẻ <data:post.body/> (hoặc thẻ <div class='post-footer'> đối với mẫu mặc định của Blogger, thẻ mà bạn tìm thì đều xuất hiện nhiều lần trong template nhưng thẻ mà cần tìm thường là thẻ dưới cùng.)
2. Dán code dưới vào dưới thẻ mà bạn vừa tìm

<b:if cond='data:blog.pageType == "item"'><!-- http://www.khanh98.blogspot.com/2015/08/author-box-ket-hop-nut-follow-cho-blogger.html --><div class="khanh98-author-box">
<div class="author-content">
<div class="author-avatar">
<img alt="Author avatar" src="https://googledrive.com/host/0B2w8P_cE_NUyaHMwd1VUQkFkT2s"/>
</div>
<h2>Author:<a href="#" target="_blank"> Quốc Khánh Bùi</a></h2>
<div class="follow-button">
<a href="https://twitter.com/Chelskivn29" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @Chelskivn29</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script src="https://apis.google.com/js/platform.js" async="defer">
  {lang: 'vi'}
</script>

<!-- Đặt thẻ này vào nơi bạn muốn tiện ích con kết xuất. -->
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/u/0/117801693701287084969" data-rel="author"></div>
<iframe src="//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Fquockhanh.bui.500&amp;width&amp;height=20&amp;colorscheme=light&amp;layout=button_count&amp;show_faces=false&amp;appId=1509890279224869" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:20px; width:102px" allowTransparency="true"></iframe>
</div>
<div class="gioithieu">Tôi là một Blogger tại Việt Nam, tôi sinh ra tại Nghệ An, hiện tại đang học tập và sinh sống ở Đăk Nông. Tôi chuyên chia sẻ các kiến thức và thủ thuật về Blogger và Facebook.
    </div></div></div></b:if>

https://googledrive.com/host/0B2w8P_cE_NUyaHMwd1VUQkFkT2s là URL ảnh avatar của tác giả
Quốc Khánh Bùi là tên tác giả
Chelskivn29 là username Twitter của bạn
//plus.google.com/u/0/117801693701287084969 là URL đến profile Google Plus
quockhanh.bui.500 là username Facebook của bạn(nút follow chỉ áp dụng cho trang cá nhân)
Phần màu cam dưới cùng là phần giới thiệu cho tác giả.
3. Lưu mẫu lại và kiểm tra kết quả.

#DEMO

Author: Quốc Khánh Bùi

Follow @Chelskivn29

Tôi là một Blogger tại Việt Nam, tôi sinh ra tại Nghệ An, hiện tại đang học tập và sinh sống ở Đăk Nông. Tôi chuyên chia sẻ các kiến thức và thủ thuật về Blogger và Facebook.

{Demo có thể khác nếu áp dụng trên blog của bạn một chút}