Tạo thanh HotNews sử dụng mootools cho blog
Wednesday, 30 December 2009
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 DEMOHình ảnh minh họa:
>> ..Hướng dẫn đổi tên miền Blogger [video]
☼ 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 :
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ũng như các thủ thuật khác có sử dụng các file có đuôi .js, anh3ngơ khuyến cáo các bạn lưu các file này để phòng trường hợp host bị hỏng để có thể upload lên các host free khác theo hướng dẫn tại bài
Upload file .js lên host free 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.
Tags:
Breakingnews,
Header - Navigation,
Khoi tao Blog
Ý kiến bạn đọc [ 0 ]
Ý kiến của bạn