Chèn emoticons và ảnh, video, nhạc vào Thread Comment Blogger

Nếu bạn đang dùng Thread Comment mới của Blogger thì việc áp dụng emoticonsmutilmedia như hướng dẫn trước của mình sẽ không có tác dụng. Trong bài viết này mình sẽ cập nhật cho những bạn đang dùng Thread Comment mới có thể chèn emoticons và ảnh, video, nhạc vào khung nhận xét.


emoticons multimedia

Chèn đoạn mã dưới đây vào trước thẻ </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comment-holder");
theText = bodyText.innerHTML;
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='480' height='390' src='http://www.youtube.com/embed");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&amp;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' wmode='transparent' type='application/x-shockwave-flash'></embed></div>");
theText = theText.replace(/:\)\)/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'/>");
theText = theText.replace(/=d&gt;/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'/>");
theText = theText.replace(/:d/gi, "<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'/>");
theText = theText.replace(/:p/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'/>");
theText = theText.replace(/:\(\(/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'/>");
theText = theText.replace(/:\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'/>");
theText = theText.replace(/:\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'/>");
theText = theText.replace(/:-\?/gi, "<img src='http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'/>");
theText = theText.replace(/\[\-\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'/>");
theText = theText.replace(/:-o/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'/>");
theText = theText.replace(/:-t/gi, "<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'/>");
theText = theText.replace(/:-ss/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'/>");
theText = theText.replace(/b-\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'/>");
theText = theText.replace(/@-\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'/>");
theText = theText.replace(/=\)\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>

Cách sử dụng tương tự như 2 bài viết emoticonsmutilmedia trước đây.

Hướng dẫn thủ thuật Blogger, Blogspot

73

Nhận xét
1

Ông Noct vừa ra cái Thread Comment ko emo thì bác ra cái này hợp vãi =P~

Reply Xóa nhận xét
2

Thanks bác, đã update :))

Reply Xóa nhận xét
3

oh thật tiện lợi với hàm replace ;) thanks bài viết của anh, nhưng h cái threaded này vẫn ko ổn định lắm, chưa thêm thắt đc gì nhiều vào

Reply Xóa nhận xét
5

@Pika RockLúc đầu háo hức chờ nhưng khi thấy cách thức hoạt động của nó thì chán chẳng muốn xem nữa. K có cảm hứng với nó nên em cũng chưa biết nhiều.

Reply Xóa nhận xét
6

ÔI hay quá xá là hay à

Reply Xóa nhận xét
7

bác có biết làm thế nào để các tấm ảnh nhìn bóng bẩy như đang nhìn qua khung kính,sử dụng j cũng được nhé :css,css3,javascript,jquery

Reply Xóa nhận xét
8

@wallpapersCó rất nhiều trang về css3 giúp bạn điều đó -> http://webdesignerwall.com/tutorials/css3-image-styles-part-2

Ngoài ra có vài trang mình thường xuyên theo dõi:
http://css-tricks.com
http://tympanus.net/codrops/

Reply Xóa nhận xét
9

Duy cho anh hỏi một chút nhé, cái previous và next page của trang CĐO tự dưng không hoạt động, chỉ có phần HOME là có link trang chủ thôi. Duy check giùm anh cái nha... Tks trc

http://www.chanhdat.com/2012/02/ban-bao-gio-nhin-thay-cai-oi-nhu-nay.html

Reply Xóa nhận xét
10

@Minh TriếtBác bỏ cái max-height:450px; ở class comment-form đi. iframe vượt qua độ cao này nên che lấp đi những thứ dưới nó.

Reply Xóa nhận xét
Nặc danh 28/2/12 13:02
11

chèn thêm flash và nhạc từ nhac.vui.vn va mp3.zing thì sao hả anh

Reply Xóa nhận xét
13

Code nhìn ngăn nắp quá bác. Chắc em cũng phải chèn emo cho Vnblogspot quá, chém cho nó có vị hơn. :-t

Reply Xóa nhận xét
14

blogger.com/static/v1/jsbin/2324678828-lbx_vi.js

file .JS này nó làm nhiệm vụ gì vậy DUY PHẠM nhỉ? Và nếu xóa nó đi có được không?

Trích chút thời gian xem dùm mình nhé,
Cảm ơn bạn nhiều!

Reply Xóa nhận xét
15

@Thiên LongNó để tạo hiệu ứng lightbox khi xem ảnh, Blogger có lựa chọn tắt nó đi rồi mà.

Reply Xóa nhận xét
16

@Tien NguyenChèn đi bác, cho sinh động :D

Reply Xóa nhận xét
17

Cách trích dẫn trong comments giống như bên fandung có phải dùng hàm replace để viết không? Nếu đúng như vậy thì Duy có thể thêm phần này vao luôn được không?

Reply Xóa nhận xét
18

@Minh TriếtTrích dẫn kiểu gì hả bác? Lâu lắm chỉ đi loanh quanh 1 vài blog quen thôi.

Reply Xóa nhận xét
19

@Duy PhamẢnh đây bác

[img]http://farm3.anhso.net/upload/20120229/20/o/anhso-204904_Blogspot.jpg[/img]

Reply Xóa nhận xét
20

@Tien NguyenCập nhật vào, chém nó đã hơn :))

Reply Xóa nhận xét
21

anh duy có thể hướng sẫn em làm chữ mới nhất giống blog cuẩ anh ko.nó đẹp quá :)

Reply Xóa nhận xét
22

@Minh TriếtKiểu quote như 4rum à :)) Có reply rồi thì cần gì làm vậy nữa bác, mà phải copy tên, nội dung nữa, sao k tự động lấy những giá trị này đưa vào postBody theo kiểu popup

Reply Xóa nhận xét
23

@Duy PhamThiệt tình là a không khoái kiểu popup nên mới đợi cái thread comments của blogger.
Về việc copy text, mặc dù phải copy nhưng dù sao vẫn cảm thấy thích hơn mở một popup...

Reply Xóa nhận xét
24

Thank bạn nhiều :D

Reply Xóa nhận xét
25

Mình nghỉ nếu có chèn thêm trang nhạc số hay nhạc zing thì tốt hơn và rất tuyệt=))

Reply Xóa nhận xét
26

Dạo này cộng đồng blogger có vẻ im ắng nhỉ. Đi dạo một vài nơi rùi mà thấy không khí dịu xuống hẳn luôn. Pà kon cũng ít ra bài mới thì phải.

Reply Xóa nhận xét
27

:D Bravo bravo Duy... Mình đã dùng được rồi. Thank You!

Chỉ bị 1 lỗi nhỏ là nó không chịu hiển thị những Smilies phía trên khung nhận xét để bà con dễ lựa chọn như trang của Duy nè, có cách nào giúp mình không? Mình đã theo hướng dẫn của bạn mà làm... chèn code hiển thị Smiley vào sau thẻ gì đó á... nhưng tìm thấy 4 thẻ như vậy luôn và chèn trước thẻ số 2 thì lại không được :-? giúp mình xíu nhe.
mmmvatui.blogspot.com

Khi nào rảnh, Duy làm thêm vài thành phần như căn giữa văn bản [ce][/ce], viết chữ tùy chỉnh (màu,lớn,nhỏ...) và được dùng lệnh Marquee nữa là tuyệt vời. Có chèn được fil swf không vậy Duy???

Anyway, thanks so much. :)

Reply Xóa nhận xét
49

Sau khi tu luyện code của Blogger rồi việc di chuyển ghi chú nhận xét thật đơn giản, bác chờ tut tiếp theo của em nhé :D

Reply Xóa nhận xét
28

@Trần Phúc MinhChỉ những trang nào cho nhúng mà dựa vào URL em mới làm, đặt code và copy URL thôi.

Reply Xóa nhận xét
29

@L.m.HoaThread comment dùng js hiển thị ngay cả comment form nên k đưa khung hiển thị lên trước comment form dc, em thì chưa đọc tí nào code js của Blogger. Những thẻ như center, marquee k phải là thẻ chuẩn, k nên dùng. Mấy cái chỉnh màu, size thì em thấy nhí nhố quá :D

Reply Xóa nhận xét
30

Okey, không có cũng không sao... cảm ơn Duy nhiều hĩ :D

Reply Xóa nhận xét
31

Làm cách nào để đổi màu nền (xám) ở những Replies thành màu trắng như nền của những comments vậy Duy???
Thanks for help. :)

Reply Xóa nhận xét
32

@L.m.HoaTìm trong temp dòng .comments .comment-thread.inline-thread và thay màu ở background-color theo ý bạn. Hoặc xóa đoạn css này nếu k muốn màu nền.

Reply Xóa nhận xét
34

Bài mới đê bác ơi :(

Reply Xóa nhận xét
35

Chào Duy, cho mình nhờ xíu nhe. Khi chèn hình cỡ nhỏ như 1 smiley vào comment chẳng hạn, làm cách nào để text và hình cùng nằm thành 1 hàng???
Chữ...hình...chữ.
Mình đã xóa bớt 1 khúc trong thẻ img... và hình đã nằm cùng hàng với những chữ trước nó, nhưng chữ sau hình vẫn bị xuống hàng...
Chữ...hình...
chữ.
Và khi post lên hình lớn hơn, mình lại muốn nó y như trước:
Chữ...
hình lớn...
Chữ.

Mình cũng có nói là đã sử dụng kode của Fandung trong 1 trang khác và kode đó rất hạp với cách dùng của mình nêu trên và còn cho đăng fil .swf nữa. Mình cũng thích viết chữ lớn có màu, chạy qua chạy lại... và rất thích với lệnh center... Chúc Mừng Sinh Nhật, mà chữ không được màu đỏ, nhỏ xíu như vầy thì nhìn không hoành tráng cho lắm đó :))

Mình biết là những thứ trên đây không làm khó Duy được đâu, muốn là làm thôi :) . Vì hình như mới có Duy hoặc vài ai đó đã làm thành công kode này để sử dụng được với hệ thống Reply mới mà thôi. Fandung cũng chưa có cập nhật được phần này.
Anyway, đã làm ra được 1 kode thì sử dụng được tối đa mới là tuyệt... nếu Duy đã đặt giới hạn thì sẽ là kode có giới hạn. Người khác cũng sẽ từ kode của Duy mà cải tiến... theo số đông thì hầu như ưa chuộng 1 cái gì đó luôn được chủ nhân update... Chính Microsoft cũng phải vậy mới luôn nằm hàng đầu.
Wowowo... dài dòng thế nào cũng chỉ vì muốn đòi hỏi thêm xíu nữa :)) . Nhưng Duy đừng ngán, vì mình biết nhiều thì người ta mới nhờ... nếu con két nhà mình có cách thì đã không giám làm phiền Duy :D
Thank You.
PS. Duy có thể xem qua 1 tí và làm tốt hơn gấp 10 là bà con đủ sáng mắt rồi :))
http://www.fandung.com/2011/06/media-comment-cho-blogspot.html

Reply Xóa nhận xét
36

CONG NHAN BAC DUY CO NHIEU TH THUAT HAY

Reply Xóa nhận xét
37

@Minh TriếtTừ từ rồi cũng hết popup thôi mà.:D

Reply Xóa nhận xét
38

@L.m.HoaComment này dài quá =D> Có thể style của mình theo tuổi nên "già" rồi :D. Cách đây khoảng 7 năm cái web của mình bị mấy anh nói là style học trò, lẩu thập cẩm :(( vì mình thích những thứ ngồ ngộ. Và còn nói là có quá nhiều lỗi, khi đó "ngựa non háu đá" mình ức lắm b-(, giờ đây nhìn lại thì k sai và mình thường tập trung về tính năng nhiều hơn. Xu thế chung bg cũng theo hướng đơn giản, cứ nhìn vào Vista bóng bẩy, 3D và Win8 là biết :D

Quay lại bài viết này thì cũng nằm trong hướng đi lâu nay của mình. Mình chỉ đưa ra code đơn giản, hướng làm còn mọi người muốn phát triển thêm là tùy, cho nên code đưa ra k encode (code này đã có người lấy rồi đặt dòng bản quyền bởi người đó mới gớm chứ b-(, mặc dù nó chắc k biết đến trang nhaccuatui của vn =))). Bạn thích những thứ như vậy thì mail cho mình nói những thứ bạn cần đưa vào, mình làm riêng cho.

Reply Xóa nhận xét
39

@Tien NguyenChờ cập nhật của bác, chứ cái iframe của Blogger khó add content vào trong khi iframe khác có thể add content từ button (nhưng chỉ trên IE)

Reply Xóa nhận xét
40

@NAD Bác NAD rất hay dùng từ mạnh, đặc biệt cái slogan của bác. Nói thật bác đừng chém em nhé, em không thích nó lắm.

Reply Xóa nhận xét
41

@Duy Pham
Cảm ơn, mời vào đọc mail.

Reply Xóa nhận xét
42

Nhận xét này đã bị quản trị viên blog xóa.

Reply
Nặc danh 8/4/12 01:51
43

Mình làm theo hướng dẫn mà không được nhỉ, làm xong như trên rồi làm tiếp bước 3 ở đây http://blog.duypham.info/2010/11/emoticons-for-blogspot-work-in-ie.html
Không thấy hiện lên khung emoticons. Bạn nào giúp m với

Reply Xóa nhận xét
44

Nhận xét này đã bị tác giả xóa.

Reply
45

Hallo Duy, im very excited to know this tutorial. =))
but there's a problem in my place here.. :( i use your nexus template with a lil bit css personalization.. and i put the code above as your instruction.. but.. the img nor the youtube url didn't change to image nor to embedded video..

Have any suggestion for me, Bro? :-SS

Reply Xóa nhận xét
46

ups.. heres my dummy blog page http://simuxlasi.blogspot.com/2012/04/lorem-ipsum.html hope u have a lil time to spend there :D

Reply Xóa nhận xét
47

oops! it works properly now.. it was my fault mistaken the codes ahahah sorry Bro.. :))

Reply Xóa nhận xét
Nặc danh 19/4/12 20:28
48

Nhận xét này đã bị quản trị viên blog xóa.

Reply
50

Mình chèn được Emo rồi, nhưng sao nó không hiện ra để lựa chọn vậy http://nguyenhaiblog.blogspot.com/2012/04/share-acc-vip-4sharevn-cho-moi-nguoi.html

Reply Xóa nhận xét
52

Chưa hiểu lắm, nghĩa là áp dụng thủ thuạt kia sẽ không hiện emo để chọn à

Reply Xóa nhận xét
53

Hiển thị ký tự emo thì ở bài cũ mình đã hướng dẫn cách tạo rồi nên k viết lại, bài viết mình đưa ở trên là để biết cách đặt vào vị trí nào để khi reply cũng vẫn đi theo khung comment.

Reply Xóa nhận xét
54

Okie, đã được, tks Duy nhé http://nguyenhaiblog.blogspot.com/2012/04/share-acc-vip-4sharevn-cho-moi-nguoi.html

Mình đang gặp vấn đề ở đây nữa, bạn qua xem nhé

http://blog.nguoiaolam.net/2012/04/metro-btk-metro-ui-style-blogger.html#c5411815299353161820

Reply Xóa nhận xét
55

sao chủ thớt nhiều thủ thuật như vậy sao không trang trí blog của mình đi

Reply Xóa nhận xét
56

Bài viết rất hay http://tanchau123.blogspot.com

Reply Xóa nhận xét
57

Bài này rất hữu ích cho những trang muốn chia sẻ nhạc và clip đây .

Reply Xóa nhận xét
58

this excellent tips, thankz

Reply Xóa nhận xét
59

Mình thử mãi sao không đc bạn nhỉ, blog mình là CoNguyet.comVinaPayza.com

Reply Xóa nhận xét
60

Duy pham đâu rồi, giupx đỡ anh em đê ê ê

Reply Xóa nhận xét
61

K áp dụng nó cho blog thì mình tìm lỗi kiểu gì, những comment mà nội dung chỉ là "không làm được" mình luôn bỏ qua, làm ơn áp dụng nó và giữ nguyên để được support.

Reply Xóa nhận xét
Nặc danh 13/7/12 11:27
62

Nhận xét này đã bị quản trị viên blog xóa.

Reply
Nặc danh 17/8/12 02:15
63

When I am posting img, youtube, emot on my blog some comments are being hidden...

Reply Xóa nhận xét
64

Cám ơn anh nhiều, em đã cài thành công :D
Em có thắc mắc là emotions nó chỉ hiện ở phần Trang chủ, khi em tạo một trang mới thì dưới phần bình luận vẫn có khung emotion nhưng khi gõ lại không hiện, vậy phải khắc phục thế nào ạ? Em cám ơn anh nhiều!

Reply Xóa nhận xét
Nặc danh 11/10/12 13:52
65

Làm mãi mà ko được. Nản :1)

Reply Xóa nhận xét
66

Bạn ơi, cho NK hỏi chút, hiện tại NK chèn emoticons theo hướng dẫn của bài này, nhưng NK muốn hiển thị các ký tự emoticons để các bạn dễ sử dụng. Nhưng blog NK kg có thẻ này , vậy có cách nào để hiển thị kg bạn? NK cám ơn bạn trước nhé !

Reply Xóa nhận xét
69


Cái chỗ này tớ chẳng biết làm sao cả.ad giúp t với...


Sau khi đã thành công với việc chèn emoticons vào khung Nhận xét bạn hoàn toàn có thể chèn emoticons vào khung Bài đăng hay khung Nhận xét mới bằng cách tạo một ID mới bao quanh khung Bài đăng hay khung Nhận xét mới và khai báo ID này trong javascript ở bước 1 tương tự như khai báo ID emocomments (tên ID phải khác nhau).

Reply Xóa nhận xét
70

Bác cho em hỏi sao blog của em không hiện lên khung comment của google, mặt dù em đã vào phần cài đặt để chỉnh rồi nhưng vẫn không dc. Xin cảm ơn!
http://kysupanda90.blogspot.com

Reply Xóa nhận xét
71

http://www.way2blogging.org/wp-content/uploads/blog_images/How-to-Install-Flash-Animated-Label-Cloud-Widget-on-Blogger-Blog-Video-Tutorial.jpg

Reply Xóa nhận xét
72

Nhận xét này đã bị quản trị viên blog xóa.

Reply

Đăng nhận xét

Cancel