Xem Demo.
Việc đầu tiên là thiết lập CSS và 2 file js tạo hiệu ứng rồi đặt vào phần đầu của trang HTML, giữa 2 thẻ <head>, </head>.
<style type="text/css">
/*<![CDATA[*/
#posts {
padding: 0;
margin: 0;
}
#posts li {
width: 600px;
border: 1px solid #eee;
background-color: #F9F9F9;
background-image: none;
float: left;
clear: both;
list-style: none;
margin: 0 0 5px 0;
padding: 5px;
}
#posts a {
text-decoration: none;
color: #999;
font-size: 0.85em;
}
#posts img {
display: block;
float: left;
border: 1px #ccc solid;
background: white;
padding: 3px;
margin: 0 10px 0 0;
}
#posts h1 {
padding: 5px 0 0 0;
margin: 0;
color: #CC0033;
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
}
#posts p {
margin: 0;
padding: 0 0 10px 0;
}
/*]]>*/
</style>
<script src="http://www.web-kreation.com/demos/mootools-1.2_mouseenter-mouseleave/js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="http://www.web-kreation.com/demos/mootools-1.2_mouseenter-mouseleave/js/clickMe.js" type="text/javascript"></script>
/*<![CDATA[*/
#posts {
padding: 0;
margin: 0;
}
#posts li {
width: 600px;
border: 1px solid #eee;
background-color: #F9F9F9;
background-image: none;
float: left;
clear: both;
list-style: none;
margin: 0 0 5px 0;
padding: 5px;
}
#posts a {
text-decoration: none;
color: #999;
font-size: 0.85em;
}
#posts img {
display: block;
float: left;
border: 1px #ccc solid;
background: white;
padding: 3px;
margin: 0 10px 0 0;
}
#posts h1 {
padding: 5px 0 0 0;
margin: 0;
color: #CC0033;
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
}
#posts p {
margin: 0;
padding: 0 0 10px 0;
}
/*]]>*/
</style>
<script src="http://www.web-kreation.com/demos/mootools-1.2_mouseenter-mouseleave/js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="http://www.web-kreation.com/demos/mootools-1.2_mouseenter-mouseleave/js/clickMe.js" type="text/javascript"></script>
Bạn nên tải về file mootools-1.2.1-core-yc.js và file clickMe.js rồi upload lên webhost của bạn để lấy URL, sau đó đặt vào phần scr.
Kế đến là thiết lập HTML như bên dưới rồi đặt vào phần thân của trang HTML, giữa 2 thẻ <body>, </body>.
<ul id="posts">
<li>
<img src="/images/image1.jpg" alt="" />
<h1>This is the title of the first news</h1>
<p>And this is the summary of the first news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More »</a>
</li>
<li>
<img src="/images/image2.jpg" alt="" />
<h1>This is the title of the second news</h1>
<p>And this is the summary of the second news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More »</a>
</li>
<li>
<img src="/images/image3.jpg" alt="" />
<h1>This is the title of the third news</h1>
<p>And this is the summary of the third news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More »</a>
</li>
<li>
<img src="/images/image4.jpg" alt="" />
<h1>This is the title of the second news</h1>
<p>And this is the summary of the fourth news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More »</a>
</li>
</ul>
<li>
<img src="/images/image1.jpg" alt="" />
<h1>This is the title of the first news</h1>
<p>And this is the summary of the first news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More »</a>
</li>
<li>
<img src="/images/image2.jpg" alt="" />
<h1>This is the title of the second news</h1>
<p>And this is the summary of the second news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More »</a>
</li>
<li>
<img src="/images/image3.jpg" alt="" />
<h1>This is the title of the third news</h1>
<p>And this is the summary of the third news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More »</a>
</li>
<li>
<img src="/images/image4.jpg" alt="" />
<h1>This is the title of the second news</h1>
<p>And this is the summary of the fourth news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More »</a>
</li>
</ul>
Bạn nên chỉnh sửa URL ảnh đại diện, tiêu đề tin và nội dung tóm tắt của mỗi tin cho phù hợp với trang web của bạn.
No comments:
Post a Comment