Hiển thị bài viết giống trang tin247.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.quangvietmkt.blogspot.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.

theo traidatmui.com