Trang chủ > Thủ thuật blog > Tạo dòng chữ chạy dạng gõ văn bản

Tạo dòng chữ chạy dạng gõ văn bản

Trên blog bao giờ cũng vậy càng tiết kiệm được không gian thì càng tốt, nó sẽ giúp blog trông đẹp hơn. Vì vậy, đối với các đoạn văn bản hay một dòng chữ nào đó khá dài chúng ta thường để cho nó chạy với lệnh Marquee. Đó cũng là cách để hạn chế bớt phần không gian cho blog. Và hôm nay mình xin chia sẽ thêm một cách tiết kiệm không gian cũng khá thú vị đó là tạo dòng chữ chạy giống như chúng ta đánh văn bản. Xem demo ở đây

Hình ảnh minh họa

☼ Cách thực hiện thủ thuật

1. Đăng nhập và vào bố cục blog
2. Hãy thêm một HTML/Javascript
3. Copy và dán code dưới vào HTML/Javascript trên

var ts_line=new Array()
var ts_link=new Array()
ts_line[1]=”Chào bạn đã đến với blog của Singleboy”
ts_line[2]=”Blog này mình thiết kế với sự đam mê internet
ts_line[3]=”Hơn nữa mình muốn chia sẽ cùng các bạn những gì mình biết và những thông tin các bạn cần
ts_line[4]=”Cũng mong góp một phần trong việc phát triển Blog Việt
ts_line[5]=”Mong nhận được sự ủng hộ của các bạn
ts_line[6]=”Chúc các bạn vui vẻ và lướt web thật thích thú
ts_line[7]=”Thân ái chào – Singleboy

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=”#ffff99″ // màu nền
var ts_bordercolor=”#cccccc” //màu đường viền
var ts_bordersize=”1px” //kích cỡ đường viền
var ts_borderstyle=”solid” // loại đườ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 khung hiển thị
var ts_delay=”3000″ //khoảng cách thời gian hiển thị đoạn văn bản
var ts_speed=”35″ // tốc độ hiển thị các từ
var ts_linespread=”1.2″
var ts_rand=0

<!–

/*
Typing Scroller
Submitted by bengaliboy00@hotmail.com (hp: http://www.angelfire.com/nt/bengaliboy/)
With modifications by Dynamicdrive.com
For full source code, usage terms, and 100s more scripts, visit http://dynamicdrive.com
*/

//–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(‘

‘)

document.write(‘

<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);”>’)
document.write(‘

‘)
}
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&#8221;;
}

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&#8221;;
}

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
// –>

* Các dòng ts_line[1], ts_line[2],… là các đoạn văn bản sẽ hiển thị, ở đây đoạn văn bản ở dòng ts_line[1] sẽ hiển thị trước, xong sau đó đến ts_line[2], ts_line[3]… Nếu bạn muốn các đoạn văn bản hiển thị ở một dòng thì hãy gộp chúng lại thành một là ts_line[1] hoặc bạn muốn thêm đoạn văn bản thì hãy thêm ts_line[8], ts_line[9] Bạn hãy dựa vào phần chú thích “code màu đỏ” ở trên để chỉnh sữa cho phù hợp với blog bạn và có thể xóa bỏ các dòng chú thích ở code trên sau khi tùy chỉnh xong..
Chúc bạn thành công

Chuyên mục:Thủ thuật blog
  1. Chưa có phản hồi.
  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: