Home » Thủ thuật Blogger
Tạo thanh HotNews sử dụng mootools cho blog
Thứ Bảy, 23 tháng 4, 2011
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 DEMO

☼ Các bước 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)
Xem demo : LIVE DEMO

☼ Các bước 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; /* độ rộng của tiện ích*/
height: 20px; /* độ cao của tiện ích*/
text-align:center;
padding : 0px 0px 0px 82px;
clear : both;
color:#fff;
list-style-type : yes;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnKKzFeloMF30wwQqB2rT-PIaWtLrLbM8VCrV2AxtoTQOawkXa0h5Lix3Ez4K8LeV4CTQWCTxWFxmME6CsRl118uBk7pbjWibwjXZagJCDC9cBbcCG18whKhhLPE5P3HdCyhyGY8J9WkE/) no-repeat left; /*Nền của tiện í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 muốn in đậm text bạn thay FALSE thành TRUE*/
icon ="» ";
text = "no";
showPostDate = false;
summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = "» ";
numposts = 15; /*số bài viết hiển thị trong tiện ích này*/
home_page = "http://www.tranphucminh.blogspot.com/"; /*thay thành địa chỉ blog của bạn*/
</script><script src="http://traidatmui-tips.googlecode.com/files/hotnews_post.js" type="text/javascript"></script></marquee></div>
Bạn hãy dựa vào các dòng text hướng dẫn (dòng màu xanh) 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
.hotnews{
width:448px; /* độ rộng của tiện ích*/
height: 20px; /* độ cao của tiện ích*/
text-align:center;
padding : 0px 0px 0px 82px;
clear : both;
color:#fff;
list-style-type : yes;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnKKzFeloMF30wwQqB2rT-PIaWtLrLbM8VCrV2AxtoTQOawkXa0h5Lix3Ez4K8LeV4CTQWCTxWFxmME6CsRl118uBk7pbjWibwjXZagJCDC9cBbcCG18whKhhLPE5P3HdCyhyGY8J9WkE/) no-repeat left; /*Nền của tiện í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 muốn in đậm text bạn thay FALSE thành TRUE*/
icon ="» ";
text = "no";
showPostDate = false;
summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = "» ";
numposts = 15; /*số bài viết hiển thị trong tiện ích này*/
home_page = "http://www.tranphucminh.blogspot.com/"; /*thay thành địa chỉ blog của bạn*/
</script><script src="http://traidatmui-tips.googlecode.com/files/hotnews_post.js" type="text/javascript"></script></marquee></div>
Bạn hãy dựa vào các dòng text hướng dẫn (dòng màu xanh) 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

- Tạo popup chỉ xuất hiện một lần duy nhất cho blog
- Thủ thuật tự động gom các Widget trên Blogspot thành các Tab nội dung
- Thủ thuật tạo các nút điều khiển cho Blogspot
- Thành phần hiển thị popup đóng tự động
- Tiện ích "Bài viết liên quan" cho Blogger, bản nâng cao, có phân trang
- Tạo tab nhiều tiện ích cho blogspot
- Hướng dẫn tạo Drop Menu cho blog
- Tạo Menu Labels (Nhãn) xổ xuống cho Blogger
- Phân trang cho blog - Page Navigation
- Bộ nút tăng giảm font chữ trong web
- Hướng dẫn cài đặt tên miền cho blogspot
- Style mới cho tiện ích "Recent post" theo label ở Homepage
Comments[ 0 ]
Đăng nhận xét