Thêm Bộ Emoji Facebook Khi Comment Cho Blogger/Blogspot

 


Bài viết này mình sẽ chia sẻ tới anh em cách thêm bộ Emoji của Facebook vào trong phần comment của Blogger nha. Cực đẹp và cực sang chảnh ( Còn chảnh như nào thì không biết nha )

Bài viết này có áp dụng một số dữ liệu từ Hung1001 nha.

Chèn CSS

Các bạn chèn css dưới đây vào lên trên thẻ đóng  ]]></skin>


.fb-emoji{display:inline-block;width:20px;height:20px;background-image:url(https://imgur.com/EW5YZ8i.png);background-repeat:no-repeat;-webkit-background-size:20px 20px;-moz-background-size:20px;-o-background-size:20px;background-size:20px;position:relative;vertical-align:-3px}
.list-emoji{text-align:center}
.list-emoji .item{width:23px;height:23px;text-align:center;margin:5.1px;display:inline-block}
.list-emoji .fb-emoji{cursor:pointer;display:block;margin:0}
.list-emoji .short-code{display:none}
.img-0{background-position:0 0}
.img-20{background-position:0 -20px}
.img-40{background-position:0 -40px}
.img-60{background-position:0 -60px}
.img-80{background-position:0 -80px}
.img-100{background-position:0 -100px}
.img-120{background-position:0 -120px}
.img-140{background-position:0 -140px}
.img-160{background-position:0 -160px}
.img-180{background-position:0 -180px}
.img-200{background-position:0 -200px}
.img-220{background-position:0 -220px}
.img-240{background-position:0 -240px}
.img-260{background-position:0 -260px}
.img-280{background-position:0 -280px}
.img-300{background-position:0 -300px}
.img-320{background-position:0 -320px}
.img-340{background-position:0 -340px}
.img-360{background-position:0 -360px}
.img-380{background-position:0 -380px}
.img-400{background-position:0 -400px}
.img-420{background-position:0 -420px}
.img-440{background-position:0 -440px}
.img-460{background-position:0 -460px}
.img-480{background-position:0 -480px}
.img-500{background-position:0 -500px}
.img-520{background-position:0 -520px}
.img-540{background-position:0 -540px}
.img-560{background-position:0 -560px}
.img-580{background-position:0 -580px}
.img-600{background-position:0 -600px}
.img-620{background-position:0 -620px}
.img-640{background-position:0 -640px}
.img-660{background-position:0 -660px}
.img-680{background-position:0 -680px}
.img-700{background-position:0 -700px}
.img-720{background-position:0 -720px}
.img-740{background-position:0 -740px}
.img-760{background-position:0 -760px}
.img-780{background-position:0 -780px}
.img-800{background-position:0 -800px}
.img-820{background-position:0 -820px}
.img-840{background-position:0 -840px}
.img-860{background-position:0 -860px}
.img-880{background-position:0 -880px}
.img-900{background-position:0 -900px}
.img-920{background-position:0 -920px}
.img-940{background-position:0 -940px}
.img-960{background-position:0 -960px}
.img-980{background-position:0 -980px}
.img-1000{background-position:0 -1000px}
.img-1020{background-position:0 -1020px}
.img-1040{background-position:0 -1040px}
.img-1060{background-position:0 -1060px}
.img-1080{background-position:0 -1080px}
.img-1100{background-position:0 -1100px}
.img-1120{background-position:0 -1120px}
.img-1140{background-position:0 -1140px}
.img-1160{background-position:0 -1160px}
.img-1180{background-position:0 -1180px}
.img-1200{background-position:0 -1200px}
.img-1220{background-position:0 -1220px}
.img-1240{background-position:0 -1240px}
.img-1260{background-position:0 -1260px}
.img-1280{background-position:0 -1280px}
.img-1300{background-position:0 -1300px}
.img-1320{background-position:0 -1320px}
.img-1340{background-position:0 -1340px}
.img-1360{background-position:0 -1360px}
.img-1380{background-position:0 -1380px}
.img-1400{background-position:0 -1400px}
.img-1420{background-position:0 -1420px}
.msg-alert{position:fixed;bottom:20px;left:20px;background:#333;z-index:1000;color:#fff;font-size:15px;padding:8px 12px;border-radius:4px}

Chèn Javascript

Các bạn chèn mã này lên trên thẻ đóng </body>
<script type='text/javascript'>//<![CDATA[
                    var listFbIcon=[{icon:":d",class:"img-0"},{icon:":-D",class:"img-20"},{icon:":(|",class:"img-40"},{icon:":-)",class:"img-60"},{icon:"^^",class:"img-80"},{icon:"^.^",class:"img-100"},{icon:"^-^",class:"img-120"},{icon:";)",class:"img-140"},{icon:":]",class:"img-160"},{icon:":*",class:"img-180"},{icon:":B",class:"img-200"},{icon:":~|",class:"img-220"},{icon:":~D",class:"img-240"},{icon:":&gt;",class:"img-260"},{icon:":-&gt;",class:"img-280"},{icon:":=&gt;",class:"img-300"},{icon:"=)",class:"img-320"},{icon:":)",class:"img-340"},{icon:"-.-",class:"img-360"},{icon:"-_-",class:"img-380"},{icon:"/no",class:"img-400"},{icon:"-_*",class:"img-420"},{icon:":-(",class:"img-440"},{icon:":=(",class:"img-460"},{icon:"/-o",class:"img-480"},{icon:"/tired",class:"img-500"},{icon:"/sl",class:"img-520"},{icon:":z",class:"img-540"},{icon:":-p",class:"img-560"},{icon:":~p",class:"img-580"},{icon:":=p",class:"img-600"},{icon:":_p",class:"img-620"},{icon:":^z",class:"img-640"},{icon:"~~",class:"img-660"},{icon:";-|",class:"img-680"},{icon:":x",class:"img-700"},{icon:":w",class:"img-720"},{icon:":sad",class:"img-740"},{icon:"=((",class:"img-760"},{icon:":hum",class:"img-780"},{icon:":^((",class:"img-800"},{icon:":huhu",class:"img-820"},{icon:":haiz",class:"img-840"},{icon:"/sad",class:"img-860"},{icon:"/^(",class:"img-880"},{icon:":-Q",class:"img-900"},{icon:":=Q",class:"img-920"},{icon:":Q",class:"img-940"},{icon:"o_o",class:"img-960"},{icon:"@.@",class:"img-980"},{icon:":angry",class:"img-1000"},{icon:"/angry",class:"img-1020"},{icon:"|-D",class:"img-1040"},{icon:":-O",class:"img-1060"},{icon:":T",class:"img-1080"},{icon:":-T",class:"img-1100"},{icon:":ok",class:"img-1120"},{icon:"(Y)",class:"img-1140"},{icon:"(D)",class:"img-1160"},{icon:":v",class:"img-1180"},{icon:"/clap",class:"img-1200"},{icon:"/hand",class:"img-1220"},{icon:"&lt;3",class:"img-1240"},{icon:"/VN",class:"img-1260"},{icon:"&lt;-3",class:"img-1280"},{icon:"&lt;=3",class:"img-1300"},{icon:"/cup",class:"img-1320"},{icon:"/plane",class:"img-1360"},{icon:"/100",class:"img-1340"},{icon:"/done",class:"img-1380"},{icon:"/gun",class:"img-1400"},{icon:"/sun",class:"img-1420"}];

                    for (var cmt = document.getElementsByClassName("list-emoji")[0], j = 0; j < listFbIcon.length; j++) cmt.innerHTML += "<div class='item'><span class='fb-emoji " + listFbIcon[j].class + "'></span><span class='short-code'>" + listFbIcon[j].icon + "</span></div>";

                    for (var cpy = document.querySelectorAll(".list-emoji .item .fb-emoji"), i = 0; i < cpy.length; i++) cpy[i].addEventListener("click", function(e) {
                        var t = document.getElementsByTagName("body")[0],
                            o = document.createElement("textarea");
                        o.setAttribute("id", "txt-cpy"), o.style.position = "absolute", o.style.left = "-9999em", o.value = this.nextSibling.textContent, t.appendChild(o), document.getElementById("txt-cpy").select();
                        var c = document.createElement("div");
                        c.setAttribute("class", "msg-alert");
                        try {
                            var i = document.execCommand("copy");
                            c.innerHTML = i ? "Copy thành công" : "Copy lỗi !", t.appendChild(c)
                        } catch (e) {
                            console.log("Oops, unable to copy")
                        }
                        t.removeChild(o), setTimeout(function() {
                            t.removeChild(c)
                        }, 2e3)
                    });
                    //]]></script>
Khi các bạn chèn hết cái phần trên thì các bạn thêm mã dưới đây vào nơi hiển thị khung chứa Emoji nha
<div aria-expanded='false' class='list-emoji' data-toggle='collapse' id='emoji'/>
Vậy là xong. Lưu lại và hưởng thụ thành quả Demo bạn có thể xem ở phần comment của blog. Vì code này được trích xuất từ Blog ra.

You may like these posts

0 Comments

  1. Để chèn mã hay sử dụng: <i rel="pre">code_here</i>
  2. Để chèn một trích dẫn, hãy sử dụng: <b rel="quote">your_qoute</b>
  3. chèn ảnh, hãy sử dụng: <i rel="image">url_image_here</i>
Để lại bình luận theo chủ đề của bài viết, bình luận có Liên kết sẽ không được hiển thị.
Quản trị viên và tác giả blog có quyền hiển thị, xóa, đánh dấu spam, trên các nhận xét đã đăng
data-ad-format="link"