Trang chủ \10.12.10

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.

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

74

Nhận xét
1

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

Reply Xóa nhận xét
74

Cái này mình làm ko được nhe, giúp với!

Reply Xóa nhận xét
2

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

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

theme đẹp. code pro :D

Reply Xóa nhận xét
6

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

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

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

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

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

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

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

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

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

Reply Xóa nhận xét
27

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

Reply Xóa nhận xét
28

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

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

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

Reply Xóa nhận xét
36

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

Reply Xóa nhận xét
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 Xóa nhận xét
Nặc danh 29/12/11 21:29
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 Xóa nhận xét
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 Xóa nhận xét
Nặc danh 29/12/11 22:22
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 Xóa nhận xét
Nặc danh 1/1/12 12:05
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 Xóa nhận xét
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 Xóa nhận xét
Nặc danh 1/1/12 21:32
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 Xóa nhận xét
44

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 Xóa nhận xét
Nặc danh 10/5/12 22:26
45

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

Reply
46

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

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

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

Reply Xóa nhận xét
48

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

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

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

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

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

Reply Xóa nhận xét
54

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

Reply Xóa nhận xét
55

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

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

Reply Xóa nhận xét
57

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

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

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

Reply Xóa nhận xét
59

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

Reply Xóa nhận xét
61

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

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

Thành công.
Thank You!

Reply Xóa nhận xét
64

tks
ah xem thu ne buiduchaoblog.blogspot.com

Reply Xóa nhận xét
65

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

Reply Xóa nhận xét
66

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

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

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

Reply Xóa nhận xét
69

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

Reply Xóa nhận xét
70

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

Reply Xóa nhận xét
71

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

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

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

Đăng nhận xét

Cancel