» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj04dif5kbnu82fVC6TtFeSngULu_2R8l1h2FStDbc8YdTOdBBADw5FYkmJfvzV5dg14gMkIlTUJPagxVkSNr2vQpshOpJlIIpS9drbgeSV8nVczPN7pwRAdAyQ6CpqwAW4b8KDcLf-JDnf/";
showRandomImg = true;
imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
dcmcolor = "#000033";
dcmsize = "1";
aBold = true;
text = "nhận xét";
showPostDate = true; //nếu muốn hiển thị ngày đăng thay FALSE thành TRUE
summaryPost = 300; // số kí tự nội dung bài viết
icon = " » ";
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn trên blog của bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<script language="javascript" type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/mootools.1.11.js"></script>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj04dif5kbnu82fVC6TtFeSngULu_2R8l1h2FStDbc8YdTOdBBADw5FYkmJfvzV5dg14gMkIlTUJPagxVkSNr2vQpshOpJlIIpS9drbgeSV8nVczPN7pwRAdAyQ6CpqwAW4b8KDcLf-JDnf/";
showRandomImg = true;
imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
dcmcolor = "#000033";
dcmsize = "1";
aBold = true;
text = "nhận xét";
showPostDate = true; //nếu muốn hiển thị ngày đăng thay FALSE thành TRUE
summaryPost = 300; // số kí tự nội dung bài viết
icon = " » ";
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn trên blog của bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<script language="javascript" type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/mootools.1.11.js"></script>
5. Chèn tiếp code CSS vào trước thẻ ]]></b:skin>
#NewsTicker{
border:solid 1px #cccccc;
background:#eaf5e0;
width:350px; /* độ rộng của tiện ích*/
height:430px; /* chiều cao của tiện ích*/
}
#NewsTicker h1{
padding:6px;
text-align:center;
margin:0;
background:#dfe9d5;
color:#000000;
font-size:12px;
font-weight:bold;
}
#NewsVertical {
height: 375px; /* chiều cao của nội dung tiện ích*/
display: block;
overflow: hidden;
position: relative;
}
#controller{
cursor:pointer;
padding:5px 5px 0px 5px;
font-size:11px;
color:#666;
margin-left: 265px;
}
#play_scroll_cont{display:none;}
#TickerVertical {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#TickerVertical li {
display: block;
color: #333333;
font-size: 11px;
margin-bottom: 5px;
padding: 0px 6px 6px 6px;
float: left;
border-bottom:1px solid #ddd;
}
#TickerVertical li .NewsTitle{
color: #000000;
font-size: 12px;
font-weight:bold;
margin:0px;
}
#TickerVertical li a {
margin-bottom:2px;
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
text-decoration:none;
}
#TickerVertical li a:hover {
color: #666;
text-decoration:underline;
}
#TickerVertical li .NewsImg{
float:left;
border:1px solid #ccc;
padding:2px;
margin-right:5px;
margin-top:2px;
}
#TickerVertical li .NewsFooter{
display: block;
float:right;
color: #000000;
font-size: 10px;
margin:6px 0px 0px 0px;
}
border:solid 1px #cccccc;
background:#eaf5e0;
width:350px; /* độ rộng của tiện ích*/
height:430px; /* chiều cao của tiện ích*/
}
#NewsTicker h1{
padding:6px;
text-align:center;
margin:0;
background:#dfe9d5;
color:#000000;
font-size:12px;
font-weight:bold;
}
#NewsVertical {
height: 375px; /* chiều cao của nội dung tiện ích*/
display: block;
overflow: hidden;
position: relative;
}
#controller{
cursor:pointer;
padding:5px 5px 0px 5px;
font-size:11px;
color:#666;
margin-left: 265px;
}
#play_scroll_cont{display:none;}
#TickerVertical {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#TickerVertical li {
display: block;
color: #333333;
font-size: 11px;
margin-bottom: 5px;
padding: 0px 6px 6px 6px;
float: left;
border-bottom:1px solid #ddd;
}
#TickerVertical li .NewsTitle{
color: #000000;
font-size: 12px;
font-weight:bold;
margin:0px;
}
#TickerVertical li a {
margin-bottom:2px;
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
text-decoration:none;
}
#TickerVertical li a:hover {
color: #666;
text-decoration:underline;
}
#TickerVertical li .NewsImg{
float:left;
border:1px solid #ccc;
padding:2px;
margin-right:5px;
margin-top:2px;
}
#TickerVertical li .NewsFooter{
display: block;
float:right;
color: #000000;
font-size: 10px;
margin:6px 0px 0px 0px;
}
6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div id="NewsTicker">
<h1>CÁC BÀI VIẾT MỚI NHẤT</h1>
<div id="controller">
<div id="stop_scroll_cont"><a id="stop_scroll"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFNK7K2WBb5nnyhpO-vsumZhDAvr-9h6j5HeK3RQZvTJ43ZsgbLZzPDbYHE6Ly602AOAJ3Di_k4ipIYo7o8AUoLjIQbkG-Layyf-LBLQEbn8LETGdYEp84beJbObzAlJRLt61LJf4kO1AV/" width="14" height="14" border="0" align="absmiddle" /></a> Stop scroll</div>
<div id="play_scroll_cont"><a id="play_scroll"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhusiN14c4AyPEJSAMlOMS2eGfAYCGB_7LKgS4S1sXkdbwWFbDaz4JuWP8jvCFSw1klptAHeQ-_DYnNtRoF8B9-WBTlo6Gtb28HivqFSHr_2YPLsqDglWszzb9I33ctrp3GYTyo5cCbZOPV/" width="14" height="14" border="0" align="absmiddle"/></a> Play scroll</div></div>
<div id="NewsVertical">
<script language="javascript" type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/re_post_autoscroll.js.txt"></script>
</div></div>
<script language="javascript" type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/newsticker.js.txt"></script>
<h1>CÁC BÀI VIẾT MỚI NHẤT</h1>
<div id="controller">
<div id="stop_scroll_cont"><a id="stop_scroll"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFNK7K2WBb5nnyhpO-vsumZhDAvr-9h6j5HeK3RQZvTJ43ZsgbLZzPDbYHE6Ly602AOAJ3Di_k4ipIYo7o8AUoLjIQbkG-Layyf-LBLQEbn8LETGdYEp84beJbObzAlJRLt61LJf4kO1AV/" width="14" height="14" border="0" align="absmiddle" /></a> Stop scroll</div>
<div id="play_scroll_cont"><a id="play_scroll"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhusiN14c4AyPEJSAMlOMS2eGfAYCGB_7LKgS4S1sXkdbwWFbDaz4JuWP8jvCFSw1klptAHeQ-_DYnNtRoF8B9-WBTlo6Gtb28HivqFSHr_2YPLsqDglWszzb9I33ctrp3GYTyo5cCbZOPV/" width="14" height="14" border="0" align="absmiddle"/></a> Play scroll</div></div>
<div id="NewsVertical">
<script language="javascript" type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/re_post_autoscroll.js.txt"></script>
</div></div>
<script language="javascript" type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/newsticker.js.txt"></script>
8. Save tiện ích lại là xong
Nếu bạn muốn bài viết hiển thị theo từng nhãn thì bạn hãy thay code bên dưới
http://nguyenhoangnam.googlecode.com/files/re_post_autoscroll.js.txt
thành code sau
http://nguyenhoangnam.googlecode.com/files/re_label_autoscroll.js.txt
Đối với file re_post_autoscroll.js thì bạn không cần quan tâm đến nhãn bài viết vì nó sẽ tự động hiển thị các bài viết mới nhất cho toàn blog của bạn.
Chúc bạn thành công
0 nhận xét:
Đăng nhận xét