Tạo Khung Thông Tin Tác Giả Cho Blogspot

Thông tin tác giả luôn là phần không thể thiếu đối với một blog. Bởi nó chứa những thông tin cơ bản của tác giả cũng như thông tin liên hệ. Và đó là chủ đề ngày hôm nay: Cách tạo khung thông tin tác giả dưới bài viết cho Blogspot

Mục lục:

• Mục Đích
• Thực Hiện
• Lời Kết

Mục Đích

• Tạo thông tin tác giả, cũng như kèm thông tin liên hệ giúp cho người đọ liên hệ tác giả nhanh chóng
• Tạo tính cá nhân hóa cho blogspot
• ....

Thực Hiện

1. Đăng Nhập Blogspot của bạn >> Mẫu >. Chỉnh sửa HTML
2. Sau đó các bạn chèn đoạn code sau vào trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </style>

CSS/* CSS Multi Author Box */
.authorboxwrap{background:#fff;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.avatar-container {float:left;margin-right:20px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#ef4824}
.author_description_container h4 a:hover{color:#404040}
.author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;}
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;}
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}

3. Sau đó các bạn tìm thẻ <data:post.body/> và chèn đoạn code sau vào sau <data:post.body/>

HTML<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/>       
</p>
<div class='authorsocial'>
<a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>

Các bạn nhớ thay đổi các dấu # thành link mạng xã hội của bạn

Chú ý: có thể dòng  <data:post.body/> có rất nhiều nên các bạn thử từng cái, cái nào được thì thôi

Đối Với các blog các bạn tự làm từ template cơ bản của blogspot cung cấp thì các bạn có thể chèn nó trước các đoạn 

HTML<div class='post-footer-line post-footer-line-1'>

hoặc

HTML<div class='post-footer-line post-footer-line-2'>

hoặc

HTML<div class='post-footer-line post-footer-line-3'>

4. Lưu Mẫu lại.
5. Sau đó vào Google Plus >> Giới Thiệu >> Câu chuyện >>  Giới Thiệu rồi cập nhập thông tin của bạn là xong

Demo Ngay tại cuối bài viết

Câu hỏi thường gặp

Có bạn hỏi là tại sao làm xong lại ko có dòng mô tả giới thiệu ?

- Vì ban đầu các bân tạo blogger các bạn ko cập nhật lần đầu nên sau này cho dù có làm cũng sẽ ko có dòng đó

Vậy làm sao để có 

- Tại dòng code HTML mình cung cấp trên các bạn tìm dòng <data:post.authorAboutMe/>
và xóa nó đi sau đó viết  giới thiệu của bạn vào ngay đó rồi Lưu mẫu lại là xong

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo Khung Thông Tin Tác Giả Cho Blogspot, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.