Tạo thanh HotNews sử dụng mootools cho blog

Thất Tình.Biz | Phần mềm | Tin tức | Thủ Thuật | Phim | Game|Teen Sock| Scandan
Với việc sử dụng mootools thì thanh HotNews sẽ trở nên pro hơn nhiều, mặc định các bài viết sẽ tự động luân chuyển trong 1 khoảng thời gian xác định trước, ngoài ra còn có thêm button để điều chỉnh việc hiển thị các bài viết trên thanh hotnews.
Xem demo : LIVE DEMO

Hình ảnh minh họa:

☼ Các bước thực hiện:
1. vào bố cục
2. vào chỉnh sửa code HTML
3. chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script src=’http://fandung.110mb.com/Hotnews-mootools/mootools.js’ type=’text/javascript’/>
<script src=’http://fandung.110mb.com/Hotnews-mootools/engine_compress.js’ type=’text/javascript’/>
<script type=’text/javascript’>
try {$Gavick;}catch(e){$Gavick = {};};
$Gavick["gk_news_highlighternews-1"] = {
“animationType” : 2,
“animationSpeed” : 250,
“animationInterval” : 5000,
“animationFun” : Fx.Transitions.linear,
“mouseover” : 1};
</script>
<style type=’text/css’>
#bd {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
color: #000000;
margin-top: 5px;
font-size: 12px;
}
.text {
color:#98BF2F;
margin-left:8px;
}
/* CSS HotNews */
div#news-1 .gk_news_highlighter{
font-family: Verdana, Arial;
font-size: 11px;
color: #666;
}
div#news-1{
width: 960px;
height: 24px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
background: #c51c99;
clear: both;
overflow: hidden;
}
div#news-1 .gk_news_highlighter_wrapper{
float: left;
width: 820px;
height: 24px;
line-height: 24px;
overflow: hidden;
position: relative;
}
div#news-1 .gk_news_highlighter_item{
width: auto;
height: 24px;
padding-left: 20px;
display: none;
position: absolute;
}
div#news-1 .nowrap{
white-space: nowrap;
}
div#news-1 .gk_news_highlighter_title{
padding-left: 5px;
}
div#news-1 .gk_news_highlighter_desc{
padding-right: 5px;
}
div#news-1 .gk_news_highlighter_interface{
float: left;
width: 120px;
height: 24px;
text-align: right;
line-height: 24px;
z-index: 1000;
}
div#news-1 .gk_news_highlighter_interface .text{
float: left;
display: block;
width: auto;
padding-left: 5px;
font-weight: bold;}
div#news-1 .gk_news_highlighter_interface div {width: 30px; float: right;}
div#news-1 .gk_news_highlighter_interface a.prev,
div#news-1 .gk_news_highlighter_interface a.next {
cursor: pointer;
width: 13px;
height: 24px;
display: block;
background: url(‘http://i342.photobucket.com/albums/o433/bkprobk/play.png’) no-repeat 0 50%;
float: left;
}
div#news-1 .gk_news_highlighter_interface a:hover.prev {
background-position: -13px 50%;
}
div#news-1 a,
div#news-1 a:link,
div#news-1 a:visited,
div#news-1 a:active,
div#news-1 a:focus {
color: #FFFFFF;}
div#news-1 a:hover {
}
div#news-1 .gk_news_highlighter_interface a.next {
float: right;
background-position: -26px 50%;
}
div#news-1 .gk_news_highlighter_interface a:hover.next {
background-position: -39px 50%;
}
</style>

4. Save template.
5. Tạo 1 widget HTML/javascript và dán code bên dưới vào :

<div id=”bd”>
<div id=”news-1″>
<div>
<span>HOT NEWS</span>
<div>
<a href=”#”></a>
<a href=”#”></a>
</div>
</div>
<div>
<script language=”JavaScript”>
imgr = new Array();
showRandomImg = false;
aBold = true;
text = “no”;
showPostDate = false;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = “#000″;
icon = ” » “;
label = “Love”;
numposts = 10;
home_page = “http://blog4vn.blogspot.com/”;
</script>
<script src=”http://fandung.110mb.com/Hotnews-mootools/post-hotnews.js” type=”text/javascript”></script>
</div>
</div>
</div>

- Điều chỉnh lại các code màu đỏ.
- code trên là hiển thị các bài viết mới của blog, nếu muốn hiển thị các bài viết mới theo từng 1 nhãn nhất định thì thay link javascript (ở đoạn code trên) :
http://fandung.110mb.com/Hotnews-mootools/post-hotnews.js
thành link này :

http://fandung.110mb.com/Hotnews-mootools/label-hotnews.js

và sửa code label = “Love”; tương ứng với nhãn mà bạn muốn hiển thị bài viết.
Các bạn download các file .js của thủ thuật này tại đây
Chúc các bạn  thành công.