• 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

Tiện ích Bài viết liên quan ngẫu nhiên có ảnh đại diện

16
12/12/2010

Chắn hẳn bạn từng biết qua tiện ích Bài viết liên quan có ảnh đại diện của Linkwithin. Tính năng của tiện ích này là hiển thị các bài viết liên quan đến một chủ đề với ảnh đại diện và tiêu đề bài viết. Tuy nhiên có một điểm mà mình cho rằng sẽ gây khó chịu cho những blogger khó tính nhất, đó là liên kết Linkwithin hiển thị ngay trên tiện ích. Đây được xem là một kiểu quảng cáo.

Bài viết này giới thiệu về tiện ích Bài viết liên quan ngẫu nhiên có ảnh đại diện (Random Related Posts with Thumbnail) hiển thị 4 bài viết ngẫu nhiên liên quan đến một nhãn cho bài viết, gồm ảnh đại diện, tiêu đề bài viết và phần tóm tắt bài viết. Điểm đặc biệt của tiện ích này là: nếu bài viết không có ảnh đại diện thì sẽ hiển thị ảnh đại diện mặc định, nếu bài viết không có ảnh đại diện mà thuộc các nhãn như Blogger, CSS, HTML, JavaScript, Jquery, Facebook, Twitter thì sẽ hiển thị ảnh đại diện mặc định được gán sẵn cho các nhãn đó.

Để cài đặt tiện ích này, bạn hãy thực hiện theo các bước sau đây.

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

Thêm đoạn code dưới đây vào trước thẻ </head>.

/* Random Related Posts with Thumbnails Widget by Huynh Nhat Ha */
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#rdrelatedposts {}
#rdrelatedposts h2{height:25px;color:blue;font-size:15px;font-weight:bold;font-family:Arial,Tahoma,Times New Roman,serif;margin:0px 4px 0;margin-top:4px;padding:0 0 5px}}
.relaposts {float:left;height:200px;margin:0 5px;overflow:hidden;padding:5px;text-align:center;width:130px;}
.relaposts:hover {background-image: -moz-linear-gradient(100% 100% 90deg, #303941, #101921);background-image: -webkit-gradient(linear, left bottom, left top, from(#303941)), to(#101921));filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF101921', EndColorStr='#FF303941');}
.relaposts a {color:#a52a2a !important;display:inline;font-family:Arial;font-size:12px;line-height:1;}
.relaposts img {-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow: 0 0 20px #444 inset;-webkit-box-shadow:0 0 20px #444 inset;box-shadow:0 0 20px #444 inset;height:72px;padding:5px;width:72px;}
.relaposts h6 {display:table-cell;height: 5em;margin:5px 0 0;overflow:hidden;padding-bottom:2px;vertical-align:middle;width:130px;}
.relaposts p {border-bottom:1px dotted #555;border-top:1px dotted #555;color:#AAA;font-size:11px;height:4em;line-height:1;margin:5px 0 0;overflow:hidden;padding:5px 0;text-align:justify;}
</style>
<script src='http://hacodeproject.googlecode.com/files/randomrelaposts.js' type='text/javascript'/>
</b:if>

Nếu bạn rành về CSS thì có thể điều chỉnh một số thuộc tính CSS trong đoạn code ở trên. Chú ý đoạn code trên dùng cho Template có phần post-body với chiều rộng là 600px, tùy thuộc vào bề rộng của phần post-body trong Template của bạn mà chỉnh tham số width:130px trong dòng code được đánh dấu màu đỏ cho phù hợp.

Bạn nên tải về file randomrelaposts.js để upload lên host sử dụng cho blog của bạn để tránh hạn chế băng thông do dùng chung file.


Bước 2. Tìm dòng <div class='post-footer-line post-footer-line-3'> rồi đặt trước nó với toàn bộ đoạn code dưới đây.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='rdrelatedposts'>
<h2>Bài viết liên quan</h2>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=100&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>displayrelatedposts();</script>
</div>
<div style='clear:both;'></div>
</b:if>

Bước 3. Bước sau cùng nhưng không kém phần quan trọng là Lưu Template.Chúc bạn thành công nhé!

{16 bình luậnAdd yours ?}

12geniusLD
15:18:00, 13 thg 12, 2010

Cậu viết blog theo 1 phong cách riêng rất hay, tớ đã bookmark web của cậu, khi tớ tìm thấy bài viết này tớ rất mừng vì tin tưởng cậu, do
Mình đã dùng qua Linkwithin và một số cách khác nhưng cách của thấy linkwithin là lúc nào cũng load được ảnh, cái của cậu lúc đầu tớ hi vọng sẽ xóa được linkwithin nhưng khi làm xong, có 2 điểm góp ý;
-Thumbnail không load được( tớ không tải file theo host riêng vì tớ không có host riêng, không biết nếu dùng host miễn phí có khác đi không, chưa test)
- Các bài viết liên quan của cậu để theo chiều dọc, không thuận mắt
- Khả năng load kém
- Coment của cậu nhiều khi bị hỏng, cậu không nên dùng loại coment này nữa hoặc là fix lại
Dù sao thì với phong cách viết đang rất tốt của cậu sớm muộn gì blog của cậu cũng sẽ nổi tiếng

Reply
15:36:00, 13 thg 12, 2010

Cảm ơn bạn vì những bình luận chân thành. Có thể blog của bạn cần điều chỉnh một chút để phù hợp với tiện ích này. Và một điều nữa là có lẽ bạn nhầm một chút khi đánh giá tiện ích này: là tiện ích bài viết liên quan có ảnh đại diện hiển thị bài viết theo chiều ngang, chứ đâu có theo chiều dọc (chắc bạn nhầm với kiểu theo chiều ngang k có ảnh đại diện rồi, blog tớ dùng đến 2 tiện ích bài viết liên quan đấy), khả năng load kém hay k là do webhost, bạn có thể upload lên googlecode cho nhanh hơn.

Reply
16:25:00, 13 thg 12, 2010

Mình đã upload file js lên googlecode rồi, tốc độ load sẽ nhanh hơn đấy.

Reply
22:13:00, 13 thg 12, 2010

Mình nghĩ nếu bạn thích LinkWithin thì nên đọc bài này nhé. http://huynh-nhat-ha.blogspot.com/2010/12/custom-linkwithin-related-posts-with.html

Reply
08:14:00, 21 thg 12, 2010

Minh đã áp dụng theo cách nầy của bạn và thên lời bình mới Disqus. Rất hay.
Tuy nhiên bài viết liên quan không hiển trị sắp sếp theo hàng ngang mà sắp sếp theo chiều dọc.

Reply
12:42:00, 21 thg 12, 2010

Bạn chú ý, phần code trong bài viết dùng cho Template có phần main-wrapper chứa class post-body có bề rộng width:600px; tùy thuộc vào phần này của Template bạn mà chỉnh dòng code này cho phù hợp: .relaposts {float:left;height:200px;margin:0 5px;overflow:hidden;padding:5px;text-align:center;width:130px;}

130px nhân cho 4 cộng voi margin và padding làm sao cho k quá 600px mới hiển thị ok duoc. Neu phan post-body của bạn nhỏ hơn 600px thì bạn phải chỉnh 130px thành tham số nhỏ hơn nhé.

Reply
23:02:00, 23 thg 1, 2011

Em không tìm thấy dòng < div class='post-footer-line post-footer-line-3'> Làm sao đây anh!? T_T

Reply
07:34:00, 24 thg 1, 2011

@Tonj Dừa Đối với Template của em thì đặt sau thẻ đóng </div> của thẻ <div class='category'>. Hoặc nếu em không biết thẻ đóng đó thì đặt trước thẻ <div class='category'> cũng được. :54)

Reply
baongoc.so1.in
08:26:00, 24 thg 1, 2011

@Tonj D?a
Bạn không tìm thấy dòng < div class='post-footer-line post-footer-line-3'> thì timg cái dòng không tìm thấy dòng < div class='post-footer-line post-footer-line-1'> cũng được lúc đầu mình cũng giống bạn không biết làm sau nên cú cho vào ở đoạn không tìm thấy dòng < div class='post-footer-line post-footer-line-1'> no vân good:)

Reply
10:48:00, 24 thg 1, 2011

@Huỳnh Nhật Hà
Chậc, em thay xong rồi, mà hiện đúng mỗi chữ Bài viết liên quan =''=

Reply
21:54:00, 4 thg 9, 2011

Anh HÀ ơi sao em làm cái bài viết liên quan không nhận dạng đc ảnh là sao?? Không hiển thị ms đúng. http://a1k44.thptbatbat.com/2011/09/pro-xin-hay-xem-lai-inh-nghia-cua-tu.html nè nè

Reply
09:46:00, 18 thg 3, 2012

Anh cho em hỏi, tem của em http://www.cliphaikich.com/ , khi em làm theo hướng dẫn trên, thì các bài cùng loại nó bị thành hàng ngang, anh xử lý giúp em nhé

Reply
13:40:00, 1 thg 4, 2012

Bạn oi , Nhờ bạn chỉ gium code related post giống trang web của bạn dược không vây bạn,
thank you bạn nhiều nhe

Reply
11:50:00, 5 thg 4, 2012

Chào các bạn. Mình gặp một vấn đề là không làm Related Post cho blog của mình được. Mình đã thử hết cách rồi mà không biết lý do.
blog mình: www.lamgiautuforex.com
Mong các bạn có ai có cách sửa không thì sửa dùm mình với. Tks rất nhiều!!!!!!!!!!!!!!!!

Reply
06:39:00, 17 thg 7, 2014

m bó tay, đến b 2 nó báo lỗi đóng thẻ div, b vui lòng giúp m, xem mã nguồn mình thử nhé: http://hotgirlbuonchuyen.blogspot.com/

Reply
13:07:00, 24 thg 3, 2015

Bán Blogger Template Đẹp Tuyệt Cú Mèo

Bạn nào quan tâm và yêu thích Blogger Template hãy xem Demo Bên Dưới:
http://vnminhtriet.blogspot.com/

Giá bán 300.000đ
Liên Hệ: vnminhtriet@gmail.com
ĐT:0974603393

Cài đặt Online Qua Teamview Miễn Phí!

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