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}

Artikel Terkait
Trang trí Tết 2019 cho Blogspot bằng hình ảnh câu đối, cành mai treo hai bên
Hướng dẫn cài đặt comment của DISQUS cho Blogger
Tạo sitemap (sơ đồ) cho blogspot theo phong cách chuyên nghiệp
Get Link Video Google Drive Đơn Giãn Mới Nhất 2019
Hướng Dẫn Tạo Link Động Ở Trang Chủ Chuyên Nghiệp Trên Blogspot

.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 "<strong><i><data:post.title/></i></strong>" 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/AVvXsEjuoAG18hpc4HWhvWwUmhW-Rp2q3fKflpwEOt2XWdUZtsZF1T4gf9JxcMVxTgIt7BeSAskhvS3r8rUGbpOlfrwj4HwLjYxRy-n4zFAnL0cfesM92q4ak2DnVteHmbgOISpt2a5ctj87Z7TW/s1600/OpV3QbH.png'/></a>
<a href='#' title='Twitter'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgurPuq9Nv_ZJDFbu2OS3b-iFAoo8mdxiPQboPQYFDvDyE6NaFyiGSn3i5VB21vpMfSaEf4TC_JHcmSZAb5XHY0OMOlGRtzuHfTki-3x2Q0GhmIDUO2MVbtLK3T9Y6lEQWRE-wXuojd7h37/s1600/mRqmS46.png'/></a>
<a href='https://m.facebook.com/depzai21891/' title='Facebook'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNtLCZPUB1_B_REyuTAMDeeEHx0jnP5tKhYOH5R8OIUrbrwy6agDpeUWUb2omdD21hSJQwQzebVyidC7rJB_-ByUd8m_x3e9C4u9w0HoTwA0GtGPVuZrcC-uSs04nNyvOs8DOOlj43WL4A/s1600/I5cl6Zo.png'/></a>
<a href='#' title='Google Plus'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-_aK1JzK29GWt6uRPOsRDfAPudVBwbZw8_wv0EahfZTqo2KqKDdEORRM3tjRqMmaxx9isjsf18F5AZ6xPxHF-0zQY03VRUIa98NHznW317zGgA7HQuSCLbqedrbDJf53C_ewWoXYxJsoo/s1600/MFUNf7n.png'/></a>
<a href='http://www.linkedin.com/depzai21891' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoL2X0KkoUuI90vAj5d-iAGgmCmZKyD893Nn4oiDhLkAZ5e7paG-jqeS7_vClEsRBPU_JviczlnNIT-s2IcnvyvXxIcUVPJH-EJukZLfEF2cNHFYV7nD9QobZuptM9WN20md-1zwQUVe0m/s1600/pZdxRe0.png'/></a>
<a href='http://www.flickr.com/sunshine_angle' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAa87_2uA459aIV-7nJOmXFxvbBJalxdaN5ZKyiEKKgnksqxyiUvicKrzo34Vpxrv6ExttlF9cYjmtabbT7bur-8HhjogwnmgNspv23vcYMAxiuUXb_u9YsRmG6A5y6n7kV0QXz9y7ByvB/s1600/X7ohFwB.png'/></a>
<a href='https://www.youtube.com/user/lethuc21891' title='Youtube'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1dU8CgwXF297Qz7xN_5MtYTGmbsZD_oBg9KVheXuyefKVvPGkYPJF7Q3xy9d0uhphawEO70-Z_eyr1nwNs69SB8GjpWgS73gNtIU6wwSXkDSnL1xhDc6W_ItHysm-7OtLzss_DZh7s1vK/s1600/bSkd09J.png'/></a>
<a href='http://pinterest.com/depzai21891' title='Pintrest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghJH-1hSJIS4q_vkZLLO2bbUiYqfoOTNsKjTngBsrSBxdeh_es3FR27wVTZzdCd2XQEH9pxgqTkOdH-6WXyVNvuykPEk0WRmPbRGpbOSQdVmPrQ3NKHigDqSrQA9Ge2asItd3II5GDy5Ca/s1600/czFNlQ5.png'/></a>
</div>