Thêm avatar tác giả vào cạnh tiêu đề bài viết - version 2

Lần trước mình đã giới thiệu cho các bạn một cách để thêm avatar tác giả bài viết vào cạnh tiêu đề bài viết rồi, tuy nhiên nó có một nhược điểm là bạn phải tự cập nhật lại url hình ảnh nếu muốn thay avatar - khà phiền đúng không. Hôm nay mình sẽ giới thiệu tới các bạn một thủ thuật khá đơn giản để lấy avatar từ Google Plus và đặt nó cạnh tiêu đề bài viết, và vì nó là v2 nên sẽ có một ưu điểm là avatar ở cạnh tiêu đề bài viết sẽ thay đổi khi bạn thay đổi avatar ở Google Plus. Bây giờ chúng ta cùng thực hiện.

Thêm avatar vào cạnh tiêu đề bài viết

Thêm avatar vào cạnh tiêu đề bài viết

#Thêm XML

1. Tìm thẻ tiêu đề của blog
Blogger có một đoạn xml nhỏ giúp ta lấy được ảnh đại diện từ Google Plus, ta sẽ đặt nó vào trước đoạn code tiêu đề bài viết.

Tuy nhiên có một điều mà bạn cần phải lưu ý là tiêu đề bài viết trong template của bạn có thể là h2 hoặc h3 - bạn cần phải nắm rõ được điều này.

Nếu template của bạn sử dụng thẻ h2 thì tìm code sau:

<h2 class='post-title entry-title' itemprop='name'>

Nếu template của bạn sử dụng thẻ h3 thì tìm code sau:

<h3 class='post-title entry-title' itemprop='name'>

Lưu ý:

• Còn nếu bạn không rõ về template của mình thì tìm cả hai thẻ trên - tìm được thẻ nào thì thực hiện thủ thuật với thẻ đó.
• Thẻ tiêu đề h2 hoặc h3 thông thường sẽ xuất hiện 2 lần trong template của bạn, cho nên bạn sẽ thực hiện thủ thuật này với thẻ tiêu đề thứ 2 - tức là thẻ dưới cùng. 

2. Dán code hiện thị hình ảnh vào trước thẻ tiêu đề blog
Sau khi tìm được thẻ tiêu đề của blog bạn hãy dán thẻ dưới vào trước (trên) thẻ tiêu đề blog

<b:if cond='data:post.authorPhoto.url'>
   <img expr:src='data:post.authorPhoto.url' itemprop='image' width='21px'/>
</b:if>

Thay width='21px' thành kích thước của ảnh cho phù hợp
Sau khi dán xong thì code sẽ trong như dưới

Như vậy là xong phần XML, tiếp theo ta thêm chút CSS để hình ảnh hiện thị trên cùng hàng với tiêu đề bài viết

#Thêm CSS

1. Tìm thẻ ]]></b:skin>
2. Dán code dưới vào trước thẻ bạn mới tìm

.post h2{display:inline !important}

Nếu template của bạn sử dụng thẻ tiêu đề h3 thì chèn code dưới

.post h3{display:inline !important}

3. Lưu mẫu lại và kiểm tra kết quả