Trang chủ \ 17:40

Author box cho Blogger tự động cập nhật thông tin

Cuối cùng thì Blogger cũng có Author box một cách tự động. Hãy chào mừng 2 thẻ Blogger XML mới: <data:post.authorPhoto.url/><data:post.authorAboutMe/>. Đây chính là url ảnh đại diện và thông tin giới thiệu về người viết bài được lấy từ Blogger profile hoặc Google profile. Từ giờ những thay đổi profile như sửa ảnh đại diện, thêm bớt thông tin hoặc blog có thêm nhiều cộng tác viên thì Author box sẽ tự động cập nhật theo, bạn không còn phải vào chỉnh sửa thủ công trong template nữa. Ngoài ra Author box này còn phân biệt được người viết bài đang dùng Blogger profile hay đã nâng cấp lên Google profile để hiển thị icon tương ứng bên cạnh tên.

author box

Bước 1: Bật chức năng xem thông tin người viết bài: Chọn chỉnh sửa widget Blog Posts và tích chọn vào Show Author Profile Below Post.

widget blog1

widget blog1 edit

Bước 2: Thêm đoạn mã dưới đây vào trước thẻ <div class='post-footer'> thứ 2 trong template của bạn.
<b:if cond='data:blog.pageType == "item"'>
<style>
.author-box{margin:10px 0;background:#357ae8}
.author-avatar{float:left;width:20%;height:auto}
.author-info{float:left;padding-left:4%;width:75%}
.author-name{padding-left:25px;color:#eee!important}
.author-name h3{display:inline;margin:0;padding:0;font-size:20px}
.author-about{margin:0;padding:10px 0;color:#000!important}
</style>
<div class='author-box'>
 <!---->&lt;img alt='<data:post.author/>' class='author-avatar' src='<b:if cond='data:post.authorPhoto.url'><data:post.authorPhoto.url/><b:else/>https://lh3.googleusercontent.com/uFp_tsTJboUY7kue5XAsGA=s96</b:if>' title='<data:post.author/>'/&gt;<!---->
 <div class='author-info'>
 <!---->&lt;a class='author-name' style='background:left no-repeat url(<b:if cond='data:post.authorProfileUrl'>http://www.google.com/images/icons/ui/gprofile_button-16.png)' href='<data:post.authorProfileUrl/><b:else/>http://www.blogger.com/img/logo-16.png)' href='<data:post.authorUrl/></b:if>' rel='author' target='_blank' title='<data:top.authorLabel/>&amp;nbsp;<data:post.author/>'&gt;<!----><h3><data:post.author/></h3><!---->&lt;/a&gt;<!---->
 <b:if cond='data:post.authorAboutMe'>
  <p class='author-about'><data:post.authorAboutMe/></p>
 </b:if>
</div>
<div style='clear:both'/>
</div>
</b:if>

Nhờ thay < thành &lt;> thành &gt; mà thẻ <b:if> đặt được vào trong thẻ <img>, nhờ đó đoạn mã trở nên ngắn gọn hơn. Đây là một kỹ thuật rút gọn đoạn mã mà giờ mới có dịp giới thiệu, hi vọng có ích cho các bạn.
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ẻ

51

Nhận xét
1

Hay đó bạn, lâu rồi mới trở lại nhỉ :)

Reply
2

Really interested to know about how could you get this information... :o

Reply
3

Sometimes, I read code in Simple template and find new update Blogger XML.

Reply
4

Oh. But knowing quickly about when Blogger renew their template contents is requires special hunch ability. I will add this element to my Blogger XML table then...

Reply
5

Lâu lâu mới thấy bác Duy đăng bài mới :)

Reply
6

Tranh thủ nghỉ tết làm 1 bài, mai lại đi làm triền miên mất rồi :(

Reply
7

cái này hot :D

Reply
8

Chào mừng bác về trái đất, tưởng định cư trên sao hỏa rồi :D

Reply
10

năm rồi chăm chút cái site khác nên bỏ bê blog cũ, giờ rãnh rồi nên tính viết lại thủ thuật :D

Reply
13

Thế giờ site bác là gì, Blogger giờ này yên quá.

Reply
14

Lâu rồi cũng không viết blog cũng định viết lại blog về thủ thuật giống bác Noct. Chỉ sợ không có thời gian thôi... :)

Reply
9

Chào mừng cả 2 bác trở lại với đúng!...

Reply
11

Không được bóc tem :v Chán nhể =))

Reply
12

Chúc mừng năm mới :D

Reply
15

Cái này hay quá. Mình đã áp dụng thành công! hehe

Reply
16

Cái Author Box này xuất hiện coi như cũng là một bước phát triển mới của blogger nhà ta rồi mặc dù nhìn nó vẫn còn hơi xấu xấu nhưng có vẫn còn hơn không :)
PS: Duy trở lại Noct cũng trở lại. Coi bộ năm nay blogspot sẽ có nhiều tiến triển mới đây.

Reply
17

Nó có xấu hay không thì do chúng ta trang trí nó ra như thế nào thôi :)

Reply
20

ko xấu tí nào đâu, rất đẹp đấy, em đang áp dụng mờ

Reply
18

Nice tips, công nhận Duy Phạm hay thật ^^

Reply
19

Chào mừng bác trở lại

Reply
21

wow, amazing :o

Reply
22

Làm sao để liên kết với website của a được ạ ?

NVVT.

Reply
23

Sorry anh Duy, Không liên quan tới chủ đề nhưng anh có thể giúp em fix lỗi này dc không ạ Lỗi: "Text run is not in Unicode Normalization Form C"
https://lh3.googleusercontent.com/46ViP3a6KGnbILXFDXJr1BCTKALYgqaQGA_EHXWufA=w694-h427-no
Mỗi khi em xuất bản một bài thì nó sẻ thêm một lỗi anh ạ. Cảm ơn anh.

Reply
24

Nhận xét này đã bị quản trị viên blog xóa.

Reply
25

DUy giúp mình sửa lỗi hiển thị PAGE với .Không biết mình xóa code nào trong mẫu mà mấy cái Page nó không hiện nội dung

8bro.com/p/gioi-thieu_7.html
8bro.com/p/lien-he.html

Reply
26

Nhận xét này đã bị quản trị viên blog xóa.

Reply
27

Hâm mộ bác Duy quá, em fake gần giống trang của bác luôn :3

Reply
28

Blogger dạo này chán như con gián chết. Chẳng hóng hớt được cái gì, temp mới cũng chẳng có luôn :p

Reply
31

Bác có ý tưởng gì độc độc k? Lâu lắm k viết bài rồi :(

Reply
44

Làm cái template cho anh em hóng hớt đê :v

Reply
29

Bác Duy hướng dẫn em làm cái phần phân trang được không :'(
Em contact nhưng không thấy bác rep hiu hiu ~~

Reply
30

Sorry, mình bận làm xa nhà lâu nay nên bỏ bê blog. Email giờ hàng trăm cái chưa đọc, nhìn mà phát hoảng :( Comment luôn ở đây đi

Reply
32

Các bài có label là HIDE em đã dùng code ẩn không cho hiện ở kiểu trang index, nhưng cái pagenavi nó vẫn đếm bài đã bị ẩn đó vào để phân trang, bây giờ em muốn pagenavi nó chỉ đếm những bài có label khác label HIDE để phân trang thì có cách nào để làm điều đó không nhỉ?

Ví dụ :

Blog em có tất cả 10 bài viết, muốn phân 3 bài 1 trang, mặc định nó sẽ tính như vầy :

Trang 1 :
Bài 1 label ABC
Bài 2 label ABC
Bài 3 label HIDE

Trang 2 :
Bài 4 label XYZ
Bài 5 label HIDE
Bài 6 label HTP

Trang 3 :
Bài 7 label HIDE
Bài 8 label XYZ
Bài 9 label FFF

Trang 4 :
Bài 10 label HTP

Tuy nhiên, do em đã ẩn các bài có label HIDE đi rồi nên em muốn nó thành như vầy :

Trang 1 :
Bài 1 label ABC
Bài 2 label ABC
Bài 4 label XYZ

Trang 2 :
Bài 6 label HTP
Bài 8 label XYZ
Bài 9 label FFF

Trang 3 :
Bài 10 label HTP

Nôm na là thế đó.

Cụ thể em làm blog truyện tranh bằng blogspot, muốn ẩn các post chứa link ảnh của mỗi chap, chỉ hiện cái post tổng hợp ở index (nhưng cái pagenavi nó đếm cả các post đã ẩn. T.T )

Reply
33

Sẽ làm dc nhưng là sử dụng js để hiển thị bài viết và phân trang, nó như kiểu sitemap dùng js hiển thị vậy. Load feed 5 bài mới chẳng hạn, search xem có bài nào có label hide k. Nếu có 2 bài chẳng hạn, lại load feef 2 bài tiếp theo xem có label hide k. Nếu k có sẽ hiển thị 3 bài kia và 2 bài mới load. Thuật toán là vậy, bắt tay vào code mới mệt :D

Reply
34

Kiểu này giống kiểu của blog fandung đây mà :D

Em trình còi nên hi vọng một ngày rảnh rỗi không xa bác sẽ chia sẻ bằng một bài viết trên blog bác nhé. Em sẽ hóng ở blog bác thường xuyên :p

Reply
35

Kiểu này giống kiểu của blog fandung đây mà :D

Em trình còi nên hi vọng một ngày rảnh rỗi không xa bác sẽ chia sẻ bằng một bài viết trên blog bác nhé. Em sẽ hóng ở blog bác thường xuyên :p

Reply
36

Em áp dụng cách này thì lôi được dữ liệu ra nhưng không biết làm sao để tạo được cái phân trang nữa.

fandung.blogspot.com/2012/02/ancdata-plugin-load-feed-blogger.html

Những post còn lại em không muốn ẩn thì em đặt chung 1 label rồi áp dụng code :

script src="http://www.maphim.net/feeds/posts/default/-/TÊN LABELEL?max-results=4&orderby=published&alt=json-in-script&callback=ancdata">

thành công nhưng còn cái pagenavi T.T

Reply
37

Phần layout của e không có thì phải là sao ạ?trang của e http://www.songdongian.com/

Reply
38

author-box này củng hay nhưng nó không đạt chuẩn HTML5 mình củng có viết code này đạt chuẩn HTML5 bác nào rảnh thì qua xem chơi

Reply
39

Bạn tìm cho mình xem tag nào ở code trên không theo HTML5

Reply
40

bạn cài vào một template nào chuẩn HTML5 rồi check tại validator.w3.org/ là biết à mình thử chèn code duy rồi, hình như là thuộc tính Style CSS nằm trong Javascript thì phải

Reply
41

style CSS nằm trong JS? JS nào ở đây vậy?
Check ở validator.w3.org chỉ dành kiểm tra toàn bộ web. Code mình đưa kia có mấy dòng nhìn lướt qua cũng dc, bạn bảo k chuẩn HTML5 thì làm ơn chỉ cho mình xem cái tag nào nó k đạt nào.

Reply
42

Error Line 1118, Column 7: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
<style>
Contexts in which element style may be used:
If the scoped attribute is absent: where metadata content is expected.
If the scoped attribute is absent: in a noscript element that is a child of a head element.
If the scoped attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace and style elements, and not as the child of an element whose content model is transparent.
Content model for element div:
Flow content.
Cái này nha duy

Reply
43

tag style không chấp nhận là nội dung của tag div. Đành chuyển css lên tag b:skin vậy.

Reply
45

Bác cho em xin cái code của tiện ích chia sẻ đê. Xin qua form liên lạc tối qua mà sáng nay mở email chưa thấy gì :v

Cảm ơn bác :)

Reply
46

Vào bằng đt nên lười gửi bác ơi. E dạo này đang dời xa laptop :(

Reply
47

Cho em cái code của Pinterest thui cũng được. Tìm trên mạng toàn thấy code của Pinterest có thêm cái .Js. Còn của bác thì không thấy.

Mong hàng của bác. Hôm nay mở email 2 lần để hóng :v

Reply
48

sử dụng lệnh điều kiện với <data:post.firstImageUrl> và thay url ảnh bằng tag đó nếu có ảnh, k có thì sử dụng ảnh mặc định.
Ngại làm thì bác đợi cuối tuần em về nhà mới gửi được.

Reply
49

Hôm nay thứ 7 rồi bác nhá. Mong lắm đó :v

Reply
50

Nếu hiện nay làm như vậy, đối với Blog thì có nguy hiểm ko hả Bác, nếu mà Blog dành cho dân SEO :D

Reply
51

Phải nói bạn này có nhiều bài viết quá chất!

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.