Home
Blogger

Thêm Bộ Icon Emoticon cho blogspot

Hướng dẫn thêm bộ Emoticon cho blogspot đơn giản nhất, bao gồm các icon biểu tượng mặt cười giúp cho mục bình luận của blog thêm phong phú hơn.

Đặc biệt nếu bạn lưu luyến nhớ về Yahoo ngày xưa thì các bạn truy cập vô trang này http://www.emoticonr.com/emoticons/yahoo để lấy icon và thế vô các link trong CSS bên dưới


Bước 1: Thêm CSS


.hihi-moji{display:inline-block;height:18px;width:18px;vertical-align:middle;background-size:100%;background-repeat:no-repeat;margin:0}
.mj-0{background-image:url(https://twemoji.maxcdn.com/36x36/1f44d.png)}
.mj-1{background-image:url(https://twemoji.maxcdn.com/36x36/1f600.png)}
.mj-2{background-image:url(https://twemoji.maxcdn.com/36x36/1f615.png)}
.mj-3{background-image:url(https://twemoji.maxcdn.com/36x36/1f601.png)}
.mj-4{background-image:url(https://twemoji.maxcdn.com/36x36/1f60f.png)}
.mj-5{background-image:url(https://twemoji.maxcdn.com/36x36/1f603.png)}
.mj-6{background-image:url(https://twemoji.maxcdn.com/36x36/1f62c.png)}
.mj-7{background-image:url(https://twemoji.maxcdn.com/36x36/1f604.png)}
.mj-8{background-image:url(https://twemoji.maxcdn.com/36x36/1f61e.png)}
.mj-9{background-image:url(https://twemoji.maxcdn.com/36x36/1f62d.png)}
.mj-10{background-image:url(https://twemoji.maxcdn.com/36x36/1f616.png)}
.mj-11{background-image:url(https://twemoji.maxcdn.com/36x36/1f61c.png)}
.mj-12{background-image:url(https://twemoji.maxcdn.com/36x36/1f62e.png)}
.mj-13{background-image:url(https://twemoji.maxcdn.com/36x36/1f606.png)}
.mj-14{background-image:url(https://twemoji.maxcdn.com/36x36/1f609.png)}
.mj-15{background-image:url(https://twemoji.maxcdn.com/36x36/1f614.png)}
.mj-16{background-image:url(https://twemoji.maxcdn.com/36x36/1f619.png)}
.mj-17{background-image:url(https://twemoji.maxcdn.com/36x36/1f625.png)}
.mj-18{background-image:url(https://twemoji.maxcdn.com/36x36/1f620.png)}
.mj-19{background-image:url(https://twemoji.maxcdn.com/36x36/1f60e.png)}
.mj-20{background-image:url(https://twemoji.maxcdn.com/36x36/1f624.png)}
.mj-21{background-image:url(https://twemoji.maxcdn.com/36x36/1f634.png)}
.mj-22{background-image:url(https://twemoji.maxcdn.com/36x36/1f635.png)}
.mj-23{background-image:url(https://twemoji.maxcdn.com/36x36/1f637.png)}
.mj-24{background-image:url(https://twemoji.maxcdn.com/36x36/1f35c.png)}
.mj-25{background-image:url(https://twemoji.maxcdn.com/36x36/1f60d.png)}
.mj-26{background-image:url(https://twemoji.maxcdn.com/36x36/1f496.png)}
.emoji-toggle{display:inline-block;background-color:#eb3349;color:#fff;height:26px;line-height:26px;font-size:14px;cursor:pointer;padding:0 10px;margin:10px 0 10px;border-radius:2px;transition:background .17s ease}
.emoji-toggle:hover{background-color:#000}
#emoji-box{display:none;padding:20px 0 0;margin:10px 0;border-top:1px dashed #ccc}
#emoji-box .mj-item{display:inline-block;text-align:center;font-size:12px;font-weight:700;padding:0 10px;margin:0 0 10px}
#emoji-box .hihi-moji{display:block;margin:0 0 5px}

Bước 2: thêm jQuery trước thẻ đóng 


<script>

    //<![CDATA[

    $(".emoji-toggle").on("click", function() {

        $("#emoji-box").slideToggle(170)

    }), $(".comment-content").each(function() {

        var e = $(this);

        e.replaceText("(y)", "<span class='hihi-moji mj-0' />"), e.replaceText(":)", "<span class='hihi-moji mj-1' />"), e.replaceText(":(", "<span class='hihi-moji mj-2' />"), e.replaceText("hihi", "<span class='hihi-moji mj-3' />"), e.replaceText(":-)", "<span class='hihi-moji mj-4' />"), e.replaceText(":D", "<span class='hihi-moji mj-5' />"), e.replaceText("=D", "<span class='hihi-moji mj-6' />"), e.replaceText(":-d", "<span class='hihi-moji mj-7' />"), e.replaceText(";(", "<span class='hihi-moji mj-8' />"), e.replaceText(";-(", "<span class='hihi-moji mj-9' />"), e.replaceText("@-)", "<span class='hihi-moji mj-10' />"), e.replaceText(":P", "<span class='hihi-moji mj-11' />"), e.replaceText(":o", "<span class='hihi-moji mj-12' />"), e.replaceText(":>)", "<span class='hihi-moji mj-13' />"), e.replaceText("(o)", "<span class='hihi-moji mj-14' />"), e.replaceText(":p", "<span class='hihi-moji mj-15' />"), e.replaceText("(p)", "<span class='hihi-moji mj-16' />"), e.replaceText(":-s", "<span class='hihi-moji mj-17' />"), e.replaceText("(m)", "<span class='hihi-moji mj-18' />"), e.replaceText("8-)", "<span class='hihi-moji mj-19' />"), e.replaceText(":-t", "<span class='hihi-moji mj-20' />"), e.replaceText(":-b", "<span class='hihi-moji mj-21' />"), e.replaceText("b-(", "<span class='hihi-moji mj-22' />"), e.replaceText(":-#", "<span class='hihi-moji mj-23' />"), e.replaceText("=p~", "<span class='hihi-moji mj-24' />"), e.replaceText("x-)", "<span class='hihi-moji mj-25' />"), e.replaceText("(k)", "<span class='hihi-moji mj-26' />")

    })

    //]]>

</script>

Bước 3: Thêm HTML


 Đầu tiên bạn phải xác định được khung bình luận cho bài viết Các bạn tìm nó nằm ở vị trí thứ 2 (tùy theo template các bạn tìm vị trí cho chính xác) Các bạn copy dán đoạn HTML này vô dưới, hoặc tùy vị trí bạn muốn hiển thị Các bạn phải test từng vị trí nhé :D nhiều khi phải có ít nhất 1 comment nó mới hiện và ngược lại có comment thì nó ẩn, cái này phải phụ thuộc vô trình HTML của các bạn. 
<span class='emoji-toggle'><span class='hihi-moji mj-1' /> Emoticon </span>

<div id='emoji-box'>

    <div class='mj-item'><span class='hihi-moji mj-0' />(y)</div>

    <div class='mj-item'><span class='hihi-moji mj-1' />:)</div>

    <div class='mj-item'><span class='hihi-moji mj-2' />:(</div>

    <div class='mj-item'><span class='hihi-moji mj-3' />hihi</div>

    <div class='mj-item'><span class='hihi-moji mj-4' />:-)</div>

    <div class='mj-item'><span class='hihi-moji mj-5' />:D</div>

    <div class='mj-item'><span class='hihi-moji mj-6' />=D</div>

    <div class='mj-item'><span class='hihi-moji mj-7' />:-d</div>

    <div class='mj-item'><span class='hihi-moji mj-8' />;(</div>

    <div class='mj-item'><span class='hihi-moji mj-9' />;-(</div>

    <div class='mj-item'><span class='hihi-moji mj-10' />@-)</div>

    <div class='mj-item'><span class='hihi-moji mj-11' />:P</div>

    <div class='mj-item'><span class='hihi-moji mj-12' />:o</div>

    <div class='mj-item'><span class='hihi-moji mj-13' />:&gt;)</div>

    <div class='mj-item'><span class='hihi-moji mj-14' />(o)</div>

    <div class='mj-item'><span class='hihi-moji mj-15' />:p</div>

    <div class='mj-item'><span class='hihi-moji mj-16' />(p)</div>

    <div class='mj-item'><span class='hihi-moji mj-17' />:-s</div>

    <div class='mj-item'><span class='hihi-moji mj-18' />(m)</div>

    <div class='mj-item'><span class='hihi-moji mj-19' />8-)</div>

    <div class='mj-item'><span class='hihi-moji mj-20' />:-t</div>

    <div class='mj-item'><span class='hihi-moji mj-21' />:-b</div>

    <div class='mj-item'><span class='hihi-moji mj-22' />b-(</div>

    <div class='mj-item'><span class='hihi-moji mj-23' />:-#</div>

    <div class='mj-item'><span class='hihi-moji mj-24' />=p~</div>

    <div class='mj-item'><span class='hihi-moji mj-25' />x-)</div>

    <div class='mj-item'><span class='hihi-moji mj-26' />(k)</div>

Post a Comment

© ‧ Quang Sáng Blog. All rights reserved. | Protected By DMCA.

 Developed by Jago Desain