Loading post navigation ...
 
 

Pro page

25
Nhận xét

[ Yêu cầu ] : Chèn 1 box nhỏ hiển thị các bài liên quan vào ngay trên đầu bài viết

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Theo yêu cầu của bạn Đăng Hiển (danghienit.blogspot.com)
[FD's BlOg] - Bài viết sẽ hướng dẫn các bạn tạo 1 box nhỏ chứa các bài viết liên quan tới bài đang đọc (giống như trang vietnamnet.vn). Để tránh trùng lặp với tiện ích các bài liên quan ở phía dưới của bài viết, thủ thuật này mình sẽ dùng tiện ích các bài ngẫu nhiên từ nhãn để truy xuất cho box này.

Thủ thuật này chỉ hiện thị tốt nhất cho các bài viết có 1 nhãn , nếu 1 bài viết có nhiều nhãn thì các bài hiển thị trong box này cũng sẽ tăng theo. Ví dụ ta thiết lập cho 1 nhãn hiển thị trong box là 4 bài, thì với 2 nhãn ta sẽ có 8 bài.


Hình ảnh minh họa từ trang vietnamnet.vn
(xem trực tiếp ở đây)


Và đây là hình ảnh mình thực hiện cho blog test

☼ Bắt đầu thực hiện thủ thuật:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script src='http://data.fandung.com/js/rp-posts.js' type='text/javascript'/>

<script type='text/javascript'>
var maxEntries = 4;
</script>

<style type='text/css'>
#rp-pre {
float:right;
width:150px;
padding-left:10px;
}

#rp-content {
border:1px solid #bbb;
background:#eee;
}

#rp-title {
text-align: center;
background:#bbb;
font-weight:bold;
color:#F95107;
margin:3px;
padding-bottom:2px;
}

#rp-posts {
position:relative;
left:-20px;
}

#rp-posts a {
background: url(http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif) no-repeat left;
padding-left:13px;
}

#rp-posts ul li {
list-style :none;
}
</style>

- Code : var maxEntries = 4; chính là số bài viết mà bạn muốn hiển thị cho 1 nhãn.
- Trong hình minh họa, box hiện thị ở bên phải, nếu bạn muốn nó hiển thị ở bên trái thì sửa code float:right; thành float:left;

5. Tiếp tục di chuyển xuống phía dưới trong code template, tìm đoạn code bên dưới:

<data:post.body/>

6. Thêm đoạn code bên dưới vào trước dòng code vừa tìm được:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='rp-pre'>
<div id='rp-content'><div id='rp-title'>Bài liên quan</div>
<div id='rp-posts'/></div></div>

<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=getRandomPosts&amp;max-results=999&quot;' type='text/javascript'/>
</b:loop>

</b:if>

7. Save template.

☼ 1 lời khuyên nhỏ:
- Khi chèn box vào bài viết (nằm bên phải) ta sẽ thấy các chữ sẽ không đều (nếu ta chưa chỉnh), như hình minh họa bên dưới:

- Để khắc phục điều này bạn chỉ cần căn đều 2 bên cho khối văn bản này là được, và ta sẽ được kết quả như hình bên dưới:

Do thủ thuật này dùng tới file JS, và nó được chèn vào ngay đầu bài viết, nên phần nào cũng sẽ ảnh hưởng tới tốc độ load bài viết.

Chúc các bạn thành công.


Enter your mail address:

25

Tran & Lee Insurance Agency Team

Rẹttttt! Xé tem!:D Thủ thuật rất hay. Bữa giờ ngày nào cũng vào blog của FD để xem nhất là trong thời gian sửa temp. Thanks FD rất nhiều. No1!!

fandung

Lâu rồi mới lại thấy Tiến comment ở blog của mình :D

mmovn

cái code đánh dấu số thứ tự comment bên bác đâu nhỉ? e tìm hoài k thấy, qua bên anhvo thì nó lại bị lộn comment

danghienIT

Cảm ơn FD nhiều nhé! Phải thử liền :D

danghienIT

Bên tớ test thì chạy OK nhưng trong đoạn CSS này(position:relative;)phải sửa làm sao để cho nó chạy lên đầu trang dưới phần Tiêu đề bài viết nhỉ!? của tớ làm nó chạy xuống cuối trang.

danghienIT

Nếu muốn đặt giữa bài viết và canh lề bên phải thì làm sao FD nhỉ?

Phan Dũng

nó chạy xuống dưới trang là do bạn đó chứ, đây phải do đoạn position:relative. Bạn đã đặt nhầm code sau dòng data:post.body , trên đó mình nói là đặt trước mà.

danghienIT

Ah! đúng rùi. Tớ đọc ko kỹ!

Phan Dũng

còn nếu muốn cho nó nằm ở giữa bài viết thì bạn phải dùng cách thủ công, nhưng không phải hoàn toàn. Tức là dùng 1 đoạn code thay thế (ngắn thôi, ví dụ <!--abc-->), và chèn nó vào vị trí trong bài viết mà bạn muốn hiển thị. Như thế mới hiển thị vào giữa bài được, tức là bài viết nào cũng phải chèn đoạn code thay thế này, như thế sẽ rất cực, tốt nhất dùng cách này cho đơn giản.

Ác Quỷ

Ái chà hay wá FD ơi! 1 tràn pháo tay ---> lẹp bẹp lẹp bẹp lẹp bẹp :D

Tran & Lee Insurance Agency Team

@FD: hì hì. Ngày nào mình cũng vô blog của FD đó chứ. Còn add link của FD lên trình duyệt luôn kìa. :D:D:D:D

fandung

cám ơn bạn TiếnTài nhiều :D

Chinhnd

lẹp bẹp lẹp bẹp lẹp bẹp - Vỗ tay theo Tài.

Anh sẽ áp dụng TT này.

Du Phương

Fandung ơi bạn mần ơn cho mình 2 đoạn code nhá:
thứ nhất mình muốn tạo một "mô-đun" trong đó có các đoạn chữ kèm theo hình(khoảng 3-4 đoạn) mà mỗi lần khách viến thăm(hoặc F5) sẽ hệ ra ngẫu nhiên 1 đoạn text có sẵn đó(kèm hình minh họa).
thứ hai mình muốn ở cuối bài có các nút như gửi bài này cho bạn bè,bookmark bài này, in bài này... chắc bạn làm đc hả?share cho mình nhá ^^ Cám ơn trc nha
---Note: Mình không biết tìm post yêu cầu code ở đâu nên post đại ở đây,nếu bạn thấy khó chịu thì cho xin lỗi hén!

fandung

@Thanh phương : chắc bạn mới vào blog mình. trên cuối trang và đầu trang đều có link dẫn tới khu vực yêu cầu thủ thuật, chắc bạn ko để ý.

Sau này muốn post yêu cầu thì bạn vào khu vực đó mà post nha.

Còn cái việc bạn yêu cầu mình, mình sẽ thực hiện sau.

tmtvietnam

Dear Dũng,
Mình có yêu cầu này muốn nhờ Dũng, Dũng nghiên cứu xem thế nào nhé:
Mình muốn đăng bài viết tự động từ các website khác vào blog thì làm thế nào? Ví như, ở Label "Thể thao" chẳng hạn, các bài viết từ các trang như vnexpress.net hay Thethaovietnam,Bongda...tự động nhảy vào blog như của "Tin 247" đó? Chứ không mình cứ đi copy các bài viêt từ các trang đó post vào blog thì rất tốn thời gian.
Dũng nghiên cứu nhé.
Thanks
http://obamavn-tmt.blogspot.com

Phan Dũng

@tmtvietnam : việc này mình không rõ lắm bạn à, mình chưa thấy blog nào làm được việc này. Cũng ko biết là có thực hiện được với blogspot ko nữa.

khoikito

FD à mình có DOWNLOAD gói Script trên Blog bạn. Trong đó có Mã Script về Thủ Thuật này, tuy nhiên khi add vào lại không hiển thị được trên blog mình bạn Xem lại hộ mình nha.

http://share-all.com

Trương Duy Nhất

Chào bạn. Tôi dò làm theo cách chỉ dẫn nhưng nó chỉ hiện dòng "Bài viết liên quan" mà không hiện danh sách các bài liên quan.
Thấy không được tôi muốn xóa thoát ra nhưng không được. Hiện tôi muốn xóa dòng "bài viết liên quan hiện trên đầu bài thì làm thế nào hả bạn? Rất mong được giúp đỡ. Trang của tôi là http://www.truongduynhat.vn/
Rất cảm ơn!

Trương Duy Nhất

Tôi có viết 1 comment hỏi admin mà giờ không thấy nội dung comment đâu mà cũng không thấy trả lời.
Tôi theo hướng dẫn cài nhưng nó chỉ hiện mỗi dòng "bài liên quan" mà không hiện tên các bài liệt kê. Tôi loay hoay tìm cách tháo bỏ nhưng không được. Hiện trên đầu bài vẫn còn chữ "bài liên quan". Làm cách nào để tháo bỏ dòng chữ này. xin bày cho tôi với. Trang của tôi là truongduynhat.vn
Rất cảm ơn.

Kết Nối blog

Vậy làm sao xoá nó đi hở Anh Dũng?

Unknown

Em không tìm thấy dòng này ở đâu trong chỉh sửa html cả mặc dù seach đi rất nhiều lần mong anh giải thích. Hiện tại đa số các thủ thuật đều dựa vào cụm từ này mà giờ google dấu đi rùi thì phải hic

THE GIOI BE CON ONLINE

Ko được FD ơi. Nó chỉ thể hiện tiêu đề Bài Liên Quan thôi chứ ko hiện ra các bài tương ứng của mục đó.
Vậy sửa làm sao nè???

Unknown

do link này da chet http://data.fandung.com/js/rp-posts.js. ca ban thay lai link nay la dc http://fandung.googlecode.com/svn/trunk/js/rp-posts.js

mình vua la thu nè xem demo http://www.khocviem.org/2010/07/thoi-gian-la-tinh-yeu.html

thaithuan

Tin mới nhất: link http://data.fandung.com/js/rp-posts.js dẫn tới trang khác.
Cảnh báo !!!!!!



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home