"Hiển thị bài viết giống trang tin247.com"

(Traidatmui.com) – Đối với những bạn lướt web nhiều chắc hẳn bạn đã từng vào trang tin247.com đọc tin và cũng đã thấy cách hiển thị bài viết trên trang đó. Trang web đó hiển thị bài đăng cho từng nhãn riêng và mỗi nhãn sẽ hiển thị một bài (dạng tóm tắt) và có thêm tiện ích bài viết liên quan trong cùng nhãn đó. Việc hiển thị bài viết như vậy chúng ta có thể ứng dụng nó vào trong blogspot. Mình xin chia sẽ cách để thực hiện thủ thuật này.

Hình ảnh bài viết trên trang tin247.com

☼ Cách thực hiện thủ thuật

1. Đầu tiên hãy đăng nhập vào tài khoản Blogger
2. Vào bố cục và thêm phần tử HTML/Javascript
3. Chèn đoạn mã bên dưới vào phần tử tiện ích trên
<style>
.mota{
position: relative;
z-index: 0;
text-decoration:none;
}

.mota a {
color:#ff0000;
}
.mota:hover{
color:#ff0000;
background-color: transparent;
z-index: 50;
}

.mota span{
position: absolute;
background: #eee;
padding: 5px;
left: -1000px;
border: 1px solid #ccc;
visibility: hidden;
color:#000;
text-decoration: none;
}

.mota span img{
border-width: 0;
padding: 2px;
}

.mota:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:100px;
width:250px;
background:#ccc;
text-align: justify;
}

.summerypost a {
color:#ff0000;
font-weight:bold;
}
.summerypost a:hover {
color:#000066;}

.summerypost {
color:#000;
font-family:arial;}

.readm a{
color:#ff0000;}
.readm a:hover{
color:#006633;}

.repost{
color:#3366ff;
font-family:arial;}


.repost a{
color:#0066cc;}
.repost a:hover{
color:#ff0000;}

</style>
<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";


showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "#ff0000";
bgTD = "";


imgw = 130; // độ rộng của ảnh thumb
imgh = 100; // chiều cao của ảnh thumb

imgwidth = 60;
imgheight = 60;

fntsize = 12; //Cỡ chữ của các link bài viết liên quan trong cùng nhãn đó
fontsize = 14; // Cỡ chữ của tiêu đề bài viết hiển thị dạng tóm tắt
fontsizecm = 11; // Cỡ chữ của ngày đăng bài

acolor = "";
titlecolor = "";
aBold = false;
icon = "";

text = "Nhận xét";

showPostDate = true; //Nếu không muốn hiển thị ngày đăng bài bạn thay TRUE thành FALSE
poston = "Ngày đăng :";

minisummaryPost= 200; // số kí tự bạn muốn hiển thị cho phần tóm tắt bài viết
summaryPost = 350; // số kí tự hiển thị ở phần mô tả
summaryFontsize = 12; //Cỡ chữ bài viết tóm tắt
summaryColor = "#000";
icon2 = "";


numposts = 8; //số bài viết hiển thị trong phần bài viết liên quan
label = "Advanced blogger"; // Thay thành tên nhãn bài bạn muốn hiển thị
home_page = "http://www.traidatmui.com/"; //Thay thành địa chỉ blog của bạn

</script>

<script src="http://data-traidatmui.appspot.com/scripts/tin247_post.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/tin247_related_post.js" type="text/javascript"></script>


- Tùy chỉnh:
+ Code màu tím dùng để chỉnh sửa phần mô tả cho các bài viết liên quan khi rê chuột vào link
+ Code màu xám dùng để chỉnh sửa màu của text của bài viết tóm tắt
+ Code màu đỏ dùng để chỉnh sửa màu chữ phần bài viết liên quan

Bạn hãy dựa vào những chú thích trong code để chỉnh sữa màu chữ, màu nền, kích cỡ... cho phù hợp rồi save lại.

» Cập nhật ngày 07/10/2011

Các bạn thấy ở thủ thuật trên có một nhược điểm đó là bài viết bị lặp lại, bài viết đầu tiên sẽ lặp lại ở phần link bài viết liệt kê bên dưới và một nhược điểm khác là sử dụng 2 file JS. Điều này sẽ phần nào ảnh hưởng tới độ load của trang blog của bạn. Để khắc phục 2 nhược điểm trên mình xin chia sẻ file JS của thủ thuật này để bạn sử dụng. File dưới đây đã khắc phục được lỗi trên tránh tình trạng lặp lại bài viết. Bạn chỉ việc thay 2 file JS ở trên thành code bên dưới là xong
<script src="http://data-traidatmui.appspot.com/scripts/tin247post_fixed.js" type="text/javascript"></script>

Chúc bạn thành công
Tham khảo Fandung

Xem khác cùng chủ đề

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

8/20/2010 11:13:00 SA Trả lời

Anh Vdinh ơi! Em sử dụng recent post giống trang tin 247, lúc đầu em thấy nó chạy tốt nhưng sao bây h nó lại ko hiển thị nữa, cả cái recent post bài viết mới nhất có ảng thumbail nữa, sao nó đồng loạt ko hiển thị, anh giúp em với, nếu đc anh ghé blog của em nha! Huhu, em chăm sóc nó quá trời nên bùn ghê lun. Anh giúp em nha, em cảm ơn anh rất nhìu...

Admin
8/21/2010 01:00:00 SA Trả lời

em hãy chú ý file script dạng .JS trong code trên (dòng màu xanh dương đậm).em hãy download nó về và upload lên trang chủ riêng của mình. Hoặc em hãy sử dụng file ở code trên của a.

Chúc em sớm khắc phục được blog mình.

Chào em

3/04/2011 06:06:00 CH Trả lời

Thủ thuật này rất hay em đã áp dụng thành công.nhưng hôm nay em áp dụng cho 1 blog khác thì.phần hiển thị thumb của phần tiêu đề bài viết khi ta di chuột vào nó không nằm phía dưới nữa mà lại hiển thị phái trên thanh menu ngang.( anh xem hình sẽ rõ hơn http://i263.photobucket.com/albums/ii124/haimiennam/01-1.gif )anh giúp em khắc phục lỗi này với

Admin
3/13/2011 05:50:00 SA Trả lời

Có thể em đã để xảy ra lỗi ở phần CSS, em hãy kiểm tra lại phần này hoặc copy lại đầy đủ code thử xem nhe, nếu vẫn thế thì cho anh biết để a tìm cách khắc phục lại. hihihi

XDN
4/09/2011 11:51:00 SA Trả lời

để không xuất hiện bài đăng mới nhất ở phần các bài liên quan thì phải làm thế nào anh Đình.

Admin
4/09/2011 09:56:00 CH Trả lời

Ý em là cho nó hiển thị như thế nào em?Có phải em không muốn bài viết nó bị lập lại đúng không em?

Admin
10/07/2011 04:29:00 SA Trả lời

Bài viết vừa được cập nhật, đã khắc phục lỗi lặp lại bài viết và chỉ còn sử dụng 1 file JS, điều này sẽ phần nào cải thiện tốc độ load. Bạn quan tâm có thể xem thêm phần cập nhật ở bài viết trên. ;))

5/17/2012 03:12:00 SA Trả lời

Bạn ơi cho mình hỏi,mình ko muốn hiển thị một nhãn mà mình muốn cho nó hiển thị toàn blog thì làm sao z bạn, bạn giúp mình nha, cám ơn bạn nhiều.

Admin
5/17/2012 03:39:00 SA Trả lời

Bạn chỉ cần thay 2 đoạn JS ở bước 3 thành đoạn code sau:
[code]<script src="http://data-traidatmui.appspot.com/scripts/tin247allpost_fixed.js" type="text/javascript"></script>[/code]

7/21/2012 08:52:00 SA Trả lời

admin oi cai nay minh muon khong cho xuat hien chu:(nhan xet) va phan mo ta cho bai viet lien quan thi lam the nao. mong admin co cau tra loi som. lam phien admin nhieu nhung rat cam on nhung bai viet co ich cua admin.......

Admin
7/21/2012 09:05:00 SA Trả lời

Để không hiển thị số nhậ xét thì bạn thay chữ "Nhận xét" ở biến text = "Nhận xét"; thành no (text = "no";).

Còn bạn muốn tắt phần mô tả thì bạn thay thuộc tính visibility: visible; trong .mota:hover span{ thành visibility: hidden;

7/21/2012 05:23:00 CH Trả lời

khong duoc admin oi. minh thu lam nhu admin huong dan ma khong thanh cong

Admin
7/22/2012 07:05:00 SA Trả lời

Bạn kiểm tra xem đã thay đổi chính xác chưa nhé. Và nếu không thành công thì cho mình xem bạn đã thay đổi như thế nào?

7/22/2012 09:32:00 CH Trả lời

chen code vao comment k duoc

Admin
7/22/2012 10:44:00 CH Trả lời

Để chèn code vào comment thì bạn cần phải mã hóa trước, bạn hãy click "Chèn code" ngay trên khung comment và dán code cần đưa vào comment để mã hóa. và lấy code mã hóa để chèn vào comment. Bạn đặt code giữa 2 thẻ [code] Code cần chèn[/code]

Admin
7/23/2012 03:47:00 SA Trả lời

Code mình nói bạn đưa mình xem là những chỗ mình hướng dẫn bạn sửa thôi,bạn đưa nguyên code quá dài và mình vẫn thấy bạn chỉ mới có chỉnh sửa chỗ text = "no"; là đúng thôi. Còn phần .mota:hover span{ mình hướng dẫn bạn sửa nhưng trong code bạn đưa vẫn chưa được sửa nên phần mô tả không ẩn được. Bạn đọc kỹ hướng dẫn trong comment mình hướng dẫn ở trên nhe.

6/03/2013 01:05:00 SA Trả lời

Nó không dc anh ơi! http://kysupanda90.blogspot.com

6/03/2013 01:12:00 SA Trả lời

Đc rồi, cái Javacrit ở trên bị lỗi. Thank anh

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