TIN TỨC BÁO CHÍ

Gốc > Bài viết > Chia sẻ kinh nghiệm >

Hướng dẫn Tạo thanh HotNews cho blog (sử dụng mootools)

Tạo thanh HotNews cho blog (sử dụng mootools)
31 - Jul, 2009 | Home | Thu Thuat Blog | Theo dõi |  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://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 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://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
 Lời tỏ của BLOG: Mục đích của tôi uploads bài này lên để chúng ta cùng nghiên cứu, bản thân tôi cũng chưa hiểu biết nhiều về Link, đang trong giai đoạn tìm hiểu, rất mong các bạn cùng chia sẻ!.
Nhắn tin cho tác giả
Nguyễn Ngọc Sơn @ 00:05 02/01/2010
Số lượt xem: 497
Số lượt thích: 0 người
 
Gửi ý kiến