Tạo box hiển thị thông tin tác giả tùy chỉnh và đẹp cho blog

Mỗi khi vào đọc blog của ai đó bạn thấy ô hiển thị thông tin tác giả đẹp mà bạn không biết nó được tạo như thế nào. Và nó rất đẹp có ý nghĩa rất hay khi muốn bạn đọc biết đến bản thân mình.

Hôm nay mình xin giới thiệu và hướng dẫn các bạn có thể tạo được ô hiển thị thông tin tác giả này nhé.

Tạo author box cho blogger

Để tạo được cái này các bạn có thể chèn sau tiêu đề  hoặc bên dưới nội dung bài viết . Vậy chúng ta cần chèn nó vào đúng vị trí cần hiển thị

Đoạn code quy định style chung cho cả hai cách hiển thị bạn chèn nó vào trước thẻ </head>

/* Author Box Style */
 .author-box{overflow:hidden;background-color:#fff;font-size:16px;padding:20px}
.author-box .avatar{margin-right:20px;float:left}
.author-box-title{font-size:18px;margin-bottom:4px;text-transform:uppercase}
.author-box p:last-child{margin-bottom:0}.author-social{margin-top:10px}
.author-social a{opacity:0.7;margin-left:2px}.author-social a:hover{opacity:1}
.author-social a img{width:25px}

Chèn Author box sau tiêu đề

Bước 1: Vào Mẫu - Chỉnh sửa HTML. tìm đến  <b:includable id='post' var='post'>
Chèn đoạn code sau vào trước thẻ <data:post.body/>

<b:if cond='data:top.showAuthor'>
<h4 class='author-box-title'>
<a expr:href='data:post.authorProfileUrl' rel='author' target='_blank' title='author profile'>
<span class='fn'><data:post.author/></span></a></h4>
</b:if>
<div class='author-box-content' itemprop='description'>
<p>Bạn đang xem &quot;<strong><i><data:post.title/></i></strong>&quot; tại <b><data:blog.title/></b>. Đừng quên
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
document.write('<b><a href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">Chia sẻ ngay</a></b>'); //]]></script>để ủng hộ <b><data:blog.title/></b> nếu bài viết có ích !<br/>Like <b><a href='https://www.facebook.com/SunShiune.Angle' target='_blank'>Bchiase.com</a></b> trên Facebook để ủng hộ mình nhé.</p><p><data:post.authorAboutMe/></p>
</div>
<div class='author-social'>
<a href='http://b-chiase.blogspot.com/' title='Website'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj85w00k5XmcROD5lDGWT6ZrHTFLnNTp_3lmnccX4ccK2OCUpRM6pxl4j7SJIinH06CkA9be589hSUKA5ZC6518wbSkqvejPHCbilAXfPHutUq981p8j1jdeQQtuA4JrSCPki-gemsEsr6A/s1600/OpV3QbH.png'/></a>
<a href='#' title='Twitter'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9tMWkDrXcunan2MC-t7hw1kr0zyQ9PNXE9ipGD4V4_QSzM5lvSbiNakG800L2YpSZ4OIhfE2WXjJdE5UfYb6NDjjQ2yDizaommm63MwWJ_8Gsc9o3KhhIqDJ9QasrnxXhIjmnOjBcRckg/s1600/mRqmS46.png'/></a>
<a href='https://m.facebook.com/depzai21891/' title='Facebook'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlSqEoQ5CTCqUeqRZkfOZhTAd-J93TOJek9Z_atFMt5aH4y9VBqzBH9VYDqlZ5r277aA3-CyBk5ZiqnvASWNgOSyckSjwCz94gXCegCDjnhEZmtlNyjl-qMqnJaWHStJXbnafDR1ZQZKqY/s1600/I5cl6Zo.png'/></a>
<a href='#' title='Google Plus'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKU_wPEMkWOJI5WiBH87JXuVZqHSIjrLJPF-K4ziyw27nrvtmoC_t6GmRe2ZnUbk7rELImNiJrN-k6R2pYysEyyEJnInfG4Z6gjsp0WFiSdD9LopHJa-_KGwRzh3zOScfPD3h2MAz0ufQX/s1600/MFUNf7n.png'/></a>
<a href='http://www.linkedin.com/depzai21891' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9DD6j-p44NPNpjcR8dDukr2k8z_0mQ64vlBbSw_GuUP4Ys7HzOjOoHYtYFWEibarFJcJYGVxwTZ4LV0b3R-QMe2Re2gE6Ddst9wrzfSW2bNX232shaNvqDQKWLhEXEvSNxGwFiWAbky5l/s1600/pZdxRe0.png'/></a>
<a href='http://www.flickr.com/sunshine_angle' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrIIJiqJrJ2tu8iwlks3spTCy9P25z59sSpRIj1MACsuc0EARu4ThDzpeZTe5CMnXrEfMBLwoaAR3zW58BY0h75oBncZuXMvqGYInzQc8hk259edg8q5_cZw9wJZADJ_t_CMfoJuJnC4k3/s1600/X7ohFwB.png'/></a>
<a href='https://www.youtube.com/user/lethuc21891' title='Youtube'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0J272yhZ51-KfWRgcYCYg8mnVZ385Hf1pPoXlB_0iV95nat_EOi_cUD9D3aDl3hLtJHPWfWwp7ct0otKl8x40gDCw6LT4-Mog0Ti4E7fvjsSzTMnfIjd39gP13AIu871XxMZfBnEzafLo/s1600/bSkd09J.png'/></a>
<a href='http://pinterest.com/depzai21891' title='Pintrest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkYbzf2u7EahdGLBZ5A06iZpWhXCtja8exLv_UNQqIspele7GosxOByjQ9gPosPiGlZFLKx4-6vVNRXuRn8XNQPuu6zXYGZnvYw8BeYJC763RFLEoNqJKNYy8g33kau2t3VGUQqe3rP1q0/s1600/czFNlQ5.png'/></a>
</div>

Các bạn nhớ sửa lại link màu đỏ mình đã đánh dấu thành link MXH của các bạn nhé.