Trang chủ \ 04:38

Hiển thị avatar người viết bài bên cạnh tiêu đề bài viết

avatar authorThủ thuật hướng dẫn các bạn thêm bên cạnh tiêu đề bài viết avatar của người viết bài. Việc hiển thị avatar này giúp mọi người dễ dàng nhận biết nhận xét của người viết bài khi người đó viết nhận xét. Ngoài ra nếu blog bạn có nhiều cộng tác viên viết bài thì nó giúp phân biệt những người viết bài khác nhau.

Và tất nhiên việc hiển thị avatar này là hoàn toàn tự động, sẽ tự cập nhật nếu người viết bài thay đổi avatar.


Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
.avatar-author{float:left;margin-right:10px;border:0;border-radius:50%;padding:0;width:30px;height:30px}

Bước 2: Thêm đoạn mã dưới đây vào trước thẻ </head> trong template của bạn.
<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 thẻ <b:if cond='data:post.title'> và thêm vào trước nó đoạn mã dưới đây:
<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>

Ở bước 3 cần tìm đúng thẻ <b:if cond='data:post.title'> dành cho phiên bản web, có thể nó là thẻ thứ 2 khi tìm kiếm.
Chia sẻ Phần mềm và Tài liệu cho người dùng Windows, Ubuntu. Hướng dẫn Thủ thuật cho người dùng Blogger, Blogspot.

Chia sẻ

43

Nhận xét
1

Đặt gạch comment đầu tiên =P~

Reply
2

Bó tay bác.....đợi bài viết ra rùi bó chân

Reply
4

Hài thế này :)

Reply
5

Đã xây xong :D

Reply
6

a @Duy Pham xem giúp e với, sao blog e nó ko hiện :(
http://hoangphamblog.blogspot.com/

Reply
7

Mình k thấy code được chèn trong temp.

Reply
8

ai ko làm được thì xem lại bước 3 chèn vào trước từng cái ,cái được cái ko !

Nhưng mà cái này Ảnh Thumnail bài đăng trang chủ toàn cái Avatar Author !!
Bài này hay lắm Duy fix lại cái nhá !!!

Reply
10

Fix cái gì kia? Bạn mô tả lại rõ hơn chút nữa.

Reply
16

Mình xài"bài viết mới có ảnh thumnail" Cái ảnh Avartar nó đưa ra trang chủ lun :((

Reply
17

Thì mình làm cho cả trang chủ mà. Nếu bạn không muốn thì thêm <b:if cond='data:blog.pageType == &quot;item&quot;'> vào trước code bước 3, thêm 1 </b:if> vào sau nó nữa.

Reply
9

Cái này phù hợp với blog có nhiều CTV.

Reply
11

Thủ thuật này hay lắm, tự nhận dạng được tác giả là điều rất hay khi blog có nhiều quản trị hay CTV

Reply
12

Preview, please!

Reply
13

Thay vì lấy ảnh của quản trị viên hoặc cộng tác viên thì có thể cải tiến thành lấy ảnh theo nhãn tùy chỉnh được không bạn?
VD: với bài viết có nhãn "video" thì sẽ có 1 icon video hiện bên cạnh tiêu đề, và có nhãn "Hot" thì hiện thị icon Hot, hoặc "New" thì icon new..v.v...?

Reply
14

Lấy được thôi, nhưng có 20 nhãn thì bạn cũng thiết kế ra 20 icon à, thêm bớt nhãn nào lại cập nhật code lại bằng tay, muốn dùng temp này cho blog khác lại phải sửa lại. Nó rất là thủ công.

Reply
20

Không thủ công lắm đâu. Vì như VD trên nếu ta thêm 1lệnh khác là nếu bài đăng không thuộc 1trong các nhãn trên thì cho hiện thị ra 1ảnh cố định. Không biết mình nói có đúng kô nữa. :D

Reply
15

Bân việc quá, ít ghé thăm web bác. Bác khỏe chứ? Dạo này web ít thông tin hữu ích cho anh em quá nhé!

Bác Duy giúp mình chuyện này nhé: Hiện tại mình muốn thể hiện wiget bài viết theo nhãn bên sidebar mà các bài viết đó hiện hình + tiêu đề và cuộn ngang như hình demo này: http://2.bp.blogspot.com/-90y2AaGw57k/UXTZQHIWS_I/AAAAAAAAb0c/pBjbaQX-mjw/s1600/hinh+bai+viet+demo.jpg giống như web saigonamthuc.vn thì làm sao?

Bác hướng dẫn và fix giúp mình nhé! Thanks

Reply
18

Sorry, mình chưa làm theo yêu cầu :D

Reply
21

Nice. But I think it would be better if it's directed to the /summary instead of /default, or add a &max-results=1. This will prevent you from loading a full post content.

Then maybe someday, will you have an idea to get list of comment avatar URL in current post for single feed request, then insert each of them to the right custom avatar image container?
The <data:comment.authorAvatarImage/> is sucks :\

Reply
22

Yes, thank you Taufik. summary better than default.

I hate <data:comment.authorAvatarImage/> too :D. Do you have any idea?

Reply
23

With this way I can access Blogger comments feed from the current post with ID `7720068320211277752`, but it is reversed:

http://blog_name.blogspot.com/feeds/7720068320211277752/comments/default?alt=json

Inside the JSON feed, there is an object that contain permalink URL permalink of the comment like this:

http://blog_name.blogspot.com/2013/04/confirm-keyword.html?showComment\u003d1367149464706#c6838770715841648596

The bolder text is the comment ID, so I think I can create an avatar container like this inside the template:

<div class='avatar-image-container' expr:id='&quot;avatar-&quot; + data:comment.id'>

So, I wish I can put the comment avatar from JSON into the container. But I don't know how to call document.getElementById safely, just limited to the length of the existing avatars based on the bold string permalink:

for ( ... ) {
document.getElementById('avatar-' + cmId).innerHTML = '<img src="' + avaImg + '">';
}

Reply
25

Hi Taufik, better than you used items = <data:post.commentJso/>; and get avatar with items[i].author.avatarUrl, though it is heavy :D. With feed you one more query.

Reply
26

Never thought about it, I am also not sure what would happen if the number of comments has exceeded 200+. But I've already made ​​it.

I am currently using JQuery, but this could be easily converted into JavaScript, the snippet something like this:

var a = $('#cm_total').text(),
b = window.location.search,
c = (b && b.indexOf('commentPage=') !== -1) ? b.replace(/.*?commentPage=([0-9]+).*/, "$1") : 1,
d = <data:post.id/>;
$.get('http://' + window.location.hostname + '/feeds/' + d + '/comments/summary?alt=json-in-script&start-index=' + c + '&max-results=' + a, {}, function(x) {
if ("entry" in x.feed) {
var et = x.feed.entry;
for (var i = 0, len = et.length; i < len; i++) {
$('#avatar-' + et[i].id.$t.split('.post-')[1]).html('<img src="' + et[i].author[0].gd$image.src.replace(/\/s[0-9]+(\-c)?\//,"/s45-c/") + '">');
}
}
}, "jsonp");


You can check the source code of my page ⇒ http://www.dte.web.id/2013/04/membuat-navigasi-halaman-ajax-pada.html
There's no avatar markup in it except <div class='avatar-image-container vcard' id='avatar-XXXXX'></div>.

Reply
28

What's the difference between <data:comment.authorAvatarImage/> and feed? What's better if used feed, because feed is very heavy.

30

This is just an opinion based on the basic thing, but I think the avatar from the data:comment.authorAvatarImage usually have a picture with large resolution that is not reduced. So it will make you download image files with dimensions that are not proportional to its size.

Feed is a JSON, and JSON is a text. Text is lighter than the avatar image(s). We can adjust the resolution of the avatars from the feed safely. (At least before Blogger willing to improve the resolution of data:comment.authorAvatarImage).

You might be able to change the resolution of the data:comment.authorAvatarImage as well (like you did), but frequently modern browser will download the images twice.

I don't know... maybe this is not an important thing. And I can't say that my blog is lightweight :p

33

The avatars are displayed by js file (www.blogger.com/static/v1/widgets/2990768181-widgets.js) and I remove it :D. Now, the avatar is load only one time with small size.

24

Doh.. Just got the idea... !

Reply
27

chào duy! cảm ơn bạn đã chia sẻ 1 bài viết hay.
bạn cho mình hỏi 1 chút là làm sao để đổi avatar mặc định của comments blogger(no avatar)? Thanks!

Reply
29

Bạn cho hình minh họa là thay đổi cái gì.

Reply
31

đổi avatar defaut của blog?
http://i.imgur.com/zePJ3UH.jpg

Reply
32

thiếu 1 ý nữa là khi người comment dùng avatar mặc định của các blog đê cm

Reply
34

Có 2 hệ thống comment mới và cũ, cách thay đổi sẽ khác nhau. Nhưng mà mình nghĩ để mặc định như vậy cũng có sao đâu, thay đổi làm gì cho phải thêm code.

Reply
35

ok, cảm ơn bạn!

Reply
Nặc danh 5/5/13 21:55
36

cái explain widget trong bản tiếng việt là gì anh nhỉ em tìm không ra

Reply
37

Mình toàn bấm vào dấu Tam giác đen đen cạnh chữ b skin để mở rộng @@

Reply
38

Sao ko có demo online để xem, nhìn ảnh chưa trực quan lắm Duy ơi :D

Reply
39

Chào Duy!
Cho mình hỏi bạn một vấn đề liên quan đến bài viết này một chút. Hiện tại blog của mình đang sử dụng template MyTimeline của MKR. Và mình đã áp dụng cách này của bạn để thay thế cho avatar mặc định của tác giả bởi blog của mình có vài tác giả và mình muốn nó tự động lấy avatar. Tuy nhiên chỉ được những bài đầu tiên, sau khi mình click vào Load more posts thì những bài sau đó không hiển thị avatar nữa. Bạn có thể chỉ cho mình sai ở đâu không? Nếu có thời gian bạn xem hộ mình tại blog TrollVL nha!
Và đây là hình ảnh mình mô tả lại lỗi mình gặp phải
Cảm ơn nhiều!

Reply
40

Khi nào rảnh giúp mình về vấn đề này chút nhé Duy :)

Reply
41

Tốc dộ load có bị giảm nhiều ko bạn oiw

Reply
42

bác ơi bác có thể giúp em tạo comment phân cấp dk ko ạ @@ em lang thang trên google từ sáng h làm theo hd mà ko dk ,dk cái này mất cái kia ,nếu có phân cấp thì lại có thêm mấy cái biểu tượng biểu cảm trong khi em đã có mấy cái emotions trước rồi @@ ,mà có khi có phân cấp rồi thì lại ko xài dk emotions ,em làm theo hd mấy bài bên namka blogspot ấy bác :D (làm mãi từ sáng tới h vẫn cứ bị những trường hợp như vậy :(( ,em gửi bác cái xml của em : http://www.mediafire.com/download/983dd5em5eevc3p/template+9-12-13.xml ,còn đây là địa chỉ url blog http://congdongl3.blogspot.com/ ,mong bác giúp dùm ^^

Reply
43

Dạo này thấy Duy êm ắng thế nhỉ

Reply

Đăng nhận xét

Cancel reply

• Những nhận xét spam sẽ bị xóa.
• Public tài khoản Blogger để được trợ giúp.
• Nặc danh thường không được chào đón.