Cài đặt Bộ Yahoo Emoticons cho Comments

Tại Bloggerism, qua nhãn Emoticons, bạn có thể tìm hiểu về cách cài đặt biểu tượng cảm xúc trên nhận xét blogspot. Bài viết này xin hướng dẫn cách cài đặt bộ biểu tượng cảm xúc Yahoo Messenger trong đó Bloggerism đã bổ sung thêm một số biểu tượng ngộ nghĩnh. Đặc biệt là có tạo thêm hiệu ứng ẩn hiện bảng biểu tượng cảm xúc.

Trước khi cài đặt cho blogspot của mình, bạn có thể xem Demo.

Để cài đặt, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template, chọn Expand Widget Templates.

Đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
function emoticonCommentha(replace) {
if(!document.getElementById) {return;} // no support
bodyText = document.getElementById(replace);
replacetheText = bodyText.innerHTML;
replacetheText = replacetheText.replace(/:\)\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" />');
replacetheText = replacetheText.replace(/:\)\]/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif" />');
replacetheText = replacetheText.replace(/;\)\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif" />');
replacetheText = replacetheText.replace(/;\;\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" />');
replacetheText = replacetheText.replace(/:D/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" />');
replacetheText = replacetheText.replace(/;\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" />');
replacetheText = replacetheText.replace(/:p/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" />');
replacetheText = replacetheText.replace(/:\(\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" />');
replacetheText = replacetheText.replace(/:\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" />');
replacetheText = replacetheText.replace(/:\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" />');
replacetheText = replacetheText.replace(/:X/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" />');
replacetheText = replacetheText.replace(/=\(\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" />');
replacetheText = replacetheText.replace(/:\-\o/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" />');
replacetheText = replacetheText.replace(/:-\//g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" />');
replacetheText = replacetheText.replace(/:-\*/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" />');
replacetheText = replacetheText.replace(/:\|/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" />');
replacetheText = replacetheText.replace(/8\-\}/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif" />');
replacetheText = replacetheText.replace(/~x\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif" />');
replacetheText = replacetheText.replace(/b-\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif" />');
replacetheText = replacetheText.replace(/:-\L/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif" />');
replacetheText = replacetheText.replace(/x\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" />');
replacetheText = replacetheText.replace(/=\)\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" />');
replacetheText = replacetheText.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixjBNdY2stkt5OOwmp0L2VTc_0eL9JPFN2Wjvtxn5yG95Z94DFiP9mZEFk8GOlXDZpNrFZFAZxYKFcTG5Ofg_ownKCpj2d5VT0_zRIWxQdN6CDnVeVSmFnFzKg_1f1SuLv3l-NkwniUc0N/" />');
replacetheText = replacetheText.replace(/:\mj/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiddCf61cUkjNF7YG7lFYXxTUfxZj6MYpZgpeGXC375xWrxuqy6wDBfqU7rgw9uY3lcFeCEPX0596AxtlUjaIRVpbhEO-e-RIcACBDDwvY9rzYwOI-sWG6RZEI20HBfl6Azlni42_128Wk/" />');
bodyText.innerHTML = replacetheText;
}
//]]>
</script>

Bước 2. Đặt khung Biểu tượng cảm xúc. Tìm đến dòng <b:includable id='comment-form' var='post'> và đặt sau nó bằng đoạn code bên dưới.

<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">[&#9660;/&#9650;] 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 border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
<img border='0' height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixjBNdY2stkt5OOwmp0L2VTc_0eL9JPFN2Wjvtxn5yG95Z94DFiP9mZEFk8GOlXDZpNrFZFAZxYKFcTG5Ofg_ownKCpj2d5VT0_zRIWxQdN6CDnVeVSmFnFzKg_1f1SuLv3l-NkwniUc0N/' width='18'/> :P
<img border='0' height='22' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiddCf61cUkjNF7YG7lFYXxTUfxZj6MYpZgpeGXC375xWrxuqy6wDBfqU7rgw9uY3lcFeCEPX0596AxtlUjaIRVpbhEO-e-RIcACBDDwvY9rzYwOI-sWG6RZEI20HBfl6Azlni42_128Wk/' width='50'/> :mj
</b>
</div>
</div>

Đoạn Javascript ở trên sẽ giúp tạo hiệu ứng ẩn hiện khung Biểu tượng cảm xúc. Trước đây blog Fandung.com đã giới thiệu một cách ẩn hiện khung Biểu tượng cảm xúc song cách cài đặt có phần khó cho các newbie blogspotist cho nên Bloggerism mới giới thiệu cách này để bạn đọc chia sẻ.

Bước 3. Để biểu tượng cảm xúc hiển thị trên phần Comment Body thì bạn hãy tìm đến đoạn code tương tự bên dưới.

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

Hoặc:

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>

Đối với một số Template là đoạn code:

<div id='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>

Thay dòng <p><data:comment.body/></p> bằng đoạn code:

<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p><script type='text/javascript'> replace = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;; emoticonCommentha(replace);</script>

Lưu Template là OK.

Lưu ý: Bài viết này giới thiệu chung cách cài đặt cho tất cả blogspot, khi áp dụng thì bạn nên download các emoticon về rồi upload lên blogspot của bạn để lấy URL rồi thay thế lần lượt các URL tương ứng trong code, nhằm tránh tình trạng load trang chậm.