Nam Ròm




Hình xưa VNCH
Tin tức đó đây
Sách xưa thời VNCH
Hình vui Ảnh đẹp
Thơ vui, chuyện tiếu mẹo vặt linh tinh ....

Thứ Hai, 15 tháng 10, 2012

Cách tạo Recent Posts tự động scroll với nút Stop/Play

  Ròm làm theo được rồi ,chỉ còn chú thích thêm vào những gì Ròm đã hiểu .

bongnguoilangle.blogspot.de

Tiện ích Recent Posts tự động scroll với nút Stop/Play bằng mootools


Hôm nay ở thủ thuật này mình sẽ giúp các bạn tạo Recent Posts tự động scroll bằng mootools.  Bạn sẽ có thể tùy chọn Stop Scroll hay Play Scroll rất dễ dàng. Với hiệu ứng mootools tiện ích này sẽ giúp các bài viết của bạn scroll rất mượt và rất tiện lợi với nút Stop/Play.


Hình ảnh minh họa

» 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>

Code dưới nên chú ý và đừng quên phần này ,vì đây là phần quan trọng nhất  .Còn những phần khác thì tùy chỉnh không quan trọng mấy 
home_page = "http://thuoaymuahong.blogspot.com/"; //thay bằng địa chỉ blog của bạn .Cuối link chú ý tới cái dấ "/ " coi nó đúng không ,vì nó có thể dư ra một cái dấu / khi copie dán vào thay .
____________________________________



<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://lh3.googleusercontent.com/-_Fv9pINaLTc/UHvEhtj2_aI/AAAAAAAAEnI/tzRrE_naY_0/s225/MG-4278-Blogspot.jpg";

 //thay bằng link tới hình bạn muốn hiển thị làm Thumnail khi trong bài viết không có hình ảnh
showRandomImg = true;
imgwidth = 42; //Chiều rộng ảnh thumb
imgheight = 40; //Chiều cao ảnh thumb
dcmcolor = "#000033";
dcmsize = "1";
aBold = true;
text = "nhận xét";
showPostDate = true; //nếu không muốn hiển thị ngày đăng thay TRUE thành FALSE
summaryPost = 120; // số ký tự nội dung bài viết
icon = " » ";
numposts = 8; //số bài viết hiển thị
label = "Bài Viết Mới Nhất"; //thay bằng tên nhãn trên blog của bạn
home_page = "http://thuoaymuahong.blogspot.com/"; //thay bằng địa chỉ blog của bạn
</script>

<script language="javascript" type="text/javascript" src="http://bongnguoilangle.googlecode.com/files/mootools.1.11.js"></script>
 ______________________________________

5. Chèn tiếp code CSS sau vào trước thẻ  ]]></b:skin>

 
 
______________________________________
#NewsTicker{
border:solid 1px #cccccc;
background:#eaf5e0; /* màu nền của khung tiện ích, nếu bạn muốn nền trong suốt thì thay mã màu này thành transparent
width:315px; /* độ rộng của tiện ích*/
height:450px; /* 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

<h1>Bài Viết Mới Nhất</h1> Có thể viết theo ý mình
_________________________
 
<div id="NewsTicker">
<h1>Bài Viết Mới Nhất</h1>
<div id="controller">
<div id="stop_scroll_cont"><a id="stop_scroll"><img src="https://lh5.googleusercontent.com/-n2JuB67fY4U/UHvJ0GOe01I/AAAAAAAAEnc/

7dSLdpEfNGE/s14/stop.png" width="14" height="14" border="0" align="absmiddle" /></a> Stop scroll</div>
<div id="play_scroll_cont"><a id="play_scroll"><img src="https://lh6.googleusercontent.com/-e3RVY-noZ44/UHvKOkS_-iI/AAAAAAAAEnk/

s3cY5IdkA_8/s14/play.png" width="14" height="14" border="0" align="absmiddle"/></a> Play scroll</div></div>

<div id="NewsVertical">
<script language="javascript" type="text/javascript" src="http://bongnguoilangle.googlecode.com/files/re_post_autoscroll.js"></script>

</div></div>

<script language="javascript" type="text/javascript" src="http://bongnguoilangle.googlecode.com/files/newsticker.js"></script>

 ________________________________

8. Save tiện ích lại là xong

Chúc các bạn tạo được 1 trang blog như ý!


7 nhận xét:

  1. [img]http://i1138.photobucket.com/albums/n526/gioheomay54/397769_134964169950777_100003115852090_170160_1484165559_n.jpg[/img]

    Hú hí

    Trả lờiXóa
    Trả lời
    1. Bớ ngừ ta chị Gió spam hình vui đẹp vào nhà Ròm kà hehehe

      Bên em đã bắt đầu vào thu là từ từ vàng hết rồi chị Gió ơi
      [img]http://lotharf.files.wordpress.com/2009/10/herbst.jpg?w=450&h=360[/img]

      Xóa
  2. Trả lời
    1. Hình chôm trên Net thôi ,nhưng ở ngoài bên em cũng gần tương tợ như trong hình .Để khi nào siêng và lá đổi màu vàng nhiều nhiều ,em chạy một vòng chụp hình cho chị xem há hehehe

      Xóa
  3. Chị ko hiểu làm cái này với mục đích gì Ròm ơi

    Trả lờiXóa
    Trả lời
    1. Những bài đăng mới trong nhà mình nó hiện ra và chạy vòng vòng đó mà chị .
      Chị xem trong trang này ,cái box ở dưới hết "Những bài viết về Blogger" , bài viết bày cách tạo ra nó đó chị Gió .

      Xóa
  4. Thanks Ròm, anh quên ko thay địa chỉ blog của mình.

    Trả lờiXóa

Bấm vào dưới avata "Tham gia trang web này " để có thể biết bài mới của Ròm