"Tiện ích bài viết liên quan cũ mới cùng chủ đề"

(Traidatmui.com) - Tiếp theo thủ thuật tạo bài viết liên quan cho bài viết trên blogspot, mình xin giới thiệu đến các bạn cách tạo "Bài viết liên quan cũ và mới có cùng chủ đề" cho blogspot. Với tiện ích này thì khi người dùng xem một bài viết nào đó, nó sẽ hiển thị các viết cũ hơn hay bài viết mới hơn trong cùng một nhãn với bài viết đó. Ở đây chúng ta sẽ cho tiện ích này nằm ở cuối mỗi bài đăng trên blog, tiện ích này sẽ giúp người dùng có thể dễ dàng tìm kiếm các bài viết trong chủ đề mà họ đang quan tâm. Bạn có thể xem hình ảnh bên dưới để thấy các hiển thị của tiện ích này.
Hình ảnh minh họa
1. Đầu tiên đăng nhập Blogger
2. Vào thiết kế, chọn chỉnh sửa HTML
3. Chọn Mở rộng mẫu tiện ích (Expand Widget Templates)
4. Chèn code css vào trước thẻ ]]></b:skin>
#related-posts-block {
margin:10px 5px;
font-size:10px;
color:#333; /*màu text của tiện ích*/
font-family:tahoma; /*font chữ của tiện ích*/
}
#related-posts-loading-text{
font-size:12px;
text-align:center;
color:#000099;}

#related-newest-href {
margin:10px 5px 0px 15px;
}
#related-newest-title {
font-size:12px; /*cỡ text của phần "Các bài viết mới cùng chủ đề"*/
margin:10px 5px;
color:#000099; /*màu chữ của phần "Các bài viết mới cùng chủ đề"*/
}
#related-posts-block #related-newest-href a{
font-size:12px; /*cỡ text của tiêu đề bài viết trong phần "Các bài viết mới cùng chủ đề"*/
font-family:Arial, Helvetica, sans-serif;
color:#000066; /*màu chữ của tiêu đề bài viết trong phần "Các bài viết mới cùng chủ đề"*/
}
#related-posts-block #related-newest-href a:hover{
font-family:Arial, Helvetica, sans-serif;
color:#ff00ff;
}
#related-older-href {
margin:10px 5px 0px 15px;
list-style-type:none;
}
#related-older-title {
font-size:12px; /*cỡ text của phần "Các bài viết cũ cùng chủ đề"*/
margin:10px 5px;
color:#000099; /*màu chữ của phần "Các bài viết cũ cùng chủ đề"*/
font-family:Arial, Helvetica, sans-serif;
}
#related-posts-block #related-older-href a{
font-size:12px; /*cỡ text của tiêu đề bài viết trong phần "Các bài viết cũ cùng chủ đề"*/
font-family:Arial, Helvetica, sans-serif;
color:#000066; /*màu chữ của tiêu đề bài viết trong phần "Các bài viết cũ cùng chủ đề"*/
}
#related-posts-block #related-older-href a:hover{
color:#ff00ff;
}

Bạn dựa vào các dòng hướng dẫn trong code để tùy chỉnh lại cho phù hợp với blog của mình.

5. Tiếp theo, bạn tìm đến dòng code bên dưới hoặc tương tự
<div class='post-footer-line post-footer-line-3'/>

6. Chèn code bên dưới vào ngay sau code vừa tìm được
<script type='text/javascript'>
//<![CDATA[
var showdate = true; //Nếu không muốn hiển thị ngày tháng đăng bài, bạn thay True thành False
var max_post = 8; //Số bài viết hiển thị trong mỗi phần (Bài cũ và bài mới) của tiện ích
//]]>
</script>

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='post-labels-for-related' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if></div><div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>

<div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>
<div id='related-posts-block'><div id='related-posts-loading-text'>Loading...<br/><img align='absmiddle' src='http://lh4.ggpht.com/_BTztXRwC9ik/S5SkPu7B3iI/AAAAAAAAAgI/UVi04d4jOP8/icon-star.gif'/></div><div id='related-newest-href'><div id='related-newest-title'/></div><div id='related-older-href'><div id='related-older-title'/></div></div></b:if>

<script src='http://data-traidatmui.appspot.com/scripts/related_npost.js' type='text/javascript'/>

7. Cuối cùng save template lại.

Lưu ý: tên các "Nhãn" bài viết nên được đặt bằng tiếng Anh hoặc tiếng Việt không dấu để tránh bị lỗi.

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

Xem khác cùng chủ đề

22 nhận xét | Viết lời bình

1/03/2011 03:07:00 SA Trả lời

ban oi cai nay minh lam xong roi nhung no ko hien ra ,ma chi co hinh ngoi sao voi chu Loading... ,phai lam sao

Admin
1/03/2011 03:54:00 SA Trả lời

Đó có thể do lỗi phần tên nhãn trên blog của bạn. Khi đặt tên nhãn bạn nên để tên nhãn bằng Tiếng Anh hoặc Tiếng Việt không dấu. Bạn hãy thử lại nhe. Thân!

1/03/2011 05:01:00 SA Trả lời

BAN OI CO CACH NAO DOI NHAN TAT CA CUNG MOT LUC KO ,CHU MINH THAY MINH PHAI DOI CHO TAT CA BAI VIET DO CHAC MINH CHET MAT BAN OI! ,LAM ON CHO JUP NHE

Admin
1/03/2011 07:10:00 SA Trả lời

Hiện giờ mình không biết cách nào khác, bạn chịu khó thay đổi thủ công nhe.

2/19/2011 12:11:00 SA Trả lời

@Traidatmui
Mình không tìm thấy dòng div class='post-footer-line post-footer-line-3', kể cả dòng div class='post
cũng không có thì phải làm thế nào

Admin
2/22/2011 12:03:00 SA Trả lời

Bạn xem đã có "mở rộng tiện ích" như mình hướng dẫn chưa? Nếu đã mở rộng rồi mà không tìm thấy bạn hãy gõ từ khóa như line-3 hoặc line-2 rồi dán code như hướng dẫn.

Nặc danh
2/22/2011 10:13:00 CH Trả lời

Bạn ơi làm 1 bài hướng dẫn chèn bbcode vào khung soạn thảo bài viết và khung comment đi ^^ hình như là viết bài trong blogger có thể dùng bbcode đúng ko?

Admin
2/22/2011 10:38:00 CH Trả lời

Theo mình biết thì trong Blogger không hỗ trợ mã bbcode, nếu bạn muốn hiển thị bbcode thì cần chuyển chúng về dạng HTML thì nó mới display được.

Ví dụ: đối với bbcode ([b]Bold[/b][i]Italic[/i][u]Underline[/u]) bạn chuyển thành mã HTML như (<b>Bold</b><i>Italic</i><u>Underline</u>) và chèn vào khung soạn thảo bình thường. Ta sẽ được kết quả như dưới
"Bold Italic"
Thân!

12/06/2011 05:29:00 SA Trả lời

Trước hết cám ơn bạn vì bài viết quá hay.
Nhân tiện đây cho mình hỏi, muốn đưa xuống dưới phần nhận xét như trên báo dantri.com.vn thì làm thế nào vậy?
Bạn hồi âm sớm cho mình nhé. Cám ơn bạn nhiều

12/06/2011 05:41:00 SA Trả lời

Mình hỏi thêm chút nữa nghe.
Mình muốn thay chữ "Các bài mới cùng chủ đề....." bằng câu "Các bài mới"- bổ câu "cùng chủ đề" đi thì phài làm thế nào?

12/06/2011 09:44:00 CH Trả lời

anh TDM ơi ! Cho em hỏi cái. em ko biết post đâu. nên đành phải post ở đây !

Blogger của em. có một số bài viết lâu rồi.
Giờ em search lại trên google, thì nó chỉ hiện ra cái title là
năm/ngày/tháng lưu trữ mà không hiện ra title em đang search. Có cách nào khắc phục được không anh. Em xin cảm ơn nhiều

Admin
12/14/2011 12:07:00 SA Trả lời

@ sangnguyenMS (addmin): Nếu bạn muốn đưa tiện ích xuống duoiwsnkhung comment có thể đưa code bước 6 xuống dòng code như bên dưới
[code]<b:includable id='comment-form' var='post'>
................................

Code tiện ích bài viết liên quan ở đây
</b:includable>[/code]
Phần dấu 3 chấm (...) là các code trong template của bạn.

Còn bạn muốn thay đổi các dòng chữ "Bài viết mới..." thì bạn cần tải file js về và mở lên chỉnh sửa lại nhé.

2/24/2012 04:07:00 SA Trả lời

Bạn ơi sau mình làm giống bạn hướng dân mà sau ko dc. Bạn kiểm tra dùm mình nha. Trang của mình là: http://www.mycrazyfilm.co.cc

siloha
3/10/2012 11:49:00 CH Trả lời

@ Traidatmui:Mình cũng gặp trường hợp tương tự với một vài bạn comment ở trên.
Nghĩa là chỉ thấy hiện ra ngôi sao mà thôi. Trước đây tôi đã dùng chỉ dẫn ở trên và đã thành công. Nhưng không biết vì sao từ hai tuần trở lại đây, phần "bài viết bài mới cũ cùng chủ đề" chỉ hiện ra ngôi sao mà thôi.
Thanks!

6/03/2012 05:22:00 SA Trả lời

hic hic sao mình làm xong nó canh lề sang phải chứ hok sang trái làm sao bây giờ mách giúp mình với, cám ơn bạn

Admin
6/03/2012 06:36:00 SA Trả lời

Bạn thêm text-align:left; vào trong đoạn css #related-posts-block {

10/22/2012 01:23:00 SA Trả lời

giờ nó không hiện ra cái gì nữa rồi :( thấy mỗi ngôi sao thôi kkrong

10/22/2012 01:26:00 SA Trả lời

giờ không bị hiện ngôi sao thì lại có mỗi chữ "Không có bài viết cũ nào cùng chủ đề" ọc ọc

Admin
10/22/2012 01:56:00 SA Trả lời

Giờ bạn hãy thử lại xem nhé

10/22/2012 03:58:00 SA Trả lời

Hehe lại hiện đẹp rồi votay

không biết blogspot đang nâng cấp gì không nữa

Admin
10/22/2012 04:37:00 SA Trả lời

Hiện tại thì blogger vẫn chưa ổn định, có lẻ còn nhiều thay đổi và cải tiến hơn

4/17/2013 07:41:00 SA Trả lời

Chia nó làm 2 cột được không bạn
cột trái là bài mới hơn
cột phải là bài cũ hơn
thanks

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang