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"'>
<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>
8- Dán code bên dưới trước thẻ ]]></b:skin>:.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ả.
Nhận xét
Đây là lỗi ở cái blogspot của e . Mong anh sửa giúp. Nó không hiển thị thống kê và cũng không hiển thị comment
Trả lờiXóahttp://nx4.upanh.com/b5.s36.d2/73c70b5fa782553499e01151712f440c_55826664.comment.png
Em bấm vào phần Thống kê pở cột bên tay trái là sẽ tháy đầy đủ thôi em ak.
Xóabạn ơi, mình muốn đổi text đang trao đổi với bạn thì như thế nào?
Trả lờiXóabạn có thể cho mình mail để trao đổi được ko?
blog mình đây, bkavgiare.blogspot.com đang trao đổi textlink với bạn
textlink hiện tại là bkav giá rẻ từ 130k, bạn có thể đổi thành sửa máy tính tại nhà hà nội" được ko?
Oke mình đã đổi :)
Xóabài viết của anh Nam chất lượng thật. anh cho em mượn về blog nhé.em sẽ ghi rõ nguồn.anh ghe thăm nhé: http://tienganhgioi123.blogspot.com/
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaNhận xét này đã bị tác giả xóa.
XóaNhận xét này đã bị tác giả xóa.
XóaĐoạn code đóa em phải chèn trước thẻ ]]></b:skin> chứ như anh thấy em đặt nó sau đoạn ]]></b:skin> mất rồi.
XóaNam ơi!!! Giúp mình loại bỏ hoàn toàn sibar của mẫu http://btemplates.com/download/4656/ và kéo độ rộng bài viết, comment,... ra trang với, giống như: http://dongyankhangduong.blogspot.com/
Trả lờiXóaGiúp mình với!!! Cám ơn a Nam nhiều!!! ^^
Anh cho em hỏi chút xíu nhé, khi em chèn nội quy comment dạng sau vào thì tại sao nó k hoạt động nhỉ, mà lạ là khi đang load thì nó hiện khung lên, còn load xong thì nó biến mất
Trả lờiXóa.comment-form p {
background-image: url(http://1.bp.blogspot.com/-bnXgHcgswCs/Tv_gARGBKnI/AAAAAAAABaQ/eLQE-HdRCgU/s1600/cm_note.png);
background-position: 1em 1em;
background-repeat: no-repeat;
background-color: #FDD;
width: 105%;
border: #C72B2C dashed thin;
padding: 1em;
padding-left: 70px;
color: #D24E50;
}
Em kết hợp với bài viết này nha: Di chuyển ghi chú nhận xét của thread comment theo khung nhận xét khi reply trong blogspot
Xóabạn ơi sao mình ko tìm được đoạn code như bạn nói mà thêm vào nhỉ, nếu rảnh bạn giúp đỡ cho mình nhé. Yahoo của mình : vu_dinhkien
Trả lờiXóaBạn dùng chức năng tìm kiếm nội tuyến ở bài này nha: XEM NGAY
XóaCảm ơn anh rất nhiều! em có một vấn đề mà tìm mãi không ra! đó là blog của em là: http://cid-designer.blogspot.com/ em chưa bao h cài code chèn âm thanh vào mà sao nó cứ phát cái tiếng rất khó chịu! Anh hướng dẫn bỏ nó giúp em nha! cảm ơn anh nhiều
Trả lờiXóaÂm thanh này do đoạn flash bạn cài dặt ở trong tiện ích HTML2 gây ra. bạn vào bố cục và kéo xuống dưới phần chân tìm tiện ích HTML2 rồi xóa đọa mã đó đi nha:
Xóa<embed src="http://www.notcelebrity.co.uk/flashcontent/flashHeader.swf?thename=cid.designer&mute=1&skipIntro=1" type="application/x-shockwave-flash" wmode="transparent" width="625" height="200"></embed>
cho hỏi chút, làm thế nào mình có thể post truyện có nhiều chương (vd 40 chương) mà khi nhấp vào mỗi chương hiện ra 1 bài đăng mới vậy b?
Trả lờiXóaCâu hỏi của bạn chưa rõ ràng lắm. bạn có thể đọc bài viết này nha: Phân trang cho bài viết dài trên blogspot
Xóakiểu như đây nè Nam Tạ: http://truyenkiemhiepso1.blogspot.com/2012/07/lien-thanh-quyet-kim-dung.html
Xóađăng bài ntn để chèn hết chương vào trong 1 bài đăng ấy?
Các chương ở link bạn đưa được chèn thủ công bằng thẻ a href thôi mà bạn.
Xóa<a href="Link">Tên</a>
Nhận xét này đã bị tác giả xóa.
XóaVậy nghĩa là nếu có 180 chương thì phải post 180 bài đăng, sau đó lấy link của 180 bài đăng chèn vào 1 bài đăng "chủ"? sặc, như vậy thì thủ công ghê lắm, nghĩ mà nản....tại sao ko có trình "play" giống như code post phim....hic
XóaKhông ta có thể sử dụng tiện ích Recent post để hiển thị tên của 180 chương đó một cách tự động. Ví dụ như tiện ích này XEM NGAY: chỉ cần dán nó vào một nhãn và gọi tất cả bài viết thuộc nhãn đó là được.
XóaBlogspot của em không có mở rộng tiện ích bác ơi :(
Trả lờiXóa