Hiển thị bài viết giống 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://nguyenhoangnam.googlecode.com/files/tin247_post.js" type="text/javascript"></script>
<script src="http://nguyenhoangnam.googlecode.com/files/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://nguyenhoangnam.googlecode.com/files/tin247post_fixed.js" type="text/javascript"></script>

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

 nguồn : http://www.traidatmui.com