Trang chủ \ 07:38

Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến

Như đã đề cập đến trong bài đăng trước, nếu hiểu được những đoạn mã của widget do Blogger cung cấp chúng ta hoàn toàn có thể tùy biến theo ý mình. PopularPosts là 1 widget được Blogger đưa vào dùng thử nghiệm gần đây và được nhiều người đón nhận, đây là widget cho biết những bài đăng phổ biến được nhiều người đọc. Ngoài 3 dạng thống kê: 7 ngày qua, 30 ngày qua và mọi lúc nó có 4 kiểu hiển thị là: chỉ mình tiêu đề bài đăng, tiêu đề bài đăng và đoạn trích dẫn, tiêu đề bài đăng và hình ảnh, tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh. Thủ thuật sau đây sẽ hiển thị PopularPosts với tiêu đề bài đăng và hình ảnh, còn đoạn trích dẫn sẽ hiển thị khi đưa chuột vào tiêu đề.

PopularPosts Title

Để làm được vậy chúng ta quan tâm tới đoạn mã của kiểu hiển thị thứ 4. Hãy chắc chắn trên blog của bạn đã có widget PopularPosts này, đánh dấu vào lựa chọn kèm theo hình ảnh thu nhỏ và trích đoạn. Kiểu thống kê thì tùy bạn chọn 1 trong 3 kiểu: 7 ngày qua, 30 ngày qua hay mọi lúc. Lưu thiết lập và chọn tải template về máy để tiến hành chỉnh sửa (bạn có thể chỉnh trực tiếp trên Blogger nhưng sẽ dễ dàng hơn nếu dùng một trình text editor chuyên nghiệp, ngoài ra thì việc chỉnh trên Blogger sẽ gây lỗi font với blog Tiếng Việt).

Mở template và tìm với từ khóa PopularPosts1. Trong đoạn mã của widget này có 4 đoạn mà Blogger đã chú thích: <!-- (1) No snippet/thumbnail -->, <!-- (2) Show only snippets -->, <!-- (3) Show only thumbnails -->, <!-- (4) Show snippets and thumbnails -->. Trong khuôn khổ thủ thuật của bài đăng này chúng ta quan tâm đến đoạn thứ 4, đó là nơi chứa mã của kiểu hiển thị tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh. Dưới đây là đoạn mã chúng ta cần quan tâm:

<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
    <b:if cond='data:post.thumbnail'>
        <div class='item-thumbnail'>
            <a expr:href='data:post.href' target='_blank'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a>
        </div>
    </b:if>
    <div class='item-title'>
        <a expr:href='data:post.href'><data:post.title/></a>
    </div>
    <div class='item-snippet'>
        <data:post.snippet/>
    </div>
</div>
Chú thích:
  • data:post.thumbnail: Địa chỉ của ảnh thứ nhất trong bài đăng được Blogger resize (thay s72-c vào đường dẫn).
  • data:thumbnailSize: Kích thước ảnh mà Blogger resize, là ảnh hình vuông nên bao gồm luôn cả chiều cao và chiều rộng.
  • data:post.href: Địa chỉ của bài đăng.
  • data:post.title: Tiêu đề của bài đăng.
  • data:post.snippet: Đoạn trích dẫn của bài đăng.

Hoạt động của đoạn mã này:
Đầu tiên sẽ xem xem có địa chỉ ảnh cho bài đăng phổ biến này hay không qua lệnh diều kiện <b:if cond='data:post.thumbnail'>. Nếu đúng, một thẻ div với thành phần bên trong là thẻ img chứa địa chỉ ảnh có liên kết tới địa chỉ của bài đăng được xuất hiện, bài đăng nào không có ảnh thì bỏ qua. Tiếp theo sau đó là 2 thẻ div lần lượt chứa tiêu đề bài đăng có liên kết tới địa chỉ của bài đăng <a expr:href='data:post.href'><data:post.title/></a> và đoạn trích dẫn <data:post.snippet/>.

Bây giờ chúng ta sẽ sửa lại đoạn mã này theo hướng hiển thị tiêu đề bài đăng với title là đoạn trích dẫn và hình ảnh với kích thước tùy chọn, loại bỏ đi liên kết tới địa chỉ của bài đăng khi click vào ảnh, thêm thuộc tính alt là tiêu đề bài đăng cho ảnh này. Một vấn đề nữa là khi dùng trình duyệt từ IE7 trở về trước thì tiêu đề bài đăng bị thụt xuống một đoạn so với ảnh.


PopularPosts Eror IE

Để hiển thị tốt trên phiên bản trình duyệt này chúng ta đưa hình ảnh và tiêu đề bài đăng vào cùng 1 thẻ div. Đoạn mã trên được viết lại như sau:

<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
    <div class='item-title'>
        <b:if cond='data:post.thumbnail'>
            <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail' border='0' width='38px' height='38px'/>
        </b:if>
        <a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
    </div>
</div>
Lưu lại và tải template lên Blogger.

Ảnh do Blogger resize có kích thước là 72x72 pixels sẽ mất cân đối khi hiển thị chỉ cùng với tiêu đề bài đăng. Đoạn mã trên đặt lại là 38x38 pixels, bạn tùy chỉnh cho phù hợp với blog của mình. Một điều mình mới phát hiện và bổ xung thêm vào đây là ảnh của bài đăng phải được upload thông qua công cụ Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải có s1600, s800... thì công cụ resize của Blogger mới hoạt động, khi đó ảnh mới xuất hiện trên widget PopularPosts.

Có thể thêm thuộc tính float:right cho class item-thumbnail để ảnh hiển thị bên phải.

Với 3 kiểu hiển thị còn lại có ít thuộc tính hơn, tùy theo ý thích mà bạn chỉnh sửa cho phù hợp nếu muốn.

Một điều lạ là ở đoạn trích dẫn Blogger chỉ quan tâm xem bao nhiêu ký tự rồi ngắt (khoảng 140 ký tự) mà không chú ý đã gặp ký tự trống hay chưa, dẫn đến có câu bị mất vài từ trở nên rất vô nghĩa.
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ẻ

75

Nhận xét
1

Bác code prO quá. Nhìn theme bác kết quá đi mất.

Reply
2

Anh em trôm temp này xài đê :D

Reply
4

Bác nhái lại của ai thế?
Em chưa thấy có bao giờ.
Bác design lại trên nền thesis share được như thế này là prO lắm rồi. Em muốn học code mà chẳng biết bắt đầu từ đâu đây? học html trước à bác.

Reply
5

theme đẹp. code pro :D

Reply
6

Lạ nhỉ ! Mình làm theo mà không thành công ! :-?

Reply
7

@Quan@wanlunblog.com Là bản Thesis for Blogger mà Anup share thôi, cải tạo đi khá nhiều, bác chưa thấy là phải :D. HTML thì bác cần biết những thẻ cơ bản, còn giao diện xem thêm CSS là OK.

Reply
8

@D.N.H Bạn đã chọn kèm theo hình ảnh thu nhỏ và trích dẫn ở widget chưa?

Reply
9

blog nhìn pro quá, ngoài cái comment form này ra thì đều giống wp

Reply
10

Comment form là một frame bên ngoài nên không thể chỉnh sửa được bác ạ, mà đang dùng Blogger thì để chút gì đó của Blogger chứ cứ nhái hết WP không ổn. Blog của bác không có nhóm Nightwish à, em thích mỗi thể loại Symphonic Metal, mang vẻ huyền bí đến từ Opera và sự mạnh mẻ của Rock :P

Reply
Nặc danh 18/12/10 14:04
11

Theme rất đẹp, Công lực Code của bác đúng là thâm hậu.

Reply
12

Mình thích nhất là tốc độ load page thôi. Còn giao diện cũng bình thường ==> 9.5đ:P

Reply
14

1 theme blogspot được cấu thành bởi những thành phần nào hả bác?
Css, html? còn gì nữa không nhỉ

Reply
15

@Quan@wanlunblog.com CSS để định hình layout, cũng không thể thiếu các js để hack các tiện ích (chủ yếu là lấy dữ liệu từ feed). Nhiều code nhất là widget Blog, đây là widget được mọi người sửa nhiều nhất. Những đoạn mã nhỏ được đặt trong thẻ <b:includable>, các thẻ này đặt trong thẻ <b:widget>. Khoanh vùng tìm hiểu dần là OK, sẽ thấy nó không phức tạp chút nào :)

Reply
16

bạn chia sẻ cái thủ thuật làm banner header chuyển động được không? :))

Reply
17

Của bác đây

<script src='http://duyphaminfo.googlecode.com/svn/trunk/slider.js' type='text/javascript'>
</script>

<script type='text/javascript'>

$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>


Bác xem trong file slider.js hướng dẫn hoặc view code banner blog của em để chèn vào banner.

Reply
18

Quên mất là cái này sử dụng jQuery nên thêm cái js này nữa

<script src='http://duyphaminfo.googlecode.com/svn/trunk/jquery-1.4.2.js' type='text/javascript'></script>

Reply
19

cảm ơn bạn :))

Reply
20

mình chèn 2 đoạn script trên vào theme, sau đó cho mấy cái banner vào thẻ < div id='slider' > nhưng sao không thấy nó chạy nhỉ? mong bạn hướng dẫn thêm, thanks!

Reply
21

@Rùa Biển code của nó dưới đây:

<div id='slider'>
<ul>
<li>
<a href='link_site' target='_blank'><img alt='' src='link_anh'/></a>
</li>
<li>
<a href='link_site' target='_blank'><img alt='' src='link_anh'/></a>
</li>
</ul>
</div>


Bác khai báo thêm thuộc tính sau cho id slider:

#slider{float:right;width:468px;height:60px;overflow:hidden}
#slider ul{list-style-type:none}

Reply
22

cảm ơn bạn, mình thiếu phần khai báo cho thuộc tính slider, giờ thì tốt rồi :))

Reply
23

Vừa áp dụng thử trên blog, good tip =D>

Reply
24

@Taiki Tempalte đó đẹp. Mấy hôm nay cũng đang làm 1 template mới ít hiệu ứng hơn và hình ảnh hơn :)

Reply
25

Cái temp này cũng đẹp với nhẹ mà, tối giản hơn nữa chắc load nhanh như điện quá :))

Reply
26

Thủ thuật hay lắm ! Thanks pro !:))

Reply
27

em đã làm được cho blog của mình! cảm ơn anh nhiều

Reply
28

@Mèo Blog Template Nexis mình làm sẵn cái đó rồi mà bạn.

Reply
29

Tạo border cho ảnh có cả màu thì phải chỉnh trong phần border như thế nào hả anh Duy?

Reply
30

@Linh Dung VnMart Bạn bỏ border='0' đi và thêm vào CSS của blog đoạn .item-thumbnail{border:1px solid #DDD}
Thay màu theo ý bạn. K hiểu có đúng ý bạn hỏi k, mình k hiểu lắm câu hỏi "Tạo border cho ảnh có cả màu".

Reply
31

Em làm được rồi anh Duy ạ! Vì trước đó ảnh thumbnail trong blog em không có border nên nhìn không được đẹp lắm! Em có chỉnh sửa trong phần border='0' nhưng không được. View-source blog của anh thì đã tìm ra đoạn code tạo border đó là: .sidebar .item-thumbnail{border:1px solid #CCC;width:36px;height:36px;padding:0}
Thanks anh đã giải đáp rất nhiệt tình! :) :D

Reply
32

Có một ván đề nhỏ bạn ơi mình đã Test thủ là những bài nào mà ảnh nằm phía bên tay trái thì không hiển thị [-( chỉ những bài ảnh nằm bên tay phải mới hiện thị =D>. Bạn có thể Fix lỗi đó được Hem vì mình toàn để bên tay phải không ak @-)

Reply
33

@Fairstar Nó k liên quan đến ảnh bên trái hay phải mà ảnh phải up lên picasa và URL có s1600... mà thôi, blog mình cũng luôn hiển thị ảnh bên phải đấy thôi.

Reply
34

Cho em hỏi là trong thủ thuật này, mình có thể không cho hiển thị những bài viết của nhãn nào đó được không anh?

Reply
35

@Linh DungWidget Popular posts k hoạt động với code label nên k làm được vậy.

Reply
36

@Duy PhamMấy cái này chèn vào đâu để có được banner đông hả anh??

Reply
37

anh có thể tùy biến cái code bài đăng phổ biến cho nó đẹp như mấy cái bài viết ngẫu nhiên, bài viết mới cho nó đẹp được ko anh?

Reply
38

Bác Duy cho em hỏi, khi em đổi Blog sang tên khác, thì em phải bằng lưu lại các bài viết sau đó nhập vào theo cách của Blogger thì sau khi nhập vào thì tiện ích PopularPosts Không còn hoạt động nữa, em viết bài mới nó cũng không hoạt động kể cả template mặc định hay template download free trên mạng cũng vậy
Bác có cách nào thì giúp em với

Reply
39

@Tiều PhuĐổi domain blog à? Popular Posts cần thời gian để các bài viết có lượt truy cập mới hiển thị, lượt truy cập nhỏ hơn lượt truy cập các bài viết đã xóa cũng sẽ k hiển thị.

Reply
40

@Duy Pham
Ra vậy, em cứ loay hoay hoài tưởng blog của mình làm sao
thank bác ! =D>

Reply
41

Bác Duy có tiện ích nào để hiện thị bài đăng cho một nhãn không nhỉ? nếu có cả hai cái bài đăng phổ biến cho nhãn và bài đăng mới nhất cho nhãn càng tốt ? Em tham khảo bên thuthuatblogger.info thì không có hình ảnh.
Dù sao cũng kết thủ thuật của bác hơn

Reply
42

@Tiều PhuK có popular posts cho nhãn đâu bạn, bài đăng mới cho nhãn thì sửa code bài đăng mới nhất mình có nói ở comment trong bài đó rồi.

Reply
43

Comment chỗ nào nhỉ, em tìm không thấy, anh vui lòng cho Link hộ em cái, thank bác

Reply
44

@Tiều PhuCách thực hiện cho bài viết mới của 1 nhãn cũng tương tự http://blog.duypham.info/2011/10/random-posts-for-blogger-high-speed.html#c1447121055307052562

Reply
45

Cho tớ hỏi tí,cái bài đăng phổ biến của tớ ở trên có cách nào thực hiện được cái này không.
Thủ thuật này tớ chôm được ở bên dưới cái comment của pác Nhật Hà:)):)):)):)):)):)):)):)):)):)):))

Reply
Nặc danh 10/5/12 22:26
46

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

Reply
47

Chỉ dùm mình cách bỏ dấu chấm ở đầu tiêu đề "bài đăng phổ biến" với, với làm sao để hiện lên tên của tiện ích "bài đăng phổ biến" nữa
Cảm ơn Duy :)

Reply
48

.popular-posts ul{list-style-type:none}

xóa widget đó đi rồi add lại và ghi tiêu đề.

Reply
49

Bác duy giúp em 1 chút đc ko ạ.
Popular post của em bị lệch ko thẳng hàng, chỉnh sao cho đc ạ.
Thứ 2 là làm cách nào loại bỏ ô tròn nhỏ trước widget ạ.
Thanks bác trước.

Reply
52

Đọc comment ngay bên trên.

Reply
50

em làm như bác hướng dẫn nhưng nó ko hiện lại hình nhỏ mà cũng như cũ +_+

Reply
51

Bạn phàn nàn rất nhiều nhưng k mở blog? Mình k support cho những blog như vậy.

Reply
53

Xin lỗi bạn nhé, tại blog mình nó bị 1 số trục trặc nên mình mới đóng để sửa chữa. Hôm nay, mình đã mở lại. Thông cảm nhé !

Reply
54

Có cách nào mà popular post support hiển thị cả thumnail của những ảnh ở Host khác không DuyPham :D.

Reply
55

Cái này bó tay rồi... :p

Reply
56

:D - Thế là không có cách nào àh HHV :|

Reply
57

Chào bạn!
Mình áp dụng cách này của bạn và đã thành công. Tuy nhiên khi mình thêm hiệu ứng tooltip thì xảy ra trường hợp như hình sau
http://3.bp.blogspot.com/-p77myo8MjeA/UUCQFxuWfbI/AAAAAAAALQI/SWXR8A5PLSs/s1600/bide.jpg
Bạn có thể nào giúp mình khắc phục tình trạng này được không?
Blog của mình là http://www.trollvl.com
Cảm ơn nhiều!

Reply
58

Bạn bỏ thuộc tính overflow:hidden ở sidebar đi.

Reply
59

Cảm ơn bạn nhiều nha! Mình làm được rồi :) Mò cả buổi không ra, mình cứ thay đổi xoay quanh thuộc tính của mấy tab nên không được :D

Reply
60

MÌNH ÁP DỤNG NHƯNG CÓ BỊ MỘT LỖI LÀ MỘT SỐ TIÊU ĐỀ BỊ MẤT HÌNH ẢNH HIỂN THỊ CÁI CÓ ẢNH HIỂN THỊ CÁI KHÔNG

Reply
62

Ảnh bạn phải tự up lên picasa.

Reply
61

bạn vào nhìn xem lỗi gì chỉ mình cách sửa nhé http://ceodacdat.blogspot.com/

Reply
63

NHỜ DUYPHAM CHỈ CÁCH SỬA CÁI NÀY VỚI. MỚI ÁP DỤNG CÁI NÀY TỪ NOCT http://noct-land.blogspot.com/2011/03/tao-tab-noi-dung-on-gian-voi-jquery.html
ÁP DỤNG XONG CÁI TAB BÀI ĐĂNG PHỔ BIẾN CỦA MÌNH HÌNH ẢNH ĐẦU BÀI ĐĂNG NÓ LẠI TO RA (HÌNH NHƯ LẠI MẶC ĐỊNH 72*72 PX) NHỜ DUY PHẠM CHỈ CÁCH CHO TAB ĐÓ VỀ NHỎ GỌN NHƯ BÀI NÀY VỚI.THANK

Reply
64

Bạn tìm trong temp đoạn expr:width='data:thumbnailSize' thay thành width='36'expr:height='data:thumbnailSize' thành height='36'

36 là kích thước thubnail, bạn thay thành kích thước nhỏ hoặc to hơn theo ý.

Reply
65

Thành công.
Thank You!

Reply
66

tks
ah xem thu ne buiduchaoblog.blogspot.com

Reply
67

Có cách nào giảm ký tự đoạn trích dẫn không nhỉ @@

Reply
68

Bác Duy đẹp trai chỉ em cách thêm thông tin ngày đăng bài và số comment (như ở widget Bài mới, bài ngẫu nhiên of bác) vào widget này với (cho 3 widget đồng bộ kiểu hiển thị). Thank bác ;)

Reply
69

Thêm những cái đó cũng được nhưng mà nặng nề lắm, chậm blog đi nhiều bác ạ

Reply
70

Nếu đc bác chỉ giúp em cái :D

Reply
71

Tiện ích PopularPosts giờ Blogger chỉ hiển thị tối đa 7 bài ư?

Reply
72

em xem vẫn là 10 bài mà bác Thọ

Reply
73

Bên blog mình và bên bác Duy chỉ thấy có 7 thui. Mặc dù mình để hiển thị là 10. Các blog khác thì chưa rõ.

Còn đặt không hiển thị hình ảnh vẫn thấy đủ 10 :D

Reply
74

có thể lỗi hệ thống tạm thời thôi , của em vẫn bt như cân đường hộp sữa bác ạ :))

Reply
75

Lỗi của Blogger mà bác. Chọn xem 7 ngày thì nó chỉ hiện 7 bài, chọn xem 30 ngày thì chỉ hiện 10 bài. Còn mỗi trường hợp xem tất cả thời gian là hoạt động đúng số lượng bài mình cài đặ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.