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

Ở thủ thuật trước mình cũng đã giới thiệu cho các bạn 1 thanh Hotnews với việc tự cập nhật bài viết mới theo nhãn hoặc cả blog. Ở thủ thuật đó mình chỉ dùng lệnh marquee để hiển thị các bài viết. Và ở bài này mình sẽ dùng mootools để hiển thị. Với việc dùng mootools thì thanh HotNews sẽ trở nên pro hơn nhiều.

Xem demo : LIVE DEMO

Với việc sử dụng mootools, 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.

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://data.fandung.com/blog/demo/hot-news/mootools.js' type='text/javascript'/>
<script src='http://data.fandung.com/blog/demo/hot-news/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 class="gk_news_highlighter" id="news-1">
<div class="gk_news_highlighter_interface">

<span class="text">HOT NEWS</span>
<div>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div>
</div>

<div class="gk_news_highlighter_wrapper">

<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://fandung.blogspot.com/";

</script>
<script src="http://data.fandung.com/blog/demo/hot-news/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://data.fandung.com/blog/demo/hot-news/post-hotnews.js

thành link này :

http://data.fandung.com/blog/demo/hot-news/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.

Chúc các bạn thành công.
Nguồn http://fandung.blogspot.com/