Truyện Cười BlogTaPhiet KC

Chat Box


--------------:Search

Thứ Năm, 20 tháng 10, 2011

Đóng khung cho Emoticons phần nhận xét


Nguồn: www.thuthuatblogger.info và blog.duypham.info

Sau một hồi ngâm cứu 2 bài viết của 2 blogger thủ thuật nổi tiếng đó là Blog của anh Hà từ bài viết Cài đặt Bộ Yahoo Emoticons cho Comments , và bài viết của Blog DuyPham từ bài viết Emoticons for Blogspot (work in IE) - Biểu tượng mặt cười cho Blogspot. Mình đã làm được cái khung như hình trên.Nhìn rất gọn gàng và đẹp mắt phải không? Sau đây, mình xin hướng dẫn mọi người cách thực hiện. Bài viết này mình vẫn lấy các bước của Bác Duy từ DuyPham Blog, chỉ xin sưả lại cái code mà mình đang dùng.



Bước 1: Mở template và chèn đoạn mã dưới đây trước thẻ </body>
<script type='text/javascript'> //<![CDATA[ function replaceText(){if(!document.getElementById){return;} bodyText = document.getElementById("emocomments"); theText = bodyText.innerHTML; theText = theText.replace(/:\)\)/gi, "<img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/53.gif'/>"); theText = theText.replace(/=d>/gi, "<img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/bye.gif'/>"); theText = theText.replace(/:d/gi, "<img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/ypeace.gif'/>"); theText = theText.replace(/:p/gi, "<img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/jogging.gif'/>"); theText = theText.replace(/:\(\(/gi, "<img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/plzno.gif'/>"); theText = theText.replace(/:\)/gi, "<img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/blingeye.gif'/>"); theText = theText.replace(/:\(/gi, "<img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/crybaby.gif'/>"); theText = theText.replace(/:-\?/gi, "<img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/hmmm.gif'/>"); theText = theText.replace(/\[\-\(/gi, "<img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/152.gif'/>"); theText = theText.replace(/:-o/gi, "<img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/wooi2.gif'/>"); theText = theText.replace(/:-t/gi, "<img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/yellowcard.gif'/>"); theText = theText.replace(/:-ss/gi, "<img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/curse.gif'/>"); theText = theText.replace(/b-\(/gi, "<img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/hero.gif'/>"); theText = theText.replace(/@-\)/gi, "<img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/blur.gif'/>"); theText = theText.replace(/=\)\)/gi, "<img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/congratz.gif'/>"); bodyText.innerHTML = theText; }replaceText(); //]]> </script> 


Bước 2: Tìm đến thẻ <b:loop values='data:post.comments' var='comment'>
và thêm trước nó thẻ <div id='emocomments'> 
Tìm thẻ đóng </b:loop> và thêm sau nó thẻ </div>

Bước 3: Đặt khung Biểu tượng cảm xúc. Tìm đến thẻ <data:blogTeamBlogMessage/>
và chèn đoạn mã dưới đây vào sau nó:

<script language='javascript'> //<![CDATA[ function toggle() { var ele = document.getElementById("toggleText"); var text = document.getElementById("displayText"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "Show Emoticons"; } else { ele.style.display = "block"; text.innerHTML = "Hide Emoticons"; } } //]]> </script><a href='javascript:toggle();' id='displayText'>[▼/▲] Emoticons</a> <img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif'/> <div id='toggleText' style='display: none;'> <div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf'> <b> <img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/blingeye.gif'/>:) <img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/crybaby.gif'/>:( <img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/53.gif'/>:)) <img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/plzno.gif'/>:(( <img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/congratz.gif'/>=)) <img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/bye.gif'/>=D> <img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/ypeace.gif'/>:D <img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/jogging.gif'/>:P <img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/wooi2.gif'/>:-O <img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/hmmm.gif'/>:-? <img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/curse.gif'/>:-SS <img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/yellowcard.gif'/>:-t <img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/152.gif'/>[-( <img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/blur.gif'/>@-) <img src='http://i1203.photobucket.com/albums/bb383/quangpro1610/emo/hero.gif'/>b-( </b> </div> </div> 

Bước 4: Thêm một lớp emoticons. Chèn đoạn mã dưới vào 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;} .emoticons a, .emoticons a:hover {font-size: 28px;margin-left: 20px;text-decoration:none;}  
Thế là xong!!! Chúc các bạn thành công ...
Share/Save/Bookmark

Đăng nhận xét

More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa
Top