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.