Tạo dòng văn bản hiển thị kiểu gỏ văn bản

Thông thường khi không muốn cho 1 đoạn văn bản nào đó chỉ hiển thị trên 1 dòng hoặc 1 khu vực nhỏ nào đó, ta thường dùng hiệu ứng chạy chữ để hiển thị nó.Với việc này các đoạn văn bản đó sẽ không chiếm nhiều không gian trong blog của bạn.

Tương tự như thế nhưng với thủ thuật nầy văn bản hiện ra tương tự như khi ta đánh văn bản.

 Xem trước tại đây.

Vào Thiết kế (Design) >> Phần tử trang (Page Elements) >> Thêm tiện ích(Add A Gadget) >> Html/Javascript và dán đoạn code dưới vào trong phần nội dung của Html/Javascript.

<h3>Kynangso.com</h3> <script language="JavaScript1.2"> var ts_line=new Array() var ts_link=new Array() ts_line[1]="Chào mừng các bạn đến với kynangso.com. Blog được thành lập với niềm đam mê của bản thân." ts_line[2]="Với phương chăm học hỏi và chia sẽ, Kynangso.com luôn học hỏi để ngày càng hoàn thiện hơn." ts_line[3]="Chúc bạn luôn vui vẽ và thành đạt." var ts_fontcolor="#FB6B01" var ts_fontsize="10pt" var ts_fontweight="normal" var ts_fontfamily="Verdana" var ts_bgcolor="#ffffbb" var ts_bordercolor="#cccccc" var ts_bordersize="1px" var ts_borderstyle="solid" var ts_padding="5px" var ts_width="180px" var ts_height="100%" var ts_delay="3000" var ts_speed="35" var ts_linespread="1.2" var ts_rand=0 <!-- //--Don't edit below this line var longestmessage=1 for (i=2;i<ts_line.length;i++){ if (!ts_line[i] ) {ts_line[i] = ''; ts_link[i] = '#';} if (ts_line[i].length>ts_line[longestmessage].length) longestmessage=i } //Auto set scroller width var tscroller_width=ts_line[longestmessage].length lines=ts_line.length-1 //--Number of lines counter123 = 0; temp="" nextchar=-1; var shown = new Array(); for (i = 1; i <= lines; i++ ) { shown[i] = 0; } function checkshown() { var num = 0; for (i = 1; i<= lines; i++){ if (shown[i]) num++; } if ((num > (lines - 2))||(lines < 2)) { for (i = 1; i <= lines; i++ ) { shown[i] = 0; } } return; } if (ts_rand == 1) { checkshown(); do{ nextline=Math.floor(Math.random() * (lines + 1)); //1; } while (shown[nextline] != 0); shown[nextline] = 1; } else { nextline = 1; } cursor="\\" //if IE 4+ or NS6 if (document.all||document.getElementById){ document.write('<table style="width: '+ts_width+'; height: '+ts_height+';">') document.write('<tr><td') document.write(' style=" cursor:hand; background-color: '+ts_bgcolor+'; color: '+ts_fontcolor+'; font-family: '+ts_fontfamily+'; font-size: '+ts_fontsize+'; font-weight:'+ts_fontweight+'; border-color: '+ts_bordercolor+'; border-style: '+ts_borderstyle+'; border-width: '+ts_bordersize+'; padding: '+ts_padding+'; width: '+ts_width+'; height: '+ts_height+'; text-align:left; vertical-align:top; " onfocus="blur()" ') document.write('<a onclick="document.location=this.href;" id="banner_xyz_scroller" ') document.write(' style="line-height: '+ts_linespread+'; color: '+ts_fontcolor+'; font-family: '+ts_fontfamily+'; font-size: '+ts_fontsize+'; font-weight:'+ts_fontweight+'; " ') document.write (' href="javascript: void(0);"></a>') document.write('</td></tr></table>') } var scroller = document.getElementById("banner_xyz_scroller"); function animate(){ if (temp==ts_line[nextline] & temp.length==ts_line[nextline].length & nextline!=lines){ if (ts_link[nextline]) { //scroller.href="index.php?option=com_content&task=view&id="+ ts_link[nextline]; scroller.href="http://luyenthianhvan.org"; } if (ts_rand == 1) { checkshown(); do { nextline = Math.floor(Math.random() * (lines + 1)); //nextline++; }while (shown[nextline] != 0); shown[nextline] = 1; } else { nextline++; } nextchar=-1; scroller.innerHTML=temp; temp=""; setTimeout("nextstep()",ts_delay)} else if (nextline==lines & temp==ts_line[nextline] & temp.length==ts_line[nextline].length){ if (ts_link[nextline]) { //scroller.href="index.php&id="+ ts_link[nextline]; scroller.href="http://luyenthianhvan.org"; } if (ts_rand == 1) { checkshown(); do{ nextline= Math.floor(Math.random() * (lines + 1)); //1; }while (shown[nextline] != 0); shown[nextline] = 1; } else { nextline = 1; } nextchar=-1; scroller.innerHTML=temp; temp=""; setTimeout("nextstep()",ts_delay)} else{ nextstep()}} function nextstep(){ if (cursor=="\\"){ cursor="|"} else if (cursor=="|"){ cursor="/"} else if (cursor=="/"){ cursor="-"} else if (cursor=="-"){ cursor="\\" } nextchar++; temp+=ts_line[nextline].charAt(nextchar); scroller.innerHTML=temp+cursor setTimeout("animate()",ts_speed)} //if IE 4+ or NS6 if (document.all||document.getElementById) window.onload=animate // --></script>

Ghi chú:

- ts_line[1], ts_line[2], … là các đoạn văn bản sẽ hiển thị. Nếu bạn không muốn nó hiển thị nhiều lần thì gộp chung tất cả lại thành 1.

- Hãy dựa vào các code chú thích màu xanh để chỉnh sửa cho khung hiển thị cho phù hợp với ý đồ của mình và thay đổi các địa chỉ URL cho hợp lý. Có thể xóa các code chú thích màu xanh này đi khi thực hiện.

var ts_fontcolor=”#FB6B01″ - màu chữ
var ts_fontsize=”10pt” - kích thước chữ
var ts_fontweight=”normal” - độ đậm
var ts_fontfamily=”Verdana” - font chữ
var ts_bgcolor=”transparent” - màu nền
var ts_bordercolor=”#cccccc”  - màu của đường viền
var ts_bordersize=”1px” - độ rộng của đường viền
var ts_borderstyle=”solid” - style của đường viền
var ts_padding=”5px” - căn lề
var ts_width=”200px” - độ rộng của khung hiển thị
var ts_height=”100px” - chiều cao của khung hiển thị
var ts_delay=”3000″ - thời gian giãn cách hiển thị các đoạn văn bản
var ts_speed=”35″ - tốc độ typing (tốc độ hiển thị các từ).

Nguồn: blog caobang