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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Loading...

18 nhận xét

  1. 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...

    Trả lờiXóa
  2. 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

    Trả lờiXóa
  3. 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

    Trả lờiXóa
  4. 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

    Trả lờiXóa
  5. để 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.

    Trả lờiXóa
  6. Ý 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?

    Trả lờiXóa
  7. 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. ;))

    Trả lờiXóa
  8. 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.

    Trả lờiXóa
    Trả lời
    1. 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]

      Xóa
  9. 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.......

    Trả lờiXóa
    Trả lời
    1. Để 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;

      Xóa
  10. khong duoc admin oi. minh thu lam nhu admin huong dan ma khong thanh cong

    Trả lờiXóa
    Trả lời
    1. 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?

      Xóa
    2. Để 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]

      Xóa
    3. 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.

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

    Trả lờiXóa
  12. Đc rồi, cái Javacrit ở trên bị lỗi. Thank anh

    Trả lờiXóa