• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo Read More tự động không dùng Javascript

29
24/01/2011

Phần lớn các blogspot hiện nay đều áp dụng thủ thuật tạo Read More tự động để hiển thị các bài viết mới nhất trên trang chủ, các trang nhãn và lưu trữ theo định dạng gồm ảnh đại diện và phần mô tả tóm tắt bài viết. Và chúng ta đều biết thì thủ thuật này phải dùng đến Javascript nên ít nhiều cũng ảnh hưởng đến tốc độ load trang.

Một bữa nọ ghé sang thăm blog của bạn Duy Phạm thấy có bài viết Auto readmore không sử dụng javascript cho Blogger. Tôi thấy tò mò nên đọc xem. Thì ra thủ thuật này tùy biến từ code của tiện ích Popular Posts của Blogger. Tôi nhận thấy đây cũng là một cách hay và cũng muốn phổ biến cho cộng đồng Blogger Việt. Tuy nhiên code của tôi khác một chút so với code của bạn Duy Phạm. Hy vọng với nỗ lực của Duy Phạm và Huỳnh Nhật Hà, từ nay cộng đồng Blogger sẽ phổ biến thuật ngữ Auto Readmore without Javascript. :68)

Dưới đây là hình minh họa kết quả sau khi áp dụng thủ thuật này.



Để làm được như vậy, bạn hãy thực hiện như sau. (Lưu ý nếu bạn đã áp dụng cách tạo Read More tự động sử dụng Javascript thì tháo nó ra khỏi Template trước khi áp dụng thủ thuật này)

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code sau đây trước dòng ]]></b:skin>.

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}
.item-snippet {color: #999; font-family:Arial; font-size: 12px;text-align:justify}
.jump-link {float:right}
.jump-link a,.jump-link a:visited{background:#444343;margin-right:4px;padding:4px 8px;color:#FFF;text-shadow:1px 1px 1px #000;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.jump-link a:hover,.jump-link a:active{background:#006666;color:#FFF;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}

Bước 2. Tìm <data:post.body/> và thay nó bằng đoạn code bên dưới.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/>
</b:if>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</span>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Lưu Template là OK.

Nếu bạn muốn ảnh đại diện nằm bên phải thì thay dòng

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}

Bằng dòng

.item-thumbnail {float:right;margin-left:15px;width:75px;height:70px}

Điểm chú ý trong code của tôi tùy biến là phần mô tả tóm tắt bài viết (snippet), văn bản được căn đều hai bên (nhờ sử dụng class item-snippet có định dạng text-align:justify).

{29 bình luậnAdd yours ?}

09:06:00, 25 thg 1, 2011

Chào Hùynh Nhật Hạ.
Tôi vừa đọc phần chỉ cách làm Read More "Tạo Read More tự động..."
Vui lòng cho tôi góp một ý kiến nhỏ về chỉ dẫn này.
Trang http://www.google.com/support/ có phần chỉ cách làm Read More không cần HTML hay Java.
rất đơn giản và dễ dùng...

Reply
11:12:00, 25 thg 1, 2011

Theo tôi được biết thì Blogger có tính năng jump break để tạo Readmore, không dùng Javascript là tốt rồi, nếu k dùng HTML nữa thì làm sao đây, chẳng lẽ dùng CSS được sao bạn??? :51)

Reply
11:00:00, 26 thg 1, 2011

Bài này rất hay, mình đã áp dụng vào blog http:www.nguontrithuc.tk của mình, cảm ơn bạn!

Reply
11:20:00, 26 thg 1, 2011

@Ly Nha Truc Được đấy bạn, nhưng góp ý một tí đối với blog bạn là trước thẻ <div class='jump-link'> nên thêm thẻ <br/> để xuống dòng link Đọc thêm cho nó đẹp :53)

Reply
11:17:00, 7 thg 2, 2011

Xin chào,

mình muốn chuyển phần đọc thêm qua bên phải nhìn cho tiện nên làm thế nào vậy bạn.

Xin cảm ơn

goldandforex168

Reply
黃日河
AUTHOR
13:05:00, 7 thg 2, 2011

Dòng .jump-link {float:right} làm cho chữ Đọc thêm dạt về bên phải rồi mà bạn

Reply
黃日河
AUTHOR
13:10:00, 7 thg 2, 2011

Trong blog của bạn, bạn dùng .jump-link {float:left} và .item-thumbnail {float:left; cho nên float lộn xộn, bạn nên sửa lại .jump-link {float:right}

Reply
20:07:00, 9 thg 2, 2011

Mình không biết đăng bài này ở đâu nên đăng ngay đề tài này, nếu sai mong bạn Hà thông cảm!
Bạn coi giùm code của mình bị lỗi như thế nào mà nó xuất hiện: http://www.nguontrithuc.tk/search/label/Truyen%20kiem%20hiep?page=1
Tự nhiên nó xuất hiện thêm 4 cái hồi ở dưới phân trang, mình kiếm hoài không ra, nhờ giúp mình!

Reply
20:21:00, 9 thg 2, 2011

@Binh Lee Lỗi này do Binh Lee áp dụng sai thủ thuật Phân trang cho trang chủ của blog Mothuthuat.com hoặc có thể do thủ thuật này không ổn định. Có lẽ mình sẽ giành thời gian nghiên cứu để cải tiến thủ thuật này.

Reply
20:44:00, 9 thg 2, 2011

@Huỳnh Nhật HàMình hiện đang xài cái phân trang của http://www.traidatmui.com, mình đã áp dụng nó cho nhãn riêng biệt, ví dụ như cái phân trang đó mình áp dụng cho nhãn "Truyện kiếm hiệp", nhưng chẳng hiểu 4 cái post đó sao nó tự nhiên xuất hiện nữa?

Reply
22:31:00, 9 thg 2, 2011

Cái phân trang bên traidatmui.com là lấy từ thủ thuật của mothuthuat.com đấy mà, code này chưa ổn định nên có lỗi thôi

Reply
12:56:00, 22 thg 2, 2011

anh oi lam sao de chen anh dai dien zay a? http://khosachtructuyen.blogspot.com/

Reply
14:07:00, 22 thg 2, 2011

@QUỲNH MAIMuốn chèn ảnh trong bài viết thì trước tiên em phải có 1 cái ảnh đại diện nào đó, khi ở chế độ đăng bài viết (Compose), click vào cái image nhỏ (insert image) rồi chọn ảnh để insert thôi mà.

Reply
13:33:00, 23 thg 2, 2011

cho em hỏi làm sao để phần nội dung tóm tắt kéo dài xuống dưới ảnh đại diện dc ah.phần nội dung tóm tắt của em chỉ hiện có 2 dòng à.

Reply
20:25:00, 23 thg 2, 2011

Do thủ thuật này không dùng javascript nên phần tóm tắt do Blogger tạo ra chỉ khoảng 140 chữ thôi nên chỉ có 2 dòng. Nếu em muốn phần tóm tắt nhiều phải dùng thủ thuật có javascript. Em đọc bài này nhé. :59)

Reply
09:32:00, 24 thg 3, 2011

dùng cái này ảnh nó hiện ra bị mờ đi phải ko bác ???

Reply
10:14:00, 24 thg 3, 2011

Ờ, có vẻ như thế, chưa để ý cách xử lý :51)

Reply
10:16:00, 24 thg 3, 2011

À tham khảo tí nhé, Phim Online cảm thấy nhà mới của tớ có được hơn nhà cũ k, nhẹ hơn nhiều phải hông?

Reply
17:59:00, 19 thg 5, 2011

anh ơi làm sao để đóng khung cái phàn bài viết được thu gọn lại, http://huudung90.blogspot.com

Reply
01:09:00, 4 thg 9, 2011

Khửa khửa,đã xong cái này.Hihi.Thế mà lâu nay mình không biết,cứ dùng cái mặc định cũa các mẫu temp.Chắc tốc độ sẽ ổn.
Đa tạ Nhật Hà nhé :55)

Reply
10:11:00, 4 thg 9, 2011

Mình muốn thu gon thêm bài viết thì làm sao hả bạn?

Reply
00:24:00, 22 thg 9, 2011

Thủ thuật này hay nhưng mình vẫn còn một số hạn chế:
+ Nội dung tóm tắt chỉ gồm 140 ký tự.
+ Nội dung tóm tắt không thể tùy chỉnh theo HTML (lên xuống dòng .....)
+ Không có link tới bài viết ở hình đại diện.
Khắc phục (đây là ý kiến của mình nếu thấy hay admin làm một bài viết cho mọi người tham khảo nhé):Vẫn sử dụng đoạn mã trên nhưng tùy biến đi một chút.
+ Chỉ lấy thumbnail ảnh không lấy tóm tắt bài viết, tóm tắt bài viết sử dụng tính năng readmore của chính blogspot chạy được HTML(ngại gì khi post bài nhấn vào nút readmore là xong)điều này đồng nghĩa với việc loại bỏ <data:post.snippet/> đi.
+ Thêm link cho ảnh thumbnail bằng thẻ <a expr:href='data:post.url'>
Đây là demo trang của mình đang làm ( mình cũng chỉ mới vọc qua thuthuatblogger và lấy theme free về tùy biến lại thôi): Dịch Vụ Khắc Dấu chú ý là link của thumbnail nhé.
Còn đây là đoạn code sau khi hoàn chỉnh chỉ post đoạn xml thôi css như cũ:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img alt='no image' class='item-thumbnail' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/></a>
</b:if>
<data:post.body/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</span>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Reply
09:14:00, 27 thg 9, 2011

mình muốn ảnh của bài viết vẫn giữ nguyên kích thước như ban đầu thì làm sao hả bạn vì khi mình tăng kích thước ảnh lên thì ảnh bị mờ hết không nhìn thấy gì hết

Reply
13:44:00, 3 thg 2, 2012

ối anh ơi chết em rồi bây giờ nó thành 2 cái read mỏe phải làm sao đây anh :(( http://ncn51th1.blogspot.com

Reply
13:55:00, 21 thg 8, 2012

Chào bạn
Bạn có thể chỉ giúp mình cái này được ko,mình sử dụng theme này mà khi xem bài đăng lại có 2 banner quảng cáo của google,bạn có thể chỉ mình cách bỏ 2 cái này đi được ko,hoặc là thay bẳng cái banner khác được ko.thank bạn nhiều,đây là theme mà mình dùng:
http://bandatlonganbinhchanh.blogspot.com/2012/08/khu-dan-cu-my-hanh-hoang-gia.html
vị trí banner: 1 cái dưới tiêu đề, 1 cái dưới cuối bài viết.

Reply
17:25:00, 29 thg 8, 2012

Mới áp dụng thủ thuật này cho blog mình thấy rất đẹp

Reply
16:02:00, 15 thg 3, 2013

Xin chào bạn Hà
Mình áp dụng code read more tự động vào blog của mình: http://nhuygialai.com , có điều phần hiển thị tóm tắt nội dung ít từ quá. Nếu có thời gian, nhờ bạn giúp chỉnh để tăng số lượng từ lên tý nữa. Cám ơn bạn nhiều nhé
Chúc bạn luôn khỏe, hạnh phúc và thành công

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn