Chèn ảnh Author ở tiêu đề bài viết Blog
29 - 01 - 2015
Chỉ cần một bức ảnh author avatar ở đầu tiêu đề bài viết là các blogger có thể khẳng định bản quyền tác giả của mình với người đọc, cũng như giúp họ phân biệt tác giả là ai trong cộng đồng. Mình sẽ giới thiệu tới các bạn một thủ thuật tuyệt vời dành cho những blogspot cá nhân muốn khẳng định tên tuổi.
Thủ thuật này cực kỳ đơn giản, chúng ta chỉ cần một vài thao tác là có thể thêm được ảnh author avatar vào đầu tiêu đề bài viết được rồi. Trình tự của thủ thuật này thì mình xin gói trọng trong 3 bước
3 Bước thêm ảnh tác giả author avatar ở đầu tiêu đề cho blogspot
Bước 1- Chèn CSS vào HTML chính của website bạn
Đầu tiên các bạn hãy vào Blog Title → Template → Edit HTML. Nhấn Ctrl + F. Bạn tìm được<b:skin>…</b:skin> chèn code sau vào giữa đó. Hoặc tìm kiếm ]]></b:skin> và chèn code sau vào trên ]]></b:skin>.
Đầu tiên các bạn hãy vào Blog Title → Template → Edit HTML. Nhấn Ctrl + F. Bạn tìm được<b:skin>…</b:skin> chèn code sau vào giữa đó. Hoặc tìm kiếm ]]></b:skin> và chèn code sau vào trên ]]></b:skin>.
.avatar-author{float:left;margin-right:10px;border:0;border-radius:50%;padding:0;width:30px;height:30px}
Bước 2 – Chèn Javascript vào HTML chính của website bạn
Tìm </head> và chèn code sau vào trước </head>.
Tìm </head> và chèn code sau vào trước </head>.
<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,’/s30$1/’);document.write(‘<img alt=”‘+c+'” class=”avatar-author” src=”‘+d+'” title=”‘+c+'”/>’)}
//]]>
</script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,’/s30$1/’);document.write(‘<img alt=”‘+c+'” class=”avatar-author” src=”‘+d+'” title=”‘+c+'”/>’)}
//]]>
</script>
Bước 3 – Tìm kiếm <b:if cond=’data:post.title’> và chèn code
Tiếp theo các bạn tìm kiếm <b:if cond=’data:post.title’> và chèn code sau ở trước nó. Và nhớ rằng có nhiều <b:if cond=’data:post.title’>, nên bạn phải chắc chắn rằng tìm đến vị trí đúng. Thử cái này không được thì hoàn tác lại và thử ở vị trí <b:if cond=’data:post.title’> khác nhé!
Tiếp theo các bạn tìm kiếm <b:if cond=’data:post.title’> và chèn code sau ở trước nó. Và nhớ rằng có nhiều <b:if cond=’data:post.title’>, nên bạn phải chắc chắn rằng tìm đến vị trí đúng. Thử cái này không được thì hoàn tác lại và thử ở vị trí <b:if cond=’data:post.title’> khác nhé!
<script expr:src=’"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&amp;callback=av"’/>
Sau đó các bạn Lưu lại và xem thành quả nhé.
Thế là xong. Chúc các bạn thành công.
Nhận xét