Thủ thuật tạo thanh Hotnews chạy ngang

24 Dec

Để giúp cho đọc giả khi vào blog/web của bạn dễ dàng cập nhật những bài viết mới nhất mà bạn vừa đăng trên blog/web thì bạn có thể dùng một tiện ích hiển thị bài viết mới nhất mình đã có giới thiệu đến các bạn. Và hôm nay theo yêu cầu của bạn mình cũng xin chia sẽ cùng các bạn tạo thêm một tiện ích gọi là “Hoàng Anh VânHotnews“, tiện ích này sẽ giúp các bài viết mới nhất của bạn được cập nhật và tạo thành một chuỗi bài viết chạy ngang từ phải sang trái. Với hiệu ứng chữ chạy này sẽ dễ dàng gây sự chú ý đến đọc giả hơn.

Xem demo: LIVE DEMO
☼ Cách thực hiện
1. Bạn đăng nhập vào tài khoản blogspot
2. Vào phần thiết kế (Design)
3. Chọn tiếp chỉnh sửa HTML (Edit HTML)
4. Thêm code bên dưới vào trước thẻ]]></b:skin>

.hotnews{

width:448px; /* đ rng ca tin ích*/

height: 20px; /* đ cao ca tin ích*/

text-align:center;

padding : 0px 0px 0px 82px;

clear : both;

color:#fff;

list-style-type : yes;

background : url(http://lh5.ggpht.com/_BTztXRwC9ik/TGVAhd4etkI/AAAAAAAACwM/oNPY_L3OsIs/hotnew.gif) no-repeat left; /*Nn ca tin ích*/

border-right : 0px solid #ff0000;

border-left : 0px solid #0000ff;

}

.hotnews a{

color:#fff;}

.hotnews a:hover{

color:#00ffff;}

5. Save template lại
6. Trở lại phần tử trang thêm một tiện ích HTML/Javascript và thêm code been dưới vào phần tử đó.

<div class=”hotnews”>

<marquee onmouseout=”this.start()” direction=”left” ) align=”center” scrollamount=”4″ onmouseover=”this.stop()” width=”100%” height=”25″ >

<script language=”JavaScript”>

imgr = new Array();

showRandomImg = true;

tablewidth = 392;

cellspacing = 1;

borderColor = “”;

bgTD = “”;

imgwidth = 0;

imgheight = 0;

fntsize = 12;

acolor = “”;

aBold = false; /*nếu mun in đậm text bn thay FALSE thành TRUE*/

icon =”» “;

text = “no”;

showPostDate = false;

summaryPost = 100;

summaryFontsize = 12;

summaryColor = “#000”;

icon2 = “» “;

numposts = 15; /*s bài viết hin th trong tin ích này*/

home_page = “http://chipkool.blogspot.com/&#8221;; /*thay thành địa ch blog ca bn*/

</script><script src=”http://singleboy010.110mb.com/Myfile/javascript_tips/hotnews_post.js&#8221; type=”text/javascript”></script></marquee></div>

Bạn hãy dựa vào các dòng text hướng dẫn trong code để có thể tùy chỉnh lại cho tiện ích phù hợp với blog của mình.
7. Sau khi hoàn tất việc chỉnh sửa thì bạn hãy save lại
Chúc bạn thành công
THEO:timgiasu.blogspot.com

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: