Loading post navigation ...
 
 

Pro page

23
Nhận xét

[ Yêu cầu ] : Tạo thanh HotNews cho blog (sử dụng mootools)

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Theo yêu cầu của bạn MiKaNguyen
[FD's BlOg] - Ở 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.


Enter your mail address:

23

Ác Quỷ

Bóc tem rùi tính :D

Ác Quỷ

Cái này đẹp wá :X

Y hệt cái tab giới thiệu blogspot mới của trang http://blogger.com (lúc chưa đăng nhập) FD nhỉ :X :X

Hay wá hay wá :X :X

share4vnn

cái này lại phải kết hợpới thủ thuật rút gọn tiêu đề các bạn nhé..nếu tiêu đề dài nó sẽ ghi chèn lên summaryPost nhìn rất xấu !

mmovn

chà... mọi ng thức khuya ghê :D

share4vnn

khuya cho yên tĩnh :D

Net360VT

ngon lanh qua suc ngay

Khách (ẩn danh)

hình như có bug , 2 dòng chữ chồng lên nhau , hix

fandung

@share4vnn : ủa, tiêu đề dài nó đâu có dè lên phần summary đâu em, đơn giản nó chỉ hiển thị lần lượt thôi mà, tiêu đề » summary

phattrien@so

hay, hay quá, quá hay. Chúc mừng 1 ly nhé.

phattrien@so

Tuy nhiên em check lại đi dũng ơi, em cho nó chạy khoảng chục bài là các chữ nó chồng lên nhau không đọc được.

fandung

cái đó hình như là do mình, khi click vào nhanh quá thì nó bị chồng lên nhau, để bình thường cho nó chạy thì không sao.

Ihđsdhh

Dũng ơi. Cái host new này dài quá. Muốn nó chỉ hiển thị trên phần main thôi. ko cho sang sidebar thì làm thế nào.

Ihđsdhh

Tại main của mình bên tay trái. sidebar bên tay phải.

fandung

@Quoc Hung : bạn chỉnh nó ngắn lại là đc,
thay đổi đồng thời độ rộng của 2 id này lại cho thích hợp :

div#news-1{
width: 960px;
height: 24px;
...
...
}

div#news-1 .gk_news_highlighter_wrapper{
float: left;
width: 820px;
...
...
}

Khách (ẩn danh)

http://fandung.blogspot.com/2009/07/thu-thuat-yeu-cau-tao-thanh-hotnews-cho.html cam on anh Dung da huong dan tao tien ich nay nha .Chan thanh cam on Anh !

Jesse Cartney

~x( cám ơn anh,em đang học mà đọc đc thủ thuạt hay của anh là phải làm thử ngay

Beaki89

anh ơi, cho e hỏi sao làm mà nó ko có dòng chữ hiện ra vậy.

Beaki89

anh ơi, cho e hỏi sao làm mà nó ko có dòng chữ hiện ra vậy.

nhocboy

sao ma em la hoài hok được

Unknown

cam on fandung nhieu. Da post thanh cong
DEMO http://tanchau123.blogspot.com :))

Unknown

a cung cấp cho e mấy file data đó đc ko ạ....Nó hơi chậm khi dùng chung...a gửi vào mail giúp e leduythangepu@gmail.com. Em cảm ơn!

Bùi Văn Hiển

các bác ghé qua blog của em, có gì góp ý cho em với nhé. thanks
http://comchayninhbinh.blogspot.com

Unknown

bạn dũng cho hỏi cacis file JS thay đổi như nào rồi, file này không còn nữa



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home