Thêm thông tin về tác giả ở cuối bài viết cho Blogspot-Box author responsive

Tác giả là trái tim và linh hồn của một blog.Là người tạo ra một blog đẹp với lượng kiến thức lớn mang chia sẻ cùng mọi người.

Vậy chắc sẽ có nhiều người muốn biết chút ít về thông tin của tác giả blog.Thủ thuật tạo Author box hay còn gọi là hộp thông tin về tác giả sẽ giúp cải thiện phần nào điều đó.

Dưới đây chỉ là thủ thuật tạo khung cơ bản còn các bạn có thể tùy biến theo cách hoàn toàn thủ công theo ý thích của mình

Làm thế nào để thêm tiện ích này vào Blogspot

Có 2 bước cần làm
1- Thêm CSS
2- Thêm HTML
1- Thêm CSS
Đăng nhập Blogger Bảng điều khiển> Thiết kế> Chỉnh sửa HTML.
- Sao lưu / Tải mẫu đầy đủ.
- Bây giờ tìm thẻ ]]></b:skin>
- Thêm mã dưới đây ngay trên nó ]]></b:skin>
- Lưu mẫu của bạn.

#authorbox {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoabjYUczQzoDvqb-WwZgFWnyvlRERZDGIQc_MKa_VRBS4EKYocqXia7X6xH-GejO1Xp751e4TMbu11USlBKb_Eh3Ri5LSt9divuP-FsTC6roVS8LtE16wf1MRvMxRyjbeO6J-P4iM3ZA/s1600/about-author.jpg) no-repeat scroll left top;
width:100%;
overflow:hidden;
color:#fff;
margin:5px 0;
padding:40px 0 0;
font-family:Georgia;border-radius:7px;
box-shadow:
0px 4px 4px 0px rgba(0, 0, 0, 0.5),
0px 4px 4px 0px rgba(255, 255, 255, 0.5) inset;
}
#authorbox:hover {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
}
#authorbox h4 {
font-size:22px;
color:#005595;
clear:none;
margin:0;
padding:10px 10px 5px;
}
#authorbox .author_small {
font-style:italic;
}
#authorbox img {
-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;
-webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5),
0px 4px 4px 0px rgba(255, 255, 255, 0.5) inset; 
-moz-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5),
0px 4px 4px 0px rgba(255, 255, 255, 0.5) inset; 
padding: 5px 5px 5px 5px;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
float:left;
border:4px solid #7B68EE;
margin:10px;
padding:0;
}
#authorbox img:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(+180deg);
-moz-transform: rotate(-180deg);
}
#authorbox p {
color:#fff;
margin:0;
padding:0 10px 10px;
}
#authorbox a {
color:#005595;
text-decoration:none;
}
#authorbox a:hover{color:#00dd00}
@media screen and (max-width:800px){#authorbox{max-width:100% !important;width:100% !important;float:none}
#authorbox img{display:none}
}

2-Thêm HTML
Bây giờ lại quay lại chỉnh sửa HTML và tìm tới thẻ <div class='post-footer-line post-footer-line-2'/>
Cũng có thể đặt sau thẻ
<data:post.body/>
Nhưng phải ở trên phần bài liên quan
Và dán code sau vào dưới 1 trong 2 thẻ trên

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='authorbox'>
<img alt='avata-author' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiFCEncUyjSyCtwp3WkEu70Rq1PgfDpIzTczwbj5yyNn0UMsSg_nucr2TWhgMWY2L-o5n0Ud01Arws_Vq_udABvx59FesZ4WpHOPfIzQF5EQl2fUBKC7hhwU5R4int44njYQCufDkHFizI/s320/13-1.gif' width='100'/>
<h4>
Posts by<a href='https://dautoblognz.blogspot.com/' rel='author' title='Posts by Dauto Crazy'>
Dauto Crazy
</a>
</h4>
<p>
Xin chào! Mình là Dauto Crazy. Mình muốn được chia sẻ cùng các bạn những gì mình biết.
</p>
<p>
Theo tôi trên&#160; 
<a href='http://www.twitter.com/Dautocrazy'>
Twitter&#160;
</a>
or 
<a href='http://www.facebook.com/pages/Giải-Trí-Chia-Sẻ/477172592337348'>
&#160;Facebook
</a>
</p>
</div>
</b:if>

Thay các đoạn bôi màu cho phù hợp với blog của bạn
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiFCEncUyjSyCtwp3WkEu70Rq1PgfDpIzTczwbj5yyNn0UMsSg_nucr2TWhgMWY2L-o5n0Ud01Arws_Vq_udABvx59FesZ4WpHOPfIzQF5EQl2fUBKC7hhwU5R4int44njYQCufDkHFizI/s320/13-1.gif: là avata
- Thay địa chỉ blog và các trang mạng xã hội của bạn vào.