Đây là code bằng js đơn giản, dùng js tìm kiếm những thừ khóa được liệt kê, những từ khóa này sẽ bị thay thế bằng những chuỗi ký tự tùy ý. Chúng ta ứng dụng nó vào việc như: Tự động chèn link vào từ khóa, tự động tạo định dạng cho từ khóa, hoặc tạo hiệu ứng khi di chuột vào từ khóa sẽ xuất hiện box quảng cáo.

 <script type='text/javascript'>
window.onload=function replaceText()
{
if(!document.getElementById){return;}
bodyText = document.getElementById("bodytext");
theText = bodyText.innerHTML;
theText = theText.replace(/bd/gi, "<a href=\'http://bendoi.vn\' target=\'_blank\'/>bên đời</a> ");
theText = theText.replace(/facebook/gi, "<b>facebook</b> ");
theText = theText.replace(/fb/gi, "<a href=\'https://www.facebook.com/groups/bendoibendoi/\' target=\'_blank\'>bendoibendoi</a>");
bodyText.innerHTML = theText;
}
replaceText();
</script>
<div id="bodytext">
bd có trang facebook là fb
</div>

kết quả:

bên đời có trang facebook là bendoibendoi

Thao Trịnh

Đây là hiệu ứng nhã từng chữ lên màn hình, giống như kiểu người ta đang đánh máy với thời gian thực. Code này Tôi sưu tầm từ một site ấn độ. Theo tôi để có hiệu ứng đánh máy như thế này, bạn phải thêm thư viện jquery vào site thì có vẻ hơi "tốn đất". Bạn nên áp dụng thủ thuật này khi mà site đã có file jquery đang áp dụng cho tính năng khác. Như vậy để tận dụng jquery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.typewrite{ font-size: 20px;}
.typing-cursor{ position: relative; display: inline-block; width: 8px; text-indent: -999em; background: #ccc;}
</style>
<script>
$(document).ready(function(){
//get the content
var content = $('.typewrite').html();
//find the length of the content
var contentLength = content.length;
var char = 0;
$('.typewrite').html('<span class="typing-cursor">|</span>');
//Here is the function
(function typeFunc() {  
//dynamic delay to get the typewriting feel
    var typingSpeed = Math.round(Math.random() * 120) + 60;
    setTimeout(function() {
        char++;
        var type = content.substring(0, char);
$('.typewrite').html(type + '<span class="typing-cursor">|</span>');
//recursive
        typeFunc();
    }, typingSpeed);
}());
});
</script>
<div class="typewrite">
  Những dòng chữ viết theo kiểu đánh máy! <br/>
  Những dòng chữ viết theo kiểu đánh máy! <br/>
  Những dòng chữ viết theo kiểu đánh máy! <br/>
  Những dòng chữ viết theo kiểu đánh máy! <br/>
</div>
 

Những dòng chữ viết theo kiểu đánh máy!
Những dòng chữ viết theo kiểu đánh máy!
Những dòng chữ viết theo kiểu đánh máy!
Những dòng chữ viết theo kiểu đánh máy!

Tham khảo!

http://www.theonlytutorials.com/demo/typewriter/

Nếu như trước kia người ta muốn ẩn hiện nội dung để bài viết được gọn gàng thì hay dùng javaScript:

<script type="text/javascript">
function show_hide(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
</script>
<button onclick="show_hide('box01');"  type="button"> Tiêu đề  </button>
<br />
<div id="box01" style="display: none;"> Nội dung chi tiết </div>

Nội dung chi tiết

---

Một cách viết tương tự:

<script type="text/javascript">
//<![CDATA[
function hien() {
    document.getElementById('xem-tiep').style.display = 'inline';
    document.getElementById('thoi-xem').innerHTML = '<a href="javascript:an()">ẩn</a></span>';
}
function an() {
    document.getElementById('xem-tiep').style.display = 'none';
    document.getElementById('thoi-xem').innerHTML = '<a href="javascript:hien()">hiện</a>';
}
//]]>
</script>
<div>
Nội dung mặc định
<span id='xem-tiep' style='display: none;'>
Nội dung được tạm ẩn
</span>
<span id='thoi-xem'><a href="javascript:hien()">Xem nữa</a></span>
</div>

Nội dung mặc định Nội dung được tạm ẩn Xem nữa

---

Thì ngày nay chỉ với vài thẻ HTML5 chúng ta làm điều này rất tiện lợi:

<details>
<summary> Tóm tắt </summary>
Nội dung chi tiết
</details>

 Tóm tắt

Nội dung chi tiết

---

Tất nhiên nếu kèm theo js thì chúng ta sẽ có những hiệu ứng trượt ẩn hiện nội dung đẹp mắt hơn!

Đoạn js tạo hiệu ứng chạy text lề dưới trang web. Tuy nhiên nó chỉ có tác dụng với IE, còn các trình duyệt khác mặc định không hiển thị thanh này.

<script type="text/javascript">
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=279,height=150,left = 511,top = 476');");
}
<!--
  mesaj   = " dong thu 1 " +
" dong thu 2 " +
" dong thu 3 " +
" dong thu n "
  scrollSpeed = 12
  lineDelay   = 2500
 
  txt         = ""
  function scrollText(pos) {
    if (mesaj.charAt(pos) != '^') {
      txt    = txt + mesaj.charAt(pos)
      status = txt
      pauze  = scrollSpeed
    }
    else {
      pauze = lineDelay
      txt   = ""
      if (pos == mesaj.length-1) pos = -1
    }
    pos++
    setTimeout("scrollText('"+pos+"')",pauze)
  }
  //-->
scrollText(0)
// JavaScript Document
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  //do this so I can take a string too
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;
    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}
function startTrans(a,fname)
{
a.filters[0].Apply();
a.src = "imageproducts/" + fname;
a.filters[0].Play()
}
var popUpWin=0; function popUpWindow(URLStr, left, top, width, height) { if(popUpWin) { if(!popUpWin.closed) popUpWin.close(); } popUpWin = open(URLStr, 'popUpWin', 'scrollbars=yes,resizable=yes,width='+width+',height='+height+',left='+left+', top='+top+',screenX='+left+',screenY='+top+''); }
</script>

Thanks internet!

Code CSS.

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}
/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}
.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}
.dp-highlighter .bar
{
padding-left: 45px;
}
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}
.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}
.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}
.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}
.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}
.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}
.dp-highlighter .columns div
{
padding-bottom: 5px;
}
.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}
.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol
{
margin: 0px;
}
.dp-highlighter.collapsed ol li
{
display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing
{
border: none;
}
.dp-highlighter.printing .tools
{
display: none !important;
}
.dp-highlighter.printing li
{
display: list-item !important;
}
/* Styles for the tools */
.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools
{
border-left: 0;
}
.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}
.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}
.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}
/* About dialog styles */
.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
/* Language specific styles */
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

Link Js

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>  
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>  
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>  
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>  
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>  
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>  
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>  
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>  
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>  
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>  
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>  
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>  
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>  

Đoạn js trong body

<script language='javascript'>  
dp.SyntaxHighlighter.BloggerMode();  
dp.SyntaxHighlighter.HighlightAll('code');  
</script>

Đặt code trong

<pre class="cpp" name="code">  
.........................................................
</pre>

Để hiển thị code mà không bị lỗi, chúng ta có thể sử dụng chương trình encode sourcode

Thanks SyntaxHighlighter

---

Bạn sử dụng để view ngôn ngữ nào thì chọn link js cho ngôn ngữ đó, nên nhúng link js và css vào trong bài viết thay vì nhúng vào template. Bởi không phải bài viết nào bạn cũng sử dụng view code mặt khác chúng ta không trình bày hết các ngôn ngữ lập trình vào trong 1 bài viết.

Nói nôm na Syntax Highlighter là kiểu hiển thị code trong bài viết, nó tự động phân biệt màu cho các text, gần tương tự như khi sử dụng phần mềm Notepad++

cách thực hiện:

Code phần <head>

<link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'/>

Code phần <body>

<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

<pre name="code" class="Cpp">
Chèn đoạn mã của bạn vào đây
</pre>

Thank: các nhà phát triển Syntax Highlighter và google