Blogger 3 - Chèn video, nhạc, smileys vào còm

Trong bài trước có giới thiệu mấy link hướng dẫn cách chèn code cho phép chèn nhạc, ảnh, mặt cười vào còm.
Do một số lazy lady than thở đọc khó hiểu nên đã xem lại các code, các qui trình thực hiện và cố tìm cách sửa để các bạn bớt khó khăn trong khi thực hiện. Trong bài này sẽ hướng dẫn các bạn cách làm đơn giản hơn. Ngoài ra, đã sửa đổi thêm thắt tí nên hiệu quả cũng có tăng thêm

Nhưng trước hết ta cần làm quen với một kĩ thuật cơ bản
1. Tìm nơi chèn code
Xem

Trong các thủ thuật dưới đây ta đều phải chỉnh sửa trực tiếp trong HTML của template.
Cách vào trang HTML của Template: lần lượt click nút: Thiết kế >> Mẫu >> Chỉnh sửa HTML

Cách tìm chổ chèn trong trang HTML: ví dụ yêu cầu bạn chèn đoạn mã trước thẻ ]]></b:skin>:
- bạn clck chuột trái vào một chổ trống trong trang, rồi nhấn tổ hợp phím Ctrl+F.
- một cửa sổ Find nhỏ nhảy ra. Bạn gõ cụm từ cần tìm vào đấy, rồi enter.
- thẻ cần tìm sẽ xuất hiện ít giây sau đó

2. Chèn video, nhạc, hình, emoticons, thay đổi cỡ, màu chữ trong comment:

Có hai cách:
Cách 1. Vào trang chỉnh sửa HTML của template tìm thẻ </head> rồi chèn vào ngay trước thẻ ấy một trong 4 đoạn code sau

Code 1. Chèn hình, video, nhạc, smileys, đổi cỡ và màu chữ trong còm
(update 3/2/2012: thay code cũ bằng code mới, cho phép dán thẳng link youtube, link nhaccuatui .. vào còm, không cần dùng thẻ)

<script src='http://sites.google.com/site/khungcode/emo-colo-video.js' type='text/javascript'/></script>

Với đoạn script này, bạn có thể:
- chèn video từ youtube, chèn nhạc từ trang nhacuatui.com, hoặc từ bất kì nguồn nào, miễn file có đuôi mp3,  chèn hình với file có đuôi gif, jpg, jpeg, bmp, png
(file .mp3 chỉ hiện và nghe được nếu dùng trình duyệt Chrome)
Chỉ cần dán link, không cần dùng cặp thẻ [ ]
- chèn được 20 yahoo emoticons (bạn có thể xem liệt kê ở chổ comment trên trang blog này)
- đổi cỡ chữ: [size="40"] cỡ chữ 40 [/size]
- màu chữ: [color="red"] chữ màu đỏ [/color]
màu có thể ghi dạng Hex code, ví dụ #000000 là đen, .. hoặc ghi bằng tiếng Anh (với một số màu chính: red, black, blue, green, violet, purple, rose, yellow, cyan, ..)
Bạn có thể lồng hai thẻ size và color ..

Code 2: chỉ muốn chèn 20 mặt cười yahoo

<script src="http://sites.google.com/site/khungcode/emoticons1.js" type="text/javascript"></script>

Code 3 chỉ muốn cho phép thay đổi cỡ và màu chữ trong còm

<script src='http://sites.google.com/site/khungcode/colo-size.js' type='text/javascript'/></script>

Code 4:

<script type="text/javascript">document.getElementsByClassName = function(clsName){ var retVal = new Array(); var elements = document.getElementsByTagName("*"); for(var i = 0;i < elements.length;i++){ if(elements[i].className.indexOf(" ") >= 0){ var classes = elements[i].className.split(" "); for(var j = 0;j < classes.length;j++){ if(classes[j] == clsName) retVal.push(elements[i]); } } else if(elements[i].className == clsName) retVal.push(elements[i]); } return retVal; } function addSmiley(dummy) { var d = [], i=0, def = ['comment-block','comment-body','comment-post-messages']; for(i=0;i<def.length;i++) { var content = document.getElementsByClassName(def[i]); for(var j=0;j<content.length;j++) d.push(content[j]); } for(var i=0;i<d.length;i++) { var theText = d[i].innerHTML; //Emoticons theText = theText.replace(/\:\(\(/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' />") theText = theText.replace (/\:\(/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>") theText = theText.replace (/\:\)\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>") theText = theText.replace (/\~X\(/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>") theText = theText.replace (/\:\-h/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/>") theText = theText.replace (/\:-\?/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/>") theText = theText.replace (/b-\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/>") theText = theText.replace(/\*\-\:\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/58.gif'/>") theText = theText.replace(/\~O\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/57.gif'/>") theText = theText.replace (/\@\}\;\-/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/53.gif'/>") theText = theText.replace(/\>\:\D\</ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif' alt='>:-D<'/>") theText =theText.replace(/\=\)\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' alt='=)'/>") theText = theText.replace (/\:\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>") theText = theText.replace(/\:\-\*/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' />") theText = theText.replace(/\:D/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt=':-D'/>") theText = theText.replace(/\[-*x/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif' alt='[-X'/>") theText = theText.replace(/\s*x\(/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' alt='X('/>") theText = theText.replace(/\:-O/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' alt=':-O'/>") theText = theText.replace(/\>:P/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' alt='>:P'/>") theText = theText.replace(/\=D>/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif' alt='=D>'/>") theText = theText.replace (/\:\@\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/49.gif'/>") theText = theText.replace (/\:\P/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>") //Font-size & Color theText = theText.replace(/\[size=\"(?:(\d{1,2}))\"\]/gi,"<span style=\'font-size:$1px\'>"); theText = theText.replace(/\[\/size\]/gi,"</span>"); theText = theText.replace(/\[color=\"(?:([a-z]{3,}|#[a-f0-9]{3,6}))\"\]/gi,"<span style=\'color:$1\'</span>"); theText = theText.replace(/\[\/color\]/gi,"</span>"); //Multimedia theText = theText.replace(/\[img\].*?'.*?\[\/img\]/gi, ""); theText = theText.replace(/\[nct\].*?'.*?\[\/nct\]/gi, ""); theText = theText.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, ""); theText = theText.replace(/\[img\]/gi, "<div style='clear:both'> </div> <img style='float:left;margin:10px 0;border:1px solid #DDD;max-width:590px;background:#FFF;padding:4px' src='"); theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'> </div> "); theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='300' height='240' src='http://www.youtube.com/embed"); theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='300' height='240' src='http://www.youtube.com/embed/"); theText = theText.replace(/&feature=/gi, "?rel=0' '"); theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>"); theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?L=/gi, "<div style='overflow:hidden'> <embed style='margin-top:-250px;width:300px;height:400px' src='http://www.nhaccuatui.com/l/"); theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?M=/gi, "<div style='overflow:hidden'><embed style='margin-top:-350px;width:300px;height:400px' src='http://www.nhaccuatui.com/m/"); theText = theText.replace(/\[\/nct\]/gi, "' quality='high' flashvars='autostart=false' wmode='transparent' type='application/x-shockwave-flash'></embed></div> "); d[i].innerHTML = theText; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } addLoadEvent(function(){ addSmiley(); });</script>

Đoạn code 4 tác dụng tương tự đoạn code 1. Trong đoạn code này có ba phần
- Emoticons: chèn 20 mặt cười của yahoo
- Font-size & color: cho phép đổi size và màu chữ
- Multimedia: cho phép chèn hình, video, nhạc
Muốn dùng cả ba thì copy nguyên đoạn mã. Ko muốn cái nào thì bỏ đoạn ấy đi. Bạn cũng có thể bỏ bớt mặt cười (hay thêm vào cái mình thích)

Riêng phần chèn video, hình và nhạc thì phải có thẻ, cụ thể cú pháp như sau:
Chèn video: [youtube]link_youtube[/youtube]
Chèn nhạc: [nct]link_nhaccuatui[/nct]
Chèn hình: [img]link_hình[/img]
các phần khác dùng thẻ tương tự ở code 1
(Nghĩ giữ lại tí đồ cổ cũng hay - nên không đổi qua code mới không dùng thẻ )

Sau khi chèn code xong, nhấn nút Lưu là xong. Chú ý đừng quên Lưu

20 emoticons có trong code:

6 emoticons bổ xung thêm (25/2/2013):

Cách gõ và ý nghĩa các smiley này có thể xem ở đây
Ai muốn thêm smiley cũng có thể tham khảo từ trang web trên

Cách 2: Vào Thiết Kế >> Bố Cục >> Thêm Tiện Ích >> chọn tiện ích HTML/JavaScript và copy vào phần nội dung một trong 4 đoạn code trên.

Hoặc đoạn code sau: (bổ xung 28/5/2013)

<script type="text/javascript">document.getElementsByClassName = function(clsName){ var retVal = new Array(); var elements = document.getElementsByTagName("*"); for(var i = 0;i < elements.length;i++){ if(elements[i].className.indexOf(" ") >= 0){ var classes = elements[i].className.split(" "); for(var j = 0;j < classes.length;j++){ if(classes[j] == clsName) retVal.push(elements[i]); } } else if(elements[i].className == clsName) retVal.push(elements[i]); } return retVal; } function addSmiley(dummy) { var d = [], i=0, def = ['comment-block','comment-body','comment-post-messages']; for(i=0;i<def.length;i++) { var content = document.getElementsByClassName(def[i]); for(var j=0;j<content.length;j++) d.push(content[j]); } for(var i=0;i<d.length;i++) { var theText = d[i].innerHTML; //Multimedia theText = theText.replace(/(\b)http:\/\/(youtu.be\/|www.youtube.com\/watch\?v\=)([A-z0-9]{1,})(\b)/g, "<iframe width='300' height='240' src='http://www.youtube.com/embed/$3?rel=0' frameborder='0' allowfullscreen></iframe>"); theText = theText.replace(/(\b)http:\/\/www.nhaccuatui.com\/nghe\?M\=([A-z0-9]{1,})(\b)/g,"<div style='overflow:hidden'> <embed style='margin-top:-350px;width:300px;height:400px' src='http://www.nhaccuatui.com/m/$2' quality='high' flashvars='autostart=false' wmode='transparent' type='application/x-shockwave-flash'></embed></div> "); theText = theText.replace(/(\b)http:\/\/www.nhaccuatui.com\/nghe\?L\=([A-z0-9]{1,})(\b)/g,"<div style='overflow:hidden'> <embed style='margin-top:-250px;width:300px;height:400px' src='http://www.nhaccuatui.com/l/$2' quality='high' flashvars='autostart=false' wmode='transparent' type='application/x-shockwave-flash'></embed></div> "); theText = theText.replace(/(\b)(http:\/\/[^\s\t\r\n]{1,}\.mp3)(\b)/g,"$1<audio controls><source src='horse.ogg' type='audio/ogg'><source src='$2' type='audio/mpeg'>Your browser does not support the audio element.</audio>$3"); theText = theText.replace(/(\b)(https?:\/\/[^\<]{1,}\.)(gif|jpg|jpeg|png|bmp)(\b)/g,"$1<div style='clear:both'> </div> <img style='float:left;margin:10px 0;border:1px solid #DDD;max-width:590px;background:#FFF;padding:4px' alt='com-img' src='$2$3' /><div style='clear:both'> </div> $4"); //Emoticons theText = theText.replace(/\:\(\(/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' />") theText = theText.replace (/\:\(/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>") theText = theText.replace (/\:\)\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>") theText = theText.replace (/\~X\(/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>") theText = theText.replace (/\:\-h/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/>") theText = theText.replace (/\:-\?/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/>") theText = theText.replace (/b-\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/>") theText = theText.replace(/\*\-\:\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/58.gif'/>") theText = theText.replace(/\~O\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/57.gif'/>") theText = theText.replace (/\@\}\;\-/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/53.gif'/>") theText = theText.replace(/\>\:\D\</ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif' alt='>:-D<'/>") theText =theText.replace(/\=\)\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' alt='=)'/>") theText = theText.replace (/\:\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>") theText = theText.replace(/\:\-\*/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' />") theText = theText.replace(/\:D/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt=':-D'/>") theText = theText.replace(/\[-*x/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif' alt='[-X'/>") theText = theText.replace(/\s*x\(/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' alt='X('/>") theText = theText.replace(/\:-O/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' alt=':-O'/>") theText = theText.replace(/\>:P/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' alt='>:P'/>") theText = theText.replace(/\=D>/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif' alt='=D>'/>") theText = theText.replace (/\:\@\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/49.gif'/>") theText = theText.replace (/\:\P/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>") //Font-size & Color theText = theText.replace(/\[size=\"(?:(\d{1,2}))\"\]/gi,"<span style=\'font-size:$1px\'>"); theText = theText.replace(/\[\/size\]/gi,"</span>"); theText = theText.replace(/\[color=\"(?:([a-z]{3,}|#[a-f0-9]{3,6}))\"\]/gi,"<span style=\'color:$1\'</span>"); theText = theText.replace(/\[\/color\]/gi,"</span>"); d[i].innerHTML = theText; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } addLoadEvent(function(){ addSmiley(); });</script>

3. Viết hướng dẫn đi kèm ô comment:
Sau khi chèn đoạn mã trên thì bạn đã có thể chèn video hay smileys .. vào còm. Nhưng với khách lạ, cần báo họ biết tính năng nào có để họ dùng, và cả cú pháp để gõ còm cho đúng. Làm như sau:

Lần lượt click vào Thiết Kế >> Cài đặt >> Bài đăng và nhận xét >> Thư thông báo mẫu nhận xét (Comment Form Message)

Trong ô thông báo bạn gõ những gì bạn muốn. Chú ý đây là ô soạn thảo html, nên các kí tự đặc biệt phải có cách gõ đặc biệt, ví dụ với hai kí hiệu < > thì phải thay bằng < và > dấu nháy " là " v v..

Riêng với các emoticons, ta sẽ làm một khung riêng cho tiện
(khung để nhắc cách gõ các phím tắt :D là cười nhe răng, =)) là cười bò ..)

Khung nhắc gõ Emoticons
1. Tìm <p><data:blogCommentMessage/></p>

(tìm thấy được 4 vị trí, chỉ thay thế ở vị trí thứ 2 và thứ 4 (phía dưới  b:else) ).
2. Thay thế cụm trên bằng cụm <div id='khungnhac'><p><data:blogCommentMessage/></p></div>

3. Copy đoạn code sau vào giữa hai thẻ </p> và </div>
</p>(cóp code vào đây)</div>

<a href="#" id="emot-hide">Chèn Emoticons</a> <div id="img-wrapper"> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/><span>:))</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/><span>:D</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/><span>:p</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/><span>:)</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/><span>:(</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/><span>:-o</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/><span>:-*</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/><span>=))</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/><span>:((</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/><span>:-?</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/><span>:-h</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/57.gif'/><span>~o)</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/53.gif'/><span>@};-</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif'/><span>:D</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif'/><span>[-X</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/><span>=D></span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/58.gif'/><span>*-:)</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/><span>B-)</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/><span>X(</span></div> <div class="item"> <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/><span>:@)</span></div> </div> <br /> 4.  Tìm ]]></b:skin> và thêm vào trước đó đoạn code sau:

div#img-wrapper { width: 310px; text-align:center; display: none; } #img-wrapper .item { display: block; width: 30px; float: left; } #img-wrapper span { text-align: center; width: 30px; display: block; }

5.  Tìm </head> và thêm vào trước đó đoạn code sau để hiện ra khung chứa các smileys

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/> <script type='text/javascript'> $(document).ready(function() { $('a#emot-hide').click(function(){ $('#img-wrapper').slideToggle(400); return false; }); }); </script>


6. Muốn đoạn nhắc tuồng vừa làm chạy theo cửa sổ comment mỗi khi còm ta phải làm thêm tí nữa:
Tìm cụm document.getElementById(domId).insertBefore(replybox, null); và thêm vào trước đó đoạn code sau:

var khungnhac = document.getElementById('khungnhac'); document.getElementById(domId).insertBefore(khungnhac, null);

Nếu muốn làm thêm cái nhắc tuồng Mẹo Comment (như ở blog này), bạn lại phải làm thêm tí nữa:

- Tìm khungnhac
- Thay thẻ <p><data:blogCommentMessage/></p> trong khungnhac
bằng
<a href='#' id ='text-hide' style='display:block;'>Mẹo Comment</a>
<p id='text-wrapper' style='display: none;'><data:blogCommentMessage/></p>
- Tìm $(document).ready(function() {
thêm vào ngay sau dấu {  đoạn code sau:


$('a#text-hide').click(function(){ $('#text-wrapper').slideToggle(400); return false; });

Sửa để ảnh up lên còm ko quá lớn:
Post hình vào còm, nhiều khi hình to quá, tràn cả ra ngoài trang ko đẹp. Muốn tránh tình trạng này, bạn vào trang chỉnh sửa HTML của Template (Mẫu), chèn đoạn code sau, giới hạn độ rộng tối đa của hình:

.comment-block img { max-width: 300px !important; }
vào trước /* header hoặc /* content ..
( đâu đang có chứa sẵn các đoạn mã css cũng được, miễn sao cho dễ quản lí)