Các đoạn mã tạo chữ chạy (Tổng hợp)

September 23, 2014
Dưới đây là tổng hợp các đoạn mã dùng để tạo các kiểu chữ chạy khác nhau trên web/blog. Hướng dẫn này cũng có khá nhiều bài viết chia sẽ trên mạng rồi, nhưng mình cũng cố gắng tổng hợp lại và hướng dẫn chi tiết để các bạn thực hiện 1 cách dễ dàng nhất.
Code chữ chạy nhiều kiểu cho Blog
Xin lưu ý các bạn, các đoạn mã này chỉ hoạt động trên các trình soạn thảo văn bản có hỗ trợ ngôn ngữ HTML thôi nhé (Mình thấy đa phần trình soạn thảo trên các hệ thống Blog miễn phí đều hỗ trợ HTML, riêng diễn đàn hầu như là không).
1. Chữ chạy ngang từ phải qua trái
Đây là đoạn mã cơ bản nhất, bạn chỉ việc để dòng chữ cần cho chạy vào giữa 2 thẻ MARQUEE là được.
Đoạn mã:
<marquee>DoPhuQuy's Blog</marquee>
Kết quả:
DoPhuQuy's Blog
Lưu ý quan trọng: Thẻ marquee phía sau lúc nào cũng phải có dấu "/" ngay trước nhé, nếu không sẽ bị lỗi chạy cả bài viết luôn đó. Chú ý điều này là được!
Từ đoạn mã cơ bản ở trên, chúng ta đặt các thuộc tính khác nhau vào trong thẻ marquee để tạo dòng chữ chạy với nhiều kiểu khác nhau.
2. Chữ chạy ngang từ trái qua phải:
<marquee direction="right">DoPhuQuy's Blog</marquee>
DoPhuQuy's Blog
3. Chữ chạy từ trên xuống dưới:
<marquee direction="down">DoPhuQuy's Blog</marquee>
DoPhuQuy's Blog
4. Chữ chạy từ dưới lên trên:
<marquee direction="up">DoPhuQuy's Blog</marquee>
DoPhuQuy's Blog
5. Chữ chạy qua lại:
<marquee behavior="alternate">DoPhuQuy's Blog</marquee>
DoPhuQuy's Blog
6. Chữ đứng, mũi tên 2 bên chạy ra vào:
<marquee behavior="alternate" width="10%">>></marquee>DoPhuQuy's Blog<marquee behavior="alternate" width="10%"><< </marquee>
>>DoPhuQuy's Blog<<
7. Chữ chạy có màu nền:
<font ><marquee direction="left" style="background:orange">DoPhuQuy's Blog</marquee></font>
DoPhuQuy's Blog
8. Chữ chạy có khung xung quanh:
<marquee style="border:blue 2px SOLID">DoPhuQuy's Blog</marquee>
DoPhuQuy's Blog
9. Chữ chạy và biến mất:
<marquee behavior="alternate"><marquee width="150">DoPhuQuy's Blog</marquee></marquee>
DoPhuQuy's Blog
10. Chữ chạy ngang, rê chuột vào thì đứng, đưa chuột ra chạy tiếp:
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">DoPhuQuy's Blog</marquee>
DoPhuQuy's Blog
(Bài viết Các đoạn mã tạo chữ chạy cũng là phần trả lời cho thắc mắc của bạn Bình An bên Yahoo)
Đã có 49 lời bình luận cho chủ đề Các đoạn mã tạo chữ chạy (Tổng hợp). Trang web dophuquy.com rất hoan nghênh đón nhận những lời bình luận mang tính xây dựng từ độc giả.
  1. lam code tạo chữ chạy nhìn hay quá
  2. Anonymous Mấy cái mã chữ chạy này hay quá =D>
  3. Ty Nguyễn Bạn ơi làm ơn chỉ mình làm tiêu đè Blogger bằng chày chạy giông như trên đi ! thanks nhìu !
  4. Tranh biếm họa @Ty Nguyễn: Có phải bạn muốn nói tạo chữ chạy ngang trên thanh tiêu đề của Blogger phải ko?. Nếu vậy thì bạn làm như sau:
    - Bạn vào Mẫu, chọn Chỉnh sửa HTML
    - Bạn bấm tổ hợp phím Ctrl+F để tìm đến mã </head>.
    - Bạn chèn đoạn mã dưới đây vào trên </head> là được:
    <script>
    var txt="Bạn đặt chữ cần chạy ở đây nha";
    var espera=150;
    var refresco=null;
    function rotulo_title() {
    document.title=txt;
    txt=txt.substring(1,txt.length)+txt.charAt(0);
    refresco=setTimeout("rotulo_title()",espera);
    }
    rotulo_title();
    </script>
  5. Đức Văn không biêt làm sao để tạo được cái đám mây có số 1 2 3 4 như trên nhận xet đó nhỉ

  6. Đỗ Phú Quý @Đức Văn: Bạn xem lại bài viết Đánh số thứ tự nhận xét nhé! :)
  7. Quang Hoàn cảm ơn bạn nhiều. Bạn có thể chỉ dẫn thêm về làm sao để thay đổi Font chữ , kích thước chữ, làm chữ đậm, tạo màu cho chữ và thay đổi tốc độ chạy của chữ...được không ?
    Rất mong bạn giúp đỡ.
  8. Đỗ Phú Quý @Quang Hoàn:
    - Tạo chữ đậm: Bạn chèn cặp thẻ <b></b> bao quanh dòng chữ cần làm đậm. Ví dụ:
    <marquee><b>DoPhuQuy's Blog</b></marquee>
    - Tùy chỉnh font chữ, kích thước, màu chữ: Bạn chèn cặp thẻ <font></font> (kèm các thuộc tính trên) bao quanh dòng chữ. Ví dụ:
    <marquee><font size="5" face="Arial" color="#FF0000">DoPhuQuy's Blog</font></marquee>
    (size: kích thước chữ, face: font chữ, color: màu sắc chữ)
    - Thay đổi tốc độ chạy: Bạn chèn thuộc tính scrollamount vào trong thẻ <marquee> đầu tiên. Ví dụ:
    <marquee scrollamount="2">DoPhuQuy's Blog</marquee>
    (Giá trị scrollamount càng lớn thì chữ chạy càng nhanh)
  9. Quang Hoàn Cảm ơn bạn rất nhiều. Mình chưa từng thấy ai giúp đỡ tận tình, tỉ mỉ và nhanh như vậy. bạn rất xứng đáng nhận được thật nhiều lời khen ngợi của bạn đọc.
  10. Đỗ Phú Quý @Quang Hoàn: Mình rất vui vì hướng dẫn này có ích cho bạn. Cám ơn bạn đã động viên nha!
  11. Quang Hoàn Chào bạn, mình lại phải phiền bạn: Mình làm liên kết chạy ngang trên web bằng hình ảnh, tất cả đều ổn, chỉ có điều nó chạy hết hình rồi phải thật lâu (bằng khoảng thời gian của chính liên kết đó chạy) thì nó mới chạy lại lần nữa.
    Mình muốn nhờ bạn chỉ giáo: Làm thế nào để cho liên kết đó chạy hết hình cuối rồi chạy tiếp ngay từ hình hình đầu như khi nó mới bắt đầu.
    Nói hơi dài nhưng hy vọng là bạn hiểu rõ hơn vướng mắc của mình.
    Rất mong bạn giúp.
    Cảm ơn trước nhé.
  12. Đỗ Phú Quý @Quang Hoàn: Ý của bạn là muốn các hình ảnh (banner,logo liên kết) sẽ nối đuôi nhau chạy liên tục, và khi hình ảnh cuối cùng vừa chạy ra khỏi thì hình ảnh đầu tiên sẽ chạy "nối ngay đuôi" luôn đúng ko? Nếu vậy thì mình không giúp được rồi, mà mình nghĩ cũng chẳng ai làm được đâu! :)
    Dưới đây là đoạn code tạo liên kết 4 banner chạy ngang liên tục (banner cuối cùng vừa khuất thì banner đầu tiên sẽ chạy ra lại), rê chuột lên banner thì sẽ dừng lại (thả chuột ra chạy tiếp). Đoạn code này mình muốn chia sẽ để bạn cũng như các bạn khác đang cần tìm đoạn code tương tự thì có thể tham khảo thêm:

    <marquee onmouseover="this.stop()" onmouseout="this.start()" behavior="left"> <a href="URL_1" target="_blank" title="TENWEBSITE_1"> <img border="0" src="LINK_BANNER_1" width="200" height="90"/> </a> <a href="URL_2" target="_blank" title="TENWEBSITE_2"> <img border="0" src="LINK_BANNER_2" width="200" height="90"/> </a> <a href="URL_3" target="_blank" title="TENWEBSITE_3"> <img border="0" src="LINK_BANNER_3" width="200" height="90"/> </a> <a href="URL_4" target="_blank" title="TENWEBSITE_4"> <img border="0" src="LINK_BANNER_4" width="200" height="90"/> </a></marquee>

    Bạn thay lại các giá trị tô đậm tương ứng:
    + URL: Là địa chỉ website
    + TENWEBSITE: Là tên website
    + LINK_BANNER: Link hình ảnh làm Banner
    + Ngoài ra, các giá trị border="0", width="200", height="90" lần lượt là độ dày đường viền bao quanh hình ảnh, chiều rộng banner, chiều cao banner.
    Vậy nếu muốn thêm banner thứ 5,6,7... thì sao? Bạn chỉ việc thêm đoạn code tương tự dưới đây vào ngay trước thẻ đóng </marquee> rồi chỉnh sửa như trên là được:

    <a href="URL_X" target="_blank" title="TENWEBSITE_X"> <img border="0" src="LINK_BANNER_X" width="200" height="90"/> </a>
  13. Đỗ Phú Quý Mình bổ sung thêm code liên kết nhiều banner chạy lên liên tục, rê chuột vào thì dừng lại:

    <marquee onmouseover="this.stop()" onmouseout="this.start()" behavior="left" direction="up" width="200"> <a href="URL_1" target="_blank" title="TENWEBSITE_1"> <img border="0" src="LINK_BANNER_1" width="200" height="90"/> </a> <br/><a href="URL_2" target="_blank" title="TENWEBSITE_2"> <img border="0" src="LINK_BANNER_2" width="200" height="90"/> </a> <br/><a href="URL_3" target="_blank" title="TENWEBSITE_3"> <img border="0" src="LINK_BANNER_3" width="200" height="90"/> </a> <br/><a href="URL_4" target="_blank" title="TENWEBSITE_4"> <img border="0" src="LINK_BANNER_4" width="200" height="90"/> </a></marquee>

    Cách thay thế giống Nhận xét 12 trên nhé!
    Ngoài ra, nếu bạn muốn thêm 1 liên kết banner khác thì bạn chỉ việc chèn đoạn code dưới đây và ngay trước thẻ đóng </marquee>:

    <br/><a href="URL_X" target="_blank" title="TENWEBSITE_X"> <img border="0" src="LINK_BANNER_X" width="200" height="90"/> </a>
  14. Quang Hoàn Rất cảm ơn bạn.
  15. Quang Hoàn Bạn có thể hướng dẫn mình tạo Link gắn vào bài viết được không ? (ví dụ: trong bài viết có câu: "xem tại đây" khi nhấp chuột nó dẫn tới một liên kết web khác), Website (không phải Blog) của mình là Free nên mặc định trong các bài viết không ad Link được. Rất mong bạn chỉ giáo.
    Thân
  16. Đỗ Phú Quý @Quang Hoàn: Bạn cho mình tên dịch vụ web miễn phí bạn đang sử dụng được ko?
    Mà mình nghĩ nó đã cấm cho chèn link vào bài viết thì việc tạo link dạng anchor text "xem tại đây" có gì khác nhau đâu bạn!?
  17. Quang Hoàn Mình làm được rồi bạn à, thực ra là nó cho phép, chỉ do mình chưa tìm hiểu kỹ, dịch vụ web free mình đang dùng là wevina.vn ! Bạn chỉ cho mình cách tạo một Forum cho Website được không ? (Có lẽ mình là người đã làm phiền bạn nhiều nhất nhỉ ?)
    Rất cảm ơn vì bạn đã lưu tâm.
  18. Đỗ Phú Quý @Quang Hoàn: Việc tạo forum mình không thể chỉ bạn trong giới hạn của 1 comment như thế này được.
    Bạn có thể sử dụng 1 số dịch vụ forum miễn phí (như eazy.vn chẳng hạn) để tham khảo, làm quen trước...
    Khi bạn đã tự đặt ra được câu hỏi về mã nguồn diễn đàn này thì mình sẽ giúp, mọi câu hỏi về phpBB mình đều có thể giải quyết!
  19. Quang Hoàn Thực ra mình cũng hiểu phần nào v/v xây dựng 1 forum không đơn giản mà cần phải có kiến thức, ở đây bạn đã cho mình biết hướng đi với những chỉ dẫn cơ bản, bạn đã giúp mình rất nhiều, mình sẽ còn cần bạn giúp rất nhiều.
    Cảm ơn bạn đã nhiệt tình và tận tâm.
  20. Battousai Hitokiri cho mình hỏi là giờ mình có 2 cái chữ chạy, mình muốn chữ chạy thứ 2 chạy sau chữ chạy thừ nhất 0,5s thì mình làm sao
    tks
  21. Voi Con @Battousai Hitokiri: Bạn chỉ có thể cho dòng chữ thứ 2 chạy chậm/nhanh hơn so với dòng 1 chứ không thể cho xuất hiện sau 1 thời gian so với dòng chữ 1 được.
  22. Battousai Hitokiri làm chữ chạy tạo thành sóng lượn làm thế nào
    mình tính làm theo thời gian, nhưng ko đc thì hết cách :(
  23. Voi Con @Battousai Hitokiri: Bạn thử tham khảo chữ chạy hình Sin bên dưới nhé:
    <marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">DoPhuQuy's Blog</marquee></marquee>
  24. Battousai Hitokiri Voi con: mình copy lun code mà sao chữ nó ko chạy hình Sin, vẫn chạy ngang như bình thường
  25. Anonymous Nhìn code chữ chạy rất có ích
  26. Nam Hai mấy cái chữ Phú Quý đó chạy nhanh quá bạn ạ. Bạn chỉnh sủa code cho nó chạy chậm lại tí đc không? Cảm ơn bạn.
  27. Đỗ Phú Quý @Nam Hai: Để tùy chỉnh tốc độ chạy, bạn hãy chèn thuộc tính scrollamount vào trong thẻ marquee đầu tiên bạn nhé. Ví dụ:
    <marquee scrollamount="2" >DoPhuQuy's Blog</marquee>
    Bạn hãy thay đổi giá trị 2 thành giá trị khác để tăng giảm tốc độ chạy nhé!
  28. tuan anh Le còn code nào khác nửa k
  29. Anonymous may code nay post len dien dan khong hien thi nhi
    bo len blog thi duoc.
  30. Du Lich Quoc Te gifa đây
  31. Huỳnh Anh Tuấn Rất hay, rất dễ hiểu, cám ơn bạn nhiều!
  32. Pi nguyễn bạn bít làm sap cho anh chạy tu dưới lên ròi dừng lại 1 2 giây ròi tới ảnh # chạy tiếp không bạn
  33. Pi nguyễn co g bạn giup minh voi nha https://www.facebook.com/PINGUYEN25251325?ref=tn_tnmn
  34. hiep.nguyen2812 HIỆP HÙNG
    mình thử rất nhiều lần nhưng ko được hixhix xin chỉ giúp vs?
  35. Thuong Dang Huu Tinh cho em xin so dt cua do phu quy dc ko ah,em co viec quan trong nho anh
    LH 0909119315 hoac yahoo chet.chamhet
    cam on anh
  36. Đỗ Phú Quý @Thuong Dang Huu Tinh: Hiện tại mình không support qua điện thoại bạn à. Có gì không rõ bạn có thể gửi câu hỏi qua email của mình nhé nhé. Email: dophuquy@gmail.com
  37. Thọ Trường Quách Chào bạn Đỗ Phú Quý!
    Trước tiên xin cám ơn bạn đã có lòng giúp những người chơi blog nghiệp dư.
    Nếu có thể bạn hướng dẫn tôi chỉnh sử cỡ chữ, màu chữ chạy theo ý muốn cho phù hợp với blog của mình được không?
    Nếu được bạn ghi ngay dưới phần trả lời này nhé.
    Xin cám ơn!
  38. Anonymous Thanks for support :)
    Mình muốn cho chữ chạy kiểu như thế này thì làm thế nào ạ:
    Demo: http://www.skindoctors.com.vn/
    Phần sản phẩm bán chạy hay sản phẩm mới. Chữ chạy 1 loạt, rồi đổi 1 loạt, không phải loại chạy đều đều
  39. ALO PHONE Cởn ơn QUý
  40. 푸 판 딚 Cho em hỏi để muốn chữ to lên và đậm thì làm seo ạ
  41. công nhân gõ bàn phím Chào bạn !
    cảm ơn bạn về những chia sẻ trên rất hữu ích.
    hôm nay mình có thắc mắc nhờ bạn giúp, minh muốn chạy chữ theo thứ tự, như các câu chú thích khác nhau, câu trước chạy hết, mới đến câu sau vậy, và khi mình di chuột vào nó dừng đoạn chữ đang chạy để người xem rồi buông chuột ra thì chạy tiếp. Mong nhận được sự phản hồi của bạn. Thank You !
  42. Voi Con @40: Bạn muốn chữ to, đậm thì thêm style="font-size: 20px;font-weight:bold" vào thẻ marquee đầu tiên. ví dụ:
    <marquee style="font-size: 20px;font-weight:bold">DoPhuQuy's Blog</marquee>
    (20px là kích thước của chữ đó bạn)
  43. Voi Con @công nhân gõ bàn phím: Để chữ hiển thị từng cái như vậy thì phải dùng Javascript rồi bạn.
  44. Đỗ Phú Quý @Thọ Trường Quách: Để chỉnh sửa kích thước và màu sắc, bạn thêm thuộc tính color và font-size để tùy chỉnh nhé. Ví dụ:
    <marquee style="color: #e01515; font-size: 20px;">DoPhuQuy's Blog</marquee>
  45. Nấm Bào Ngư Cảm ơn bạn đã chia sẻ, mình vừa thêm được vào web, chữ chạy rất đẹp.
  46. Hà Nhật Khánh Rất hay . Rất dễ hiểu . Cám ơn bạn nhỏ nhé .....
  47. Dμÿ_Phongƒƒ.Š Š.ƒƒ bài viết này thực sự rất hiệu quả vởi mk , tuy các doạn code thì chữ hơi bé khó đọc sửa lỗi đấy là ok
  48. Dung Nguyen anh có thể hướng dẫn em cách chạy như số 10 nhưng là với nhiều dòng có gắn link và chạy hết dòng 1 thì cách 1 khoảng rồi mới chuyển sang dòng 2 (chạy hàng ngang)


    ví dụ chạy như sau

    thông báo tin nhắn 1 thông báo tin nhắn 2
  49. Phước Thịnh Nguyễn Cảm ơn chủ thớt! :D

 
Di chuyển lên trên cùng



Bình luận bài viết