Bộ mặt cười cho blogger comment với style của Noct-land ~ góc trà đá

Yêu cầu của bạn Minh Khánh Bùi

Chèn Emoticons giống http://noct-land.blogspot.com thì làm cách nào được bác

DemoCũng vừa đúng lúc mình muốn sử dụng bộ mặt cười với style của Noct-land để áp dụng cho Easy TVL template - tác phẩm đầu tay của mình.

Chèn code hiển thị mặt cười cho blog

Bước 1: Đăng nhập vào bloger → Mẫu → Chỉnh sửa HTML
Bước 2: Mở rộng mẫu tiện ích
Bước 3: Dán code bên dưới 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(/=\)\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVMRv7QP1Gkp54L5OUqNzFGRtP0j4VusTmIT6Egs3jGG8_qw1tqz4ae2W31Mi0TCgXR3KODA9nqsIc6CUch4WkkTCzeonEZ0EHDbchYV-f_Kh_tGNz6n5NPRdUG2Qsc9vBpDWn6k5zqjY2/s1600/sexy_girl.gif'/>");
theText = theText.replace(/:\)\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhESs1v0gzQZa3qmJ-AA4f03Mh3FTlYWQWjUuUueuQER54FTTXoYTwd3uXTJC40shr0iDeeo0zk3IrBKffmunJEBV-U5a60TpkGw1thvmgvYK1V3Qsmrrv210bpZ2_ZEkiWtgw31OMWU-P7/s1600/haha.gif'/>");
theText = theText.replace(/X-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPJQdDNrx2Ww5s7uC-zYUuPPccRsjx_b6oUXGI-QE2sK6Bc1OfG_C08QQFAtaVIkJIQ_SJB35Evwus8cA2kz3mq_diJ_s56CIO53Yn7QXX-Q8oSO-4wo1K8KsAwonrSEZ9O-eqP2QL3M5/s1600/angry.gif'/>");
theText = theText.replace(/:\(\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Kw_6whR5HpbkZZaRvOXcdcwZ7WzYLkmEJsZHhqYXQn0DR_ul-EpX_55N75mz15X4vn_i59WmQzyMuHv8Lq_XbcIT0gZzI-ho0XPgpOdPaNmCRGAz67dDsGzvFb1mRvKDIbemjVli_kAM/s1600/too_sad.gif'/>");
theText = theText.replace(/b-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA4MBBei2vtyEqhbKq2alQaZx0YRIGR9XD05bvhyphenhyphensWSg2b-lBHJ0XNHIKj96t2RrP8kE3exn4eF5WqRhjJXf_2mKl1aGWcDMpZspC_IPq_YB9Y58VCWO12KrkYKqkcZ5yaHuacmD-kDdGK/s1600/beat_brick.gif'/>");
theText = theText.replace(/=d>/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiilU6SC9OhqHAt9t_sb3mRP44g6bEsW_6CeNCo4Ek9v6e1IjVL4fPe7r1c8t7o4OFlotEZjDW4kUV-wi5n1UGnadkDUXcg3IevxJUMt6zRQ-CZOJ1kd7QA1rXDmWPh0ry0YX8SGQ4RYc6i/s1600/beauty.gif'/>");
theText = theText.replace(/b-\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK9JqJagnO5q4u07ZcUL6ypfUHicdK0ZaPndKD5KEq7bwbplLGjIKc1CaiMlvY9Dbw-4DxTd1E1pf696pBTFwHR_2K8oD_jhaIxNNvb5pWYVVttWxONYKL-1Ki4oPsxrdoy7XIPXDnP-5_/s1600/boss.gif'/>");
theText = theText.replace(/:D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg53eBjbKnXiOEIr3xaZmWJRg_w3jiGyJDcBWw8q8xIKXHXMEV0dIHMji9Im3drlhcJjM1TNaqLZXwFzBnYYCO-hLF4Cq4ktZD6IWIgQLfyRiyWueCQyLKVUMKeKsCBeK2WXhyphenhyphenED_FWnoA9/s1600/big_smile.gif'/>");
theText = theText.replace(/:-\?/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYD_CStQzBv_sKzfM_3-QgxoALOhMRQlm4eliwIgEFE5oKj29hXQdIJjuXYO7GenzO-Wphqfu7TXxCvfAv9pUxrkuXnsMZ7A3MIJzpPliYqmuldLsewXXwMqauLgZbXwR-Ofui9EPUrFAQ/s1600/doubt.gif'/>");
theText = theText.replace(/:->/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3DpHFtdhSDXgycxeBXyYUFAV6MKOaE53GSEbPQuCxDRTffvcr0c_qksV9fk8K_Yd43toXiNbcnCWHqOJuxQh_AZujSNjv5CDvHkNUIAUcc3yLSQa6MA2sPwxXppZuk57xVzVurcHosBRz/s1600/look_down.gif'/>");
theText = theText.replace(/:-o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd3QnyGgzDVsXby4nVgFpxjmfFA_EL6PQssUagGOQ-4w52BVJ_LgTUqm6ShuHST9BXQLtOvLUgaii3dOhGySoJZem4NCmOvZjiA4Wpvis1RWLjpW-EqULy4y232MVgtB4EXHJiQ3Dga4QC/s1600/oh.gif'/>");
theText = theText.replace(/:\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1dve28i7ZlQvR5Q7TqMo0l_l_2k9vAAVn_iTTX0gzhXAb9r70V7NyEP1hECz-NFjWp305bWlwkeTBy520-2Nzurz0CGfao52OBP1uiN8cN51Dqrj6Q3RiRuPu6LIUS71KC7v3eMATHCX9/s1600/smile.gif'/>");
theText = theText.replace(/\[-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGAEr0bm59YgoS2JV1d7o9MrLohLOqPqz47BNHqW_RLyoFks8bEkNOGomnu_oMtN7J3LfgSgu8nRiLRvcijqIWFMzeSpibnEs8sF7SMvJMC7GNhEz0kqdxXi0E47cG5DED5OSBhF9lkmgV/s1600/nosebleed.gif'/>");
theText = theText.replace(/@-\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQD4hErsAJ31msA1zF6-ekfkP4upEBbFX58zwPj0wfp-Uzlfzbng1nxEBL-MyJBkgcC9zRSeKaHQGFuyG1VNBYEiJ2lETVyBlUdUDSuXoHRfrB3AOwfZ6NzRKBxBR2jT10TlofLLLfwiZP/s1600/ops.gif'/>");
theText = theText.replace(/:-s/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJ731LQa7uRx-cHXMsxmp2hbUxu9jB27JOnaxeYHrccrt6TmcwAu-YMm6AY_ZNx7Wr6rsyEhXJ-Qt1JSKWO-oD_8uD03FD7v21s8sHLZ6IR-Zo3hSOpRoYXciWhmEARMrs-ppKVliyK9T/s1600/pudency.gif'/>");
theText = theText.replace(/:\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEThGsfg_imyp-9obtmJW99hxtFFJh45SQU7BVFY1703UzzYcq5vmiqq46OQ7cKc9sCdT8PUl0_nJJuokBkfpwBLGbc8FQ4hAb0VgxvT6Y8sBu9pRYNq4ahoH_xPqXNlA66EQb1qSxKymg/s1600/sad.gif'/>");
theText = theText.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUzM62MfT7cB1x7aV0sd8T5sjwRjERmQxUBKmCz8WRQWA6Oay_YLPeQpsMFWtF42fb6DSgEXNf2ZNk_2UEMkAiTvAGp-x5fp9vfLOQO_UmRQkNpithczvt9cZmTDjmE3yPxwMT4R9P01D8/s1600/still_dreaming.gif'/>");
theText = theText.replace(/:\*/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXsLEDcXBBmBxHQrhzDvmeAqconk6pTJT_tjiQQ4O6tF6cU454ds43pXJ8IpAG3e7RBzChaMNLgBn13voB7mBjO_9GoppTbfWK226wrfodXnUPXBWKmf2Q0HjM3OJusr031hv22USsv3FK/s1600/sweet_kiss.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

Bước 4: Đối với những blog sử dụng thread comment của blogger thì tìm code sau

bodyText = document.getElementById("emocomments");

Và thay thế bằng

bodyText = document.getElementById("comment-holder");

Bước 5: Thêm thẻ bên dưới vào trước đoạn <b:loop values='data:post.comments' var='comment'> trong template của bạn

<div id='emocomments'>

Tìm thẻ đóng </b:loop> của đoạn code trên và thêm code bên dưới vào sau nó

</div>

Sau khi thêm 2 đoạn code trên ta sẽ có như sau

Trong đó đoạn màu được bôi màu xanh là những code ta đã thêm vào

Hiển thị ký tự và mặt cười tương ứng trên blog

Bước 1: Tìm <data:blogTeamBlogMessage/> và dán ngay sau đoạn code cuối cùng bạn tìm được trong template đoạn code sau:

<h2 class='the-tooltip top left emo'>
Chèn Emoticons
<div class='comment_emo_list'>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhESs1v0gzQZa3qmJ-AA4f03Mh3FTlYWQWjUuUueuQER54FTTXoYTwd3uXTJC40shr0iDeeo0zk3IrBKffmunJEBV-U5a60TpkGw1thvmgvYK1V3Qsmrrv210bpZ2_ZEkiWtgw31OMWU-P7/s1600/haha.gif'/><span> :))</span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Kw_6whR5HpbkZZaRvOXcdcwZ7WzYLkmEJsZHhqYXQn0DR_ul-EpX_55N75mz15X4vn_i59WmQzyMuHv8Lq_XbcIT0gZzI-ho0XPgpOdPaNmCRGAz67dDsGzvFb1mRvKDIbemjVli_kAM/s1600/too_sad.gif'/><span> :((</span> </div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg53eBjbKnXiOEIr3xaZmWJRg_w3jiGyJDcBWw8q8xIKXHXMEV0dIHMji9Im3drlhcJjM1TNaqLZXwFzBnYYCO-hLF4Cq4ktZD6IWIgQLfyRiyWueCQyLKVUMKeKsCBeK2WXhyphenhyphenED_FWnoA9/s1600/big_smile.gif'/><span> :D </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEThGsfg_imyp-9obtmJW99hxtFFJh45SQU7BVFY1703UzzYcq5vmiqq46OQ7cKc9sCdT8PUl0_nJJuokBkfpwBLGbc8FQ4hAb0VgxvT6Y8sBu9pRYNq4ahoH_xPqXNlA66EQb1qSxKymg/s1600/sad.gif'/><span> :( </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVMRv7QP1Gkp54L5OUqNzFGRtP0j4VusTmIT6Egs3jGG8_qw1tqz4ae2W31Mi0TCgXR3KODA9nqsIc6CUch4WkkTCzeonEZ0EHDbchYV-f_Kh_tGNz6n5NPRdUG2Qsc9vBpDWn6k5zqjY2/s1600/sexy_girl.gif'/><span> =)) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA4MBBei2vtyEqhbKq2alQaZx0YRIGR9XD05bvhyphenhyphensWSg2b-lBHJ0XNHIKj96t2RrP8kE3exn4eF5WqRhjJXf_2mKl1aGWcDMpZspC_IPq_YB9Y58VCWO12KrkYKqkcZ5yaHuacmD-kDdGK/s1600/beat_brick.gif'/><span> b-( </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1dve28i7ZlQvR5Q7TqMo0l_l_2k9vAAVn_iTTX0gzhXAb9r70V7NyEP1hECz-NFjWp305bWlwkeTBy520-2Nzurz0CGfao52OBP1uiN8cN51Dqrj6Q3RiRuPu6LIUS71KC7v3eMATHCX9/s1600/smile.gif'/><span> :) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUzM62MfT7cB1x7aV0sd8T5sjwRjERmQxUBKmCz8WRQWA6Oay_YLPeQpsMFWtF42fb6DSgEXNf2ZNk_2UEMkAiTvAGp-x5fp9vfLOQO_UmRQkNpithczvt9cZmTDjmE3yPxwMT4R9P01D8/s1600/still_dreaming.gif'/><span> :P </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd3QnyGgzDVsXby4nVgFpxjmfFA_EL6PQssUagGOQ-4w52BVJ_LgTUqm6ShuHST9BXQLtOvLUgaii3dOhGySoJZem4NCmOvZjiA4Wpvis1RWLjpW-EqULy4y232MVgtB4EXHJiQ3Dga4QC/s1600/oh.gif'/><span> :-o </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXsLEDcXBBmBxHQrhzDvmeAqconk6pTJT_tjiQQ4O6tF6cU454ds43pXJ8IpAG3e7RBzChaMNLgBn13voB7mBjO_9GoppTbfWK226wrfodXnUPXBWKmf2Q0HjM3OJusr031hv22USsv3FK/s1600/sweet_kiss.gif'/><span> :* </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJ731LQa7uRx-cHXMsxmp2hbUxu9jB27JOnaxeYHrccrt6TmcwAu-YMm6AY_ZNx7Wr6rsyEhXJ-Qt1JSKWO-oD_8uD03FD7v21s8sHLZ6IR-Zo3hSOpRoYXciWhmEARMrs-ppKVliyK9T/s1600/pudency.gif'/><span> :-s </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGAEr0bm59YgoS2JV1d7o9MrLohLOqPqz47BNHqW_RLyoFks8bEkNOGomnu_oMtN7J3LfgSgu8nRiLRvcijqIWFMzeSpibnEs8sF7SMvJMC7GNhEz0kqdxXi0E47cG5DED5OSBhF9lkmgV/s1600/nosebleed.gif'/><span> [-( </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQD4hErsAJ31msA1zF6-ekfkP4upEBbFX58zwPj0wfp-Uzlfzbng1nxEBL-MyJBkgcC9zRSeKaHQGFuyG1VNBYEiJ2lETVyBlUdUDSuXoHRfrB3AOwfZ6NzRKBxBR2jT10TlofLLLfwiZP/s1600/ops.gif'/><span> @-) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiilU6SC9OhqHAt9t_sb3mRP44g6bEsW_6CeNCo4Ek9v6e1IjVL4fPe7r1c8t7o4OFlotEZjDW4kUV-wi5n1UGnadkDUXcg3IevxJUMt6zRQ-CZOJ1kd7QA1rXDmWPh0ry0YX8SGQ4RYc6i/s1600/beauty.gif'/><span> =d> </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK9JqJagnO5q4u07ZcUL6ypfUHicdK0ZaPndKD5KEq7bwbplLGjIKc1CaiMlvY9Dbw-4DxTd1E1pf696pBTFwHR_2K8oD_jhaIxNNvb5pWYVVttWxONYKL-1Ki4oPsxrdoy7XIPXDnP-5_/s1600/boss.gif'/><span> b-) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYD_CStQzBv_sKzfM_3-QgxoALOhMRQlm4eliwIgEFE5oKj29hXQdIJjuXYO7GenzO-Wphqfu7TXxCvfAv9pUxrkuXnsMZ7A3MIJzpPliYqmuldLsewXXwMqauLgZbXwR-Ofui9EPUrFAQ/s1600/doubt.gif'/><span> :-? </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3DpHFtdhSDXgycxeBXyYUFAV6MKOaE53GSEbPQuCxDRTffvcr0c_qksV9fk8K_Yd43toXiNbcnCWHqOJuxQh_AZujSNjv5CDvHkNUIAUcc3yLSQa6MA2sPwxXppZuk57xVzVurcHosBRz/s1600/look_down.gif'/><span> :-> </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPJQdDNrx2Ww5s7uC-zYUuPPccRsjx_b6oUXGI-QE2sK6Bc1OfG_C08QQFAtaVIkJIQ_SJB35Evwus8cA2kz3mq_diJ_s56CIO53Yn7QXX-Q8oSO-4wo1K8KsAwonrSEZ9O-eqP2QL3M5/s1600/angry.gif'/><span> X-( </span></div>
</div>
</h2>

Bước 2: Dán đoạn code bên dưới trước thẻ ]]></b:skin>

.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}

Do cấu trúc mỗi template một khác nên cách thực hiện có thể khác nhau một chút nên trước khi thực hiện nhớ lưu lại template và trong quá trính thực hiện hãy tùy biến một chút cho phù hợp
Nhược điểm của bộ mặt cười này là chỉ hiển thị khi đã có 1 comment, mình sẽ tìm cách khắc phục sau

Socializer Widget By Blogger Yard

SOCIALIZE IT →

góc trà đá

Chủ Nhật, 10 tháng 3, 2013