Chèn mặt cười Doraemon với hiệu ứng tooltip vào phần comment cho Blogger/Blogspot

Insert Doraemon emoticons with the tooltip effect to comment form for Blogger/Blogspot

Để tránh đơn điệu cho blogger. Hôm nay Iris Tips giới thiệu một mẫu mặt cười (Emoticons) dạng hover tooltips cho nhận xét. Với kiểu Emoticons này sẽ hiện ra một khung tooltips hover danh sách các mặt cười cho độc giả sử dụng khi comment. Giúp blog của bạn gọn hơn.

• DEMO

Chèn mặt cười Doraemon với hiệu ứng tooltip vào phần comment cho Blogger/Blogspot

Bước 1: Vào Mẫu >> Chỉnh sửa HTML chèn đoạn code dưới đây trước thẻ </body>

 <script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comment-holder");
theText = bodyText.innerHTML;
theText = theText.replace(/:what:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK1Fci0RUhCMKQTpIR3GKxBpJA2jArJTjsWVW3imrapWEdGZ23X0t5MAOuU8GppjlCtgfFuCid9SHfQVhzu-Sj4_iU81G3I2AiiFfDL8y6bDRP2gSrumjk7l7fIe7jhqgLF-yI8avRa8s/s48-no/caigi.png'/>");
theText = theText.replace(/:smile:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVVFwulSRYGXpe5SYJ8j9kYc9mMAaE6h7FL-FRb4WMMjLdIAaE8Boke1S4Tf-ub8eqiq-2fWGxs686WzaX3LpZx1Zldshk_aQnXqmzispG0bIeLz-s48zWd5_Z5V90oGk9oCcDPxI5xtk/s48-no/cuoi.png'/>");
theText = theText.replace(/:doraemon:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGrSZOqR4qCoi_ftm9GNCcMI5dBWiHYMp_QZWW02XwyKJo9vjMcyeW4aDxS9VhumrMPW5WvcioEc1_Qi3h25AZeVzUqACV33wFCbaBKI0pdH2elBlDRWlDGci2MttKHnWtbbsYaq70HcI/s48-no/doraemon.png'/>");
theText = theText.replace(/:dorami:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3oWq-B3ZHiS70Bl-lbOmyUeNuvBaBGzF_uJl8UCry4E8QcQH1jO5GnV713dIlOZwC9cN3Q2AqIDnoYYdiDTW4JHun2SAykoaWA2K4J1WmCxVtwci9pPzd_4RYS1Vdtqir77voCc95DkU/s48-no/dorami.png'/>");
theText = theText.replace(/:jaian:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibSDLO_cmXt7YImiluHviyOxkp9BA3i1PeFSdrRhHHzdrMjzBYbtFtnBTguswlE5SpxGapPiyZ49qhHzqfXZ0DdPM46dUHcsMlrivxYPR6CM5ZuddRPBEXXXAalEBB_aqOZR1xpTj00ow/s48-no/jaian.png'/>");
theText = theText.replace(/:nobisuke:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrE3BiJ9Zzsso97eiZtxcmxvDk7wHzaIGg21CGGhFD6aGqjcIYJuNibmljkl47W4tS_a5GZXaTwUrLgtYISI-Tp47TB-95PTpmvOJjU21lGA6dR8dDBoH2uB6i_f1Z7b7XypxlDXnXJHA/s48-no/nobisuke.png'/>");
theText = theText.replace(/:nobita:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie0iCEhEiwZMOLgyZUoTtu1FhHhMblJGNVgHiwO5eD_K_Kd2C-o441sm048ZjNQ4DTgac_ZGIleVXe6zhwV1le9vO3dLvSoa9VrZWZMq1PSKMLdgAjmRVY_DX-mc5NmKOn5BSDUzYD4vw/s48-no/nobita.png'/>");
theText = theText.replace(/:ohboy:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ10hV4vhXf6BPS-gGaB-7pCu24_2iy5tsTnb1U0-doeJhYFyZ2dKuFXcLMoWKGj1C4lZaZlKEGVn5pLkhylRvZx4sKP3ClhzhEZjKWoWQJs5W339KDysbGxIqS3Lss01CTqnYycWgucQ/s48-no/ohboy.png'/>");
theText = theText.replace(/:shizuka:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhzRTUAC9GGSkt8DUgeWidmemCLaCzVncV58cVXj1Kjx8z_zbw7jOsqcmXlW1F8sJ0J9JrhKF0cu1_2I6VPbmc1ZesEBBX8Lb2k_0KIPiBzwd3MVruf87-N2Cnib_sN2fZBxUwTtfbKSc/s48-no/shizuka.png'/>");
theText = theText.replace(/:suneo:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUM9HY7KPxva3u1C8B_6qAPWnqM-zQIx5MS7Z4L_YjdQgaizM0c-lYClbdM7hT2nmAtzSO0BF48qRgZEkC7MhpqPWH-_8R-Z3pZo1SwblZbrCOVhhsWxlIqBZzTEKPPoIb7kOu9lS_e8M/s48-no/suneo.png'/>");
theText = theText.replace(/:tamako:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH1MXr0UlTmkdAhX9dL_o6EvYnNxtRjJxZNgDwIDmGc776PCj9gi3C40tFRpZX5BG6Lsj9cNhuTsYVpOlzPtqj8vTZ5XfOZSHbBAIBlGK7Yq2PoT_IbP413gd9fPXVj_lgCsr8-bZO4qk/s48-no/tamako.png'/>");
theText = theText.replace(/:sensei:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUi2tVOAKGWkQZPaQtbO3hLtER1uFOO5oU7uRyQVDQCfuk-YtH1SglOTAiiRwR6ttlqC37-mTGbzMFk9xdCgQXVCNAfvOiM67y9j0lr_Pk81gh6YN0bfJ58DqsmhwzmsK73fgOatRk4aQ/s48-no/thay.png'/>");
theText = theText.replace(/:joy:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijbRlK3RkCLKCuafAnV-LCIwOL4LMOsiQYFjFH9DL7v0h0tNoOUKDVEKkAH2d8y8qBRRhwxDl6wOcEJTpHWFsHIlcsraylLVASkPukeckSdbEYf3N8ffQZhcT1uskFZgW3jZ3JFPzocKw/s48-no/vui.png'/>");
theText = theText.replace(/:sorry:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZJbnghIeELeaUM-j2P2Fs2V1b6hRnJhokP3p-xVS1i30XL2a_aSgE80Nqwn2Ih0FrG0GaAw_ntwxDA-ZDGRwvrQhYe18r_gMoUYQjocGT02q5Kq0Km2iSWBkJA-VWe3TjZkWZ5pv5yrY/s48-no/xinloi.png'/>");
theText = theText.replace(/:bell:/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6S8WoLCixLiL0i4GcjWUZzQbOwxJV2AfsOX55NUCon10qDcmLtHLIlCQdmehxIMOJRuD3LlNNTcW1PHh_ZoMHUf-HsWFdyesdC8Cn_w97TqBk_w74tWow5TQTDxqi6xMDUdAbX2Czy7k/s48-no/bell.png'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
 

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

Bước 3: Tiếp tục tìm đoạn code </b:loop> và thêm vào sau nó thẻ đóng </div>

Bạn có thể hình dung đoạn code như sau:

 <div id='emocomments'>
<b:loop values='data:post.comments' var='comment'>
.
.
.
</b:loop>
</div> 

Bước 4: Tìm tất cả các thẻ <data:blogTeamBlogMessage/> và chèn sau nó đoạn code

 <h5 class='the-tooltip top left emo'>
<img alt="Created by Iris Tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijbRlK3RkCLKCuafAnV-LCIwOL4LMOsiQYFjFH9DL7v0h0tNoOUKDVEKkAH2d8y8qBRRhwxDl6wOcEJTpHWFsHIlcsraylLVASkPukeckSdbEYf3N8ffQZhcT1uskFZgW3jZ3JFPzocKw/s48-no/vui.png" title="Created by Iris Tips" />
<div class='comment_emo_list'>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK1Fci0RUhCMKQTpIR3GKxBpJA2jArJTjsWVW3imrapWEdGZ23X0t5MAOuU8GppjlCtgfFuCid9SHfQVhzu-Sj4_iU81G3I2AiiFfDL8y6bDRP2gSrumjk7l7fIe7jhqgLF-yI8avRa8s/s48-no/caigi.png'/><span> :what: </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVVFwulSRYGXpe5SYJ8j9kYc9mMAaE6h7FL-FRb4WMMjLdIAaE8Boke1S4Tf-ub8eqiq-2fWGxs686WzaX3LpZx1Zldshk_aQnXqmzispG0bIeLz-s48zWd5_Z5V90oGk9oCcDPxI5xtk/s48-no/cuoi.png'/><span> :smile: </span> </div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGrSZOqR4qCoi_ftm9GNCcMI5dBWiHYMp_QZWW02XwyKJo9vjMcyeW4aDxS9VhumrMPW5WvcioEc1_Qi3h25AZeVzUqACV33wFCbaBKI0pdH2elBlDRWlDGci2MttKHnWtbbsYaq70HcI/s48-no/doraemon.png'/><span> :doraemon: </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3oWq-B3ZHiS70Bl-lbOmyUeNuvBaBGzF_uJl8UCry4E8QcQH1jO5GnV713dIlOZwC9cN3Q2AqIDnoYYdiDTW4JHun2SAykoaWA2K4J1WmCxVtwci9pPzd_4RYS1Vdtqir77voCc95DkU/s48-no/dorami.png'/><span> :dorami: </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibSDLO_cmXt7YImiluHviyOxkp9BA3i1PeFSdrRhHHzdrMjzBYbtFtnBTguswlE5SpxGapPiyZ49qhHzqfXZ0DdPM46dUHcsMlrivxYPR6CM5ZuddRPBEXXXAalEBB_aqOZR1xpTj00ow/s48-no/jaian.png'/><span> :jaian: </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrE3BiJ9Zzsso97eiZtxcmxvDk7wHzaIGg21CGGhFD6aGqjcIYJuNibmljkl47W4tS_a5GZXaTwUrLgtYISI-Tp47TB-95PTpmvOJjU21lGA6dR8dDBoH2uB6i_f1Z7b7XypxlDXnXJHA/s48-no/nobisuke.png'/><span> :nobisuke: </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie0iCEhEiwZMOLgyZUoTtu1FhHhMblJGNVgHiwO5eD_K_Kd2C-o441sm048ZjNQ4DTgac_ZGIleVXe6zhwV1le9vO3dLvSoa9VrZWZMq1PSKMLdgAjmRVY_DX-mc5NmKOn5BSDUzYD4vw/s48-no/nobita.png'/><span> :nobita: </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ10hV4vhXf6BPS-gGaB-7pCu24_2iy5tsTnb1U0-doeJhYFyZ2dKuFXcLMoWKGj1C4lZaZlKEGVn5pLkhylRvZx4sKP3ClhzhEZjKWoWQJs5W339KDysbGxIqS3Lss01CTqnYycWgucQ/s48-no/ohboy.png'/><span> :ohboy: </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhzRTUAC9GGSkt8DUgeWidmemCLaCzVncV58cVXj1Kjx8z_zbw7jOsqcmXlW1F8sJ0J9JrhKF0cu1_2I6VPbmc1ZesEBBX8Lb2k_0KIPiBzwd3MVruf87-N2Cnib_sN2fZBxUwTtfbKSc/s48-no/shizuka.png'/><span> :shizuka: </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUM9HY7KPxva3u1C8B_6qAPWnqM-zQIx5MS7Z4L_YjdQgaizM0c-lYClbdM7hT2nmAtzSO0BF48qRgZEkC7MhpqPWH-_8R-Z3pZo1SwblZbrCOVhhsWxlIqBZzTEKPPoIb7kOu9lS_e8M/s48-no/suneo.png'/><span> :suneo: </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH1MXr0UlTmkdAhX9dL_o6EvYnNxtRjJxZNgDwIDmGc776PCj9gi3C40tFRpZX5BG6Lsj9cNhuTsYVpOlzPtqj8vTZ5XfOZSHbBAIBlGK7Yq2PoT_IbP413gd9fPXVj_lgCsr8-bZO4qk/s48-no/tamako.png'/><span> :tamako: </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUi2tVOAKGWkQZPaQtbO3hLtER1uFOO5oU7uRyQVDQCfuk-YtH1SglOTAiiRwR6ttlqC37-mTGbzMFk9xdCgQXVCNAfvOiM67y9j0lr_Pk81gh6YN0bfJ58DqsmhwzmsK73fgOatRk4aQ/s48-no/thay.png'/><span> :sensei: </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijbRlK3RkCLKCuafAnV-LCIwOL4LMOsiQYFjFH9DL7v0h0tNoOUKDVEKkAH2d8y8qBRRhwxDl6wOcEJTpHWFsHIlcsraylLVASkPukeckSdbEYf3N8ffQZhcT1uskFZgW3jZ3JFPzocKw/s48-no/vui.png'/><span> :joy: </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZJbnghIeELeaUM-j2P2Fs2V1b6hRnJhokP3p-xVS1i30XL2a_aSgE80Nqwn2Ih0FrG0GaAw_ntwxDA-ZDGRwvrQhYe18r_gMoUYQjocGT02q5Kq0Km2iSWBkJA-VWe3TjZkWZ5pv5yrY/s48-no/xinloi.png'/><span> :sorry: </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6S8WoLCixLiL0i4GcjWUZzQbOwxJV2AfsOX55NUCon10qDcmLtHLIlCQdmehxIMOJRuD3LlNNTcW1PHh_ZoMHUf-HsWFdyesdC8Cn_w97TqBk_w74tWow5TQTDxqi6xMDUdAbX2Czy7k/s48-no/bell.png'/><span> :bell: </span></div>
</div>
</h5>
 

Bước 5: Thêm hiệu ứng toooltips, tìm thẻ ]]></b:skin> và chèn trước nó đoạn code

 /*Doraemon emoticons by Iris-Tips.blogspot.com*/
.the-tooltip {position: relative}
.the-tooltip :focus + :last-child, .the-tooltip:focus > :last-child, .the-tooltip:hover > :last-child {opacity: 1;-webkit-transition: 0.4s 0s;-moz-transition: 0.4s 0s;-ms-transition: 0.4s 0s;-o-transition: 0.4s 0s;transition: 0.4s 0s;visibility: visible}
.the-tooltip > :last-child {border: solid 1px;border-radius: 5px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;font-size: 17px;line-height: 1.5;opacity: 0;padding: 10px 20px;position: absolute;-webkit-transition: 0.2s 0s;-moz-transition: 0.2s 0s;-ms-transition: 0.2s 0s;-o-transition: 0.2s 0s;transition: 0.2s 0s;visibility: hidden;width: 250px;z-index: 999}
.the-tooltip.emo > :last-child{font-family: sans-serif;width:100%;margin-bottom:2px !important;padding:10px;background-color:#fff;border-color:#e3e3e3;color:#161d00;text-shadow:none}
.the-tooltip.emo > :last-child:after{border-color:#fff}
.the-tooltip.emo > :last-child:before{border-color:#d3d3d3}
.the-tooltip > :last-child * {max-width: 100%}
.the-tooltip > :last-child:after, .the-tooltip > :last-child:before {border: solid 11px;content: "";display: block;margin: 0 20px 0 20px;position: absolute}
.the-tooltip.left > :last-child{left:0}
.the-tooltip.left > :last-child:after,.the-tooltip.left > :last-child:before {left:10px}
.the-tooltip.right > :last-child {right:0}
.the-tooltip.right > :last-child:after, .the-tooltip.right > :last-child:before {right:0}
.the-tooltip.center > :last-child {left: -125px;margin-left: 50%;}
.the-tooltip.center > :last-child:after, .the-tooltip.center > :last-child:before {left: 50%;margin-left: -10px}
.the-tooltip.top > :last-child{bottom:100%;margin-bottom:15px}
.the-tooltip.top > :last-child:after {margin-top: -1px}
.the-tooltip.top > :last-child:after, .the-tooltip.top > :last-child:before {border-bottom-color: transparent !important;border-left-color: transparent !important;border-right-color: transparent !important;top: 100%}
.the-tooltip.top > :last-child:before {margin-top: 0px}
.the-tooltip.bottom > :last-child {margin-top: 15px;top: 100%;}
.the-tooltip.bottom > :last-child:after {margin-bottom: -1px;}
.the-tooltip.bottom > :last-child:after, .the-tooltip.bottom > :last-child:before {border-left-color: transparent !important;border-right-color: transparent !important;border-top-color: transparent !important;bottom: 100%;}
.the-tooltip.bottom > :last-child:before {margin-bottom: 0px;}
.the-tooltip.auto-width > :last-child {white-space: nowrap;width: auto}
.the-tooltip.full-width > :last-child {left: 0;margin-left: 0;width: 100%}
.comment_emo {max-width: 40px;max-height: 40px;vertical-align: middle}
.comment_emo_list .item{float:left;padding:0 10px 10px;text-align:center}
.comment_emo_list span{display:block;font-weight:bold;font-size:13px;letter-spacing:1px}
/*Doraemon emoticons by Iris-Tips.blogspot.com*/ 

Bước 6: Và cuối cùng là lưu template lại.

Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm