Home » Thủ thuật Blogger
Tạo thanh HotNews sử dụng mootools cho blog
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/AVvXsEgfxuYBUXBFV8hTYvfxgUt_06U5ofpBAiL5Lu-OXFBWkrG7pF2eorVguYwGO7B_HcFD9xQCc3FUzXTgReSex4uPFO9BX3s9727zWFjzHLjMXctQp29slfA9UHUP-oNbgGz3_4_eRFXnxEhv/) 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/AVvXsEgfxuYBUXBFV8hTYvfxgUt_06U5ofpBAiL5Lu-OXFBWkrG7pF2eorVguYwGO7B_HcFD9xQCc3FUzXTgReSex4uPFO9BX3s9727zWFjzHLjMXctQp29slfA9UHUP-oNbgGz3_4_eRFXnxEhv/) 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

- Code tạo một box nằm bên góc phải
- Cách đưa Sitemap vào blogger blog
- Tạo các Tab nội dung
- Mẹo vặt trong thiết kế Template Blogspot
- Tạo button cho phép bạn ẩn/hiện nội dung
- Mẫu đẹp cho bài viết được xem nhiều
- Tạo logo liên kết chạy ngang
- Tạo trang in chuyên nghiệp nhiều tùy chọn cho Blogspot
- Tự động làm mới trang Web/blog và chuyển hướng
- Tùy biến label thành tag cloud giống WP
- K14 - Pro Menu (với hiệu ứng prodown)
- Share 3 template bloger đẹp cho anh em
Comments[ 0 ]
Đăng nhận xét