Thêm thông tin tác giả dưới bài viết blogspot - thủ thuật

Hôm nay mình giới thiệu tới các bạn 1 thủ thuật: thêm thông tin tác giả ngay bên dưới bài viết cho blogger. Đây là thủ thuật có bạn hỏi mình khi nhìn thấy trên blog của mình và câu hỏi được đặt ra là làm thế nào để đưa được thông tin tác giả chỉ hiển thị sau mỗi bài viết. Thêm thông tin tác giả bài viết làm người đọc ấn tượng hơn về chia sẻ của bạn. Thủ thuật này cũng khá đơn giản và chúng ta chỉ sử dụng CSS + HTML

Phong Vu computer, vi tính Phong Vũ, authors blogspot

CÁCH LÀM THỦ THUẬT
- Vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML) -> Mở rộng mẫu tiện ích ( Expand Widget Templates ) ->
- Tìm tới ]]></b:skin>  và dán Code CSS dưới đây ngay trên nó
CODE

#authorbox {
background:#333 url(http://2.bp.blogspot.com/-L5Tvv0yJrr4/TvsFt-Mh82I/AAAAAAAACC0/9eva5jXci8U/s1600/about_author.jpg) no-repeat scroll left top;
width:auto;
overflow:hidden;
color:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
margin:5px auto;
padding:40px 10px 10px 20px;
font-family:verdana;
}
#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:16px;
color:#fff;
clear:none;
margin:0;
padding:10px 10px 5px;
}
#authorbox .author_small {
font-style:italic;
}
#authorbox img {
-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
float:left;
border:4px solid #ff4408;
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(+9deg);
-moz-transform: rotate(-1deg);
}
#authorbox p {
color:#ffffff;
margin:0;
padding:0 10px 10px;
}
#authorbox a {
color:#ff4408;
text-decoration:none;
}

- Tiếp theo tìm đến đoạn

<data:post.body/>

và dán đoạn Code dưới đây ngay sau nó:

<!-- Tac gia blog -->
<div id='authorbox'>
<a href='https://plus.google.com/106302543309839480016' rel='author' target='_blank'>
<img alt='' height='100' src='https://lh6.googleusercontent.com/-3vrvZ3jJqk8/UMi-mfXQ3TI/AAAAAAAADm4/8kt6bRrI1Wo/w196-h196-n-k/anh-nen-Phong-Vu%2Bcopy.jpg' width='100'/> </a>
<h4><a href='http://www.itviet360.com/' rel='author' title='Bài viết của tôi'>Bài viết của Phong Vũ</a></h4>
Hi. Mình là Phong Vũ. Mình chia sẻ những gì mình biết và tham khảo. Hy vọng các bạn tìm được thông tin cần trên site mình. Mong nhận được sự ủng hộ của các bạn<br/> Chúc các bạn vui vẻ !<p> Kết nối qua: <a href='https://plus.google.com/106302543309839480016'>Google +</a> Or <a href='http://www.facebook.com/pit62'>Facebook</a></p></div>
<!-- Ket thuc -->

Trong đó các link được mình bôi thì các bạn tùy chỉnh link của mình nếu muốn người xem blog biết về tác giả qua những site mạng. Tất cả lời văn các bạn thay đổi sao cho phù hợp với bạn
- Lưu mẫu lại và xem kết quả :)


Chuyên mục: , , ,

8 comments:

  1. Mình sẽ áp dụng ngay!
    Cảm ơn nhé bạn hiền!!

    ReplyDelete
  2. Xin cám ơn vì bài viết hữu ích này, hiện mình đang áp dụng nó cho blog của mình. Nhưng mình muốn hỏi là mình không muốn khung thông tin tác giả này hiện ngoài trang chủ thì như thế nào vậy ạ?

    ReplyDelete
  3. nếu blog có 2 tác giả thì làm thế nào bạn ơi?

    ReplyDelete