Trang chủ \5.2.14

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.

Hướng dẫn thủ thuật Blogger, Blogspot

54

Nhận xét
1

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

Reply Xóa nhận xét
2

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

Reply Xóa nhận xét
3

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

Reply Xóa nhận xét
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 Xóa nhận xét
5

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

Reply Xóa nhận xét
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 Xóa nhận xét
8

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

Reply Xóa nhận xét
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 Xóa nhận xét
13

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

Reply Xóa nhận xét
Nặc danh 10/2/14 22:50
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 Xóa nhận xét
9

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

Reply Xóa nhận xét
11

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

Reply Xóa nhận xét
12

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

Reply Xóa nhận xét
15

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

Reply Xóa nhận xét
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 Xóa nhận xét
17

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

Reply Xóa nhận xét
20

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

Reply Xóa nhận xét
18

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

Reply Xóa nhận xét
19

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

Reply Xóa nhận xét
22

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

NVVT.

Reply Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
31

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

Reply Xóa nhận xét
44

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

Reply Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
37

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

Reply Xóa nhận xét
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 Xóa nhận xét
39

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

Reply Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
49

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

Reply Xóa nhận xét
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 Xóa nhận xét
51

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

Reply Xóa nhận xét
52

Mình có thắc mắc này và định làm từ lâu mà hôm nay mới nhớ ra:

Khi click vào tên của người đăng bài là nó chuyển hướng ra blogger.com/profile, vậy mình muốn click vào tên của người đăng bài nó đến trang tĩnh nào đó (vd như người đăng bài, hay giới thiệu...) , và nếu chạy được cả với hồ không công khai thì tuyệt.

Cảm ơn Duy

Reply Xóa nhận xét
53

Với mỗi tác giả bác phải tự tạo một static page tương ứng, và static page này có url là dãy số class tương ứng với mỗi tác giả thì sẽ dc. Code trong temp sẽ tự động

Reply Xóa nhận xét
54

Bác toàn dùng từ chuyên môn như này sao em hiểu. Huhu

Reply Xóa nhận xét

Đăng nhận xét

Cancel