Chèn trực tiếp Emoticons, ảnh, Music, Video cho Thread Comment
Thủ thuật này có lẽ khá quen thuộc với nhiều người, bởi namkna đã giới thiệu rất nhiều tiện ích khác nhau tới các bạn. Hôm nay mình sẽ hướng đẫn các bạn thủ thuật tạo bộ mặt cười (Emoticons) cho nhận xét hôm nay mình giới thiệu sẽ giúp bạn có thể chèn các biểu tượng cảm súc từ yahoo vào blog, ngoài ra còn có chức năng chèn nhạc từ trang nhạc số nhaccuatui.com và video từ trang video youtube.com.
» Ưu điểm và nhược điểm của thủ thuật.
¤ Ưu điểm:
- Chỉ cần gõ các ký tự giống như yahoo chat trong khung commnet để có các biểu tượng cảm xúc.
- Cài đặt thì rất đơn giản.
- Để chèn ảnh, video, nhạc chỉ cần dán link của các file ảnh, video, nhạc.
¤ Nhược điểm:
Khung Emoticons chỉ xuất hiện khi có một comment.
Ảnh minh họa:
» Cách tiến hành:
1- Đăng nhập vào blog
2- Chọn Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Chọn Mở rộng tiện ích mẫu ( Expand Template Widgets)
4- Dán code bên dưới trước thẻ </head>:
4- Dán code bên dưới trước thẻ </head>:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
- Nếu blog bạn đã có file Jquery rồi thì hãy bỏ qua bước này.
5- Tìm thẻ:
5- Tìm thẻ:
<data:blogTeamBlogMessage/>
- Dán vào sau nó đoạn code bên dưới:
<script type="text/javascript">
//<![CDATA[
function moreSmilies(){document.getElementById('smiley-more').style.display = 'inline';document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">←</a></span>';}
function lessSmilies(){document.getElementById('smiley-more').style.display = 'none'; document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">→</a>'; }
//]]>
</script>
<div class='emoticons'>
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' />:((
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>:(
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>:))
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>~X
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/>:-h
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/>:-?
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/>b-)
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/58.gif'/>*-:
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/57.gif'/>~O)
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/53.gif'/>@};-
<span id='smiley-more' style='display: none;'>
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif'/>>:D<
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>=))
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>:)
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>:-*
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>:D
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif'/>[-X
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>X(
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>:-O
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>>:P
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/>=D>
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/49.gif'/>:@)
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>:P
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif'/>:">
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' />;;)
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>;)
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>:x
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>=((
<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>:-/
</span>
<span id='smiley-toggle'><a href="javascript:moreSmilies()">→</a></span>
</div>
6- Thực hiện 2 bước bên dưới:
6.1- Tìm thẻ:
<b:loop values='data:post.comments' var='comment'>
- Thêm vào trước nó thẻ bên dưới:
<div id='emocomments'>
6.2- Tìm đến thẻ đóng tương ứng với thẻ mở ở bước 5.1 như bên dưới:
</b:loop>
- Thêm vào sau nó thẻ bên dưới:
</div>
- Xem ảnh minh họa bên dưới để thấy rõ hơn!
<b:if cond='data:blog.pageType == "item"'>8- Dán code bên dưới trước thẻ ]]></b:skin>:
<script type='text/javascript'>
//<![CDATA[
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\/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:\/\/www.nhaccuatui.com\/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'/>")
theText = theText.replace (/\:\"\>/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif'/>")
theText = theText.replace(/\;;\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' />")
theText = theText.replace(/\;\)/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' alt=';)'/>")
theText = theText.replace(/\:x/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'alt=':X'/>")
theText = theText.replace(/\=\(\(/ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' alt='=('/>")
theText = theText.replace(/\:\-\//ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' alt=':-C'/>")
//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>
</b:if>
.emoticons {
-moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial;
-moz-background-inline-policy:
-moz-initial;text-align: left;
background:#ddd;
}
.emoticons a, .emoticons a:hover {
font-size: 28px;
margin-left: 20px;
text-decoration:none;
}
.comment-block img {
max-width: 90%!important;
}Trong đó:
- background:#ddd; là màu nền của phần emoticons khi chưa dê chuột vào.
- max-width:90% là kích thước ảnh ở phần commen có thể chỉnh sửa theo ý bạn.
9- - Lưu lại và xem kết quả.
Nguồn: http://namkna.blogspot.com
Nguồn: http://namkna.blogspot.com
Không có nhận xét nào:
Đăng nhận xét