Cara Memasang Emoticon Pada Komentar Blogger

cara memasang emoticon di komentar blogger
Cara Memasang Emoticon Pada Komentar Blogger Menggunakan CSS dan Javascript.

Cara Memasang Fitur Emoticon Pada Komentar Blogger Menggunakan CSS dan Javascript - Secara default, komentar Blogger ada dua jenis. Yang pertama adalah komentar Blogger bawaan (blogspot) dan yang kedua adalah komentar Blogger yang sudah dimodifikasi oleh masing-masing pembuat template tersebut.

Perbedaan di antara kedua jenis komentar tersebut ada pada fitur. Biasanya komentar yang sudah dimodifikasi memiliki fitur-fitur tambahan dan tampilan dari kolom komentarnya pun berbeda.

Salah satu fitur tambahan yang tidak ada pada kolom komentar Blogger bawaan adalah fitur emoticon yang akan saya bahas di artikel kali ini. Fitur emoticon ini dibuat menggunakan JavaScript dan beberapa baris CSS.

Nantinya, ketika ada pengunjung yang ingin menggunakan emoticon dalam komentar, mereka cukup mengklik saja gambar atau emoticon yang ingin digunakan. Kemudian kode emoticon tersebut akan otomatis tersalin ke papan klip.

Untuk menampilkan emoticon tersebut, kamu tinggal tempel saja kode HTML emoticon yang sudah tersalin tadi. Ketika kode HTML emoticon ditempel di kolom komentar, maka otomatis akan berubah menjadi emoticon. Contoh kode HTML emoticon seperti berikut :

<i rel="emo-listen"></i>

HASIL EMOTICON :

Emoticon yang digunakan berupa file gambar yang ada pada JavaScript. Jadi kemungkinan fitur emoticon ini akan mengurangi performa atau kecepatan loading blog kamu.

Cara Memasang Emoticon Pada Komentar Blogger

  1. Masuk ke dashboard Blogger kamu
  2. Masuk ke menu Theme » Edit HTML
  3. Kemudian salin dan taruh kode CSS di bawah ini di atas tag penutup </style> atau ]]></b:skin>
    .emoBox h2 {
padding:9px 10px;
background:#0c70de;
border-radius:2px;
cursor:pointer;
margin:0;
font-size:inherit;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
line-height:1.2em;
color:#fff;
font-weight:600
}
.emoBox h2.active {
background-color:#333
}
.emoBox h2::after {
content:'';
float:right;
min-width:1.2em;
min-height:1.2em;
vertical-align:middle;
background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23fff'/%3E%3C/svg%3E") center/24px no-repeat;
transition:transform .3s ease-in-out
}
.emoBox h2.active::after {
transform:rotate(90deg)
}
#emo-box {
display:flex;
flex-wrap:wrap;
align-items:center;
max-height:0;
overflow:hidden;
transition:max-height .2s ease-out;
padding:0;
overflow:hidden
}
#emo-box .item {
text-align:center;
flex:1 0 auto;
cursor:pointer;
margin:5px
}
#emo-box .item span {
display:block
}
  4. Kemudian salin dan taruh JavaScript di bawah ini tepat di atas tag penutup </body>
    <script>/*<![CDATA[*/
(function(){
  const _EmoList = {
    aghh: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7XXYtbLZX8AWL7kLbx8vP3cG9HNEMwd_0SvNdSr7IvpvBD_JauNwl1_wEgjMuXFDbZKS6qjpsk8br6cmHjhyphenhyphen_kh7NSUpQp7uzhGgcDgNiVFkAQ4gCDzbbY4pZkGd2HARNycovB-TifMKX/s1600/aghh.gif',
    cling: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgkwrdSStjXk9za7MH4Y2RWbg4Hdu7eD1uHeBMXxVeX0fGf2zsTolz1OiiMPTpsBzVSpb0ysfYKFqD4Bz4KUHfWp8bn8NjoTZSWcufJ3f5VGMlH2XMEFTcOo7ZFWzxK4HRQgv3wQJGC2TZ/s1600/cling.gif',
    haha: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2OqnphK4vK0k7AwZRkwRWruJz9oqmU4E9lw4ejtNgQkl-eiToMNAMG40d50od3-okiANJLXcLf_TZLB2mxDzHqsF9Vo9z1fIqzDftEdJNs8-80-hUuHZGMJgoiHUJ3IQ7LFlfI7NJxdxB/s1600/haha.gif',
    hehe: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd3tecgwwlySjnvxJI-SNIijUI7GTKUiA14CfNPe2TE0VW0A17l-RLj64zjp7tTFy_5PdFbh_Jy4yuXtDRaLQlW3DDrhUvoII2LZLiF_cujjIuFoHlGpOokjutO0RRLHuezuQEVxe_kQiw/s1600/hehe.gif',
    kaget: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyr4nBsbX_1CuKz_H1oh-sMqk5AVNj3M5ORjIAGbKrtFkbuuxzHU7cxlislwwxMKcmrJNWmvwAax7F-k6yULpSLyOx84TK5Zijkhj0P9btMmpnIgso4VsQ65vrEJECaM96mXjTTgssOzO5/s1600/kaget.gif',
    lalala: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinv87OKaKzijtlCsuO1KFymfxffoheaBPpjUAunmcG3nAtS2oahUXjbQhy3VCWPHgYX29-Ct2kILIJ7hyphenhyphenmXCGWWNyb9rMZIJWynXrDKmuYXA_g51R7gK84f7X5hrBZDfcjDUcrRrhQ5Cgz/s1600/lalala.gif',
    lho: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsVZgsanZIH_oynf1rk2vc5f09UT_W3w1wsCysBfvy0Kk7DmlxCJBYL7cp7Z522RLri3eMYrzGUPf7R9WqVcaAEJBkfGLzXpuFXFMseWmIWzDdr1HBPMqHj3JwQlC57tfHm12P43rpcpDV/s1600/lho.gif',
    listen: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyr5YjBJsY-c1n1p3dMqA-k9YFEXVyECM2w22K94w5WM_jdyo738DtNXAuG0ChLwBUK-_ZOfUB_L0QTjzuja0FplDC4L_2NHXY8X3mTfhKwZXdELD6maEUVv-RFaDybkcZdDtlOI15gCne/s1600/listen.gif',
    lol: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOxi49ZnquZRDbCACNo_wSFCBN3fxdCFP5sdj2lcvmAudmV7_tRYM47uVpjdoLUOHUigL0DHG9NFYqFNZu7-OCyAeKhk1zGf-2CDDCAi7tjCmKoalTwE1oEhXv-DdOEqtOpx57z5dcZX3R/s1600/lol.gif',
    nangis: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3KfTNBP3zNBJWeHWaX2BA4ni5ObFDG6WAogr2vBbMG7cSccTG0WF9wQjz3nX_BSIqF5DKhJAsRxqDeNBilWfw12FXaQT-chYIvFHMS6YaC-nw_Ucq5OcCTYEJHZtwFLfIGnb4A78udaib/s1600/nagis.gif',
    onegai: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu9s9QAMo8nKtMzxgpDA_Yo_KxrTtEMCaPM8AwP9KSW7D2EcoLtpBiKdO5gEmZXoEtzlCBSvgDK8nb7CvxjYz6P_yxWh4CXriOp3elCIkycgoAepBQAJsXeX7ZeatKS2hSgO8Xot1W9mIP/s1600/onegai.gif',
    daisuki: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtK002hhyb8DRrCKaIleEeqfrr-ICcxiyXMgjAwGcdX1AxnAgmQ8OyCEbrjtvqCEO10nJREV0uCHSSdo4VAIyIHS30G28sp1pTfs2wtmJuYiJKfD1GSCUgZ3gw9zUsPyRMOkVtOgcmU_1_/s1600/sayangku.gif',
    terharu: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKeafRmxyK0g6vP_V9WPOAXpfbco02xm3DfHbDoUtm2rsT_US8Q-bfym2yKjJkGOd8dsSaxkqTCKJapaQ77qmhtXIST-TvaQC6hBN3Y9Uae1YtlQ6x5yb4oHDIwvHkRyAB2HuD3ltEBWla/s1600/terharu.gif',
    tolong: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNzpOEMC8995wmandNkwvancaguzG8jw4tNOxifSGDRIm3G7T4EWgTerzFwveVSD5xMZeEXgNaWwU1fez4smJzG8vxTeY08jsRXe_LJtNfCkmnO9ZW2jJW5t2vgyASD48mDiTBK0lNXXue/s1600/tolong.gif',
    mantap: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9HqA6SEnRx3pjubVHGhNI0W2ylj9C4egHA40B8Lp8ZCo3DpTQ07gQ7Hm56FFCEUawrjISVncWaXrSRdyk7RUYSLvw5bOIqSUQ_-KCu7JQ0c4HkaOkSKMOACgSUAmaVVtvBJ0DfhJmrDyG/s1600/top.gif',
    troll: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKL4vNEW46R73lIVFr942PDHNQVoWUCljBD5napK49LSnruZgxSGKB3uBehBm6UqD4r6zVKCp8tOMZ23CRpET2Yqa969CWfgIew1HNo7xhwIZAtaQJz_k4HYyFSueZoQJ7jP9ByT-R9cHe/s1600/troll.gif',
    udonsay: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVsZjrzKOwIBAQbMT2MBwAY939r4Vf0tuyMo3sNWBDHa9UHgFxcWyz8zl6r5Jcs4tYcuevO-wvwkhQ7cSu0P61_4WzwSguCaiG-ubwT7wMYyIcfkefh8bNs2s5u1M0bqliSqDkqhac7rVn/s1600/udonsay.gif',
    wanipiro: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmNn5zKF151kQheuugchmvU2sBHiuW_JgDaYucWV5Y0wxezq8DdJpnSbA6heYhgJ-JjzkjA5INIFRdHJIeEn3D00K1nmw7l4Uo65t4K0BmUNLHIOzchG8T7-8bkJ5f5k8Ei6q07dZO7TVB/s1600/wanipiro.gif',
    yahoo: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ1F0EF1_jfdgzmqvEJTEzqR12FJoirSx95MeLE36mCs2KQSmu_7MVe1ETvmbtqMRfUP9t6-VonDTK5KCXV3Ipa4eESIfgFrUc9KSnq2VhGIjDS3BVszJriRQ_QERoYY32g6m6vCYDsA9c/s1600/yahoo.gif',
    yare2: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2q4qBJjbE9zFeeYvi4kWQfuwzji-lpae19GbajgOLSrt18H_ysA0IdqkZxt0DtJEIA_trsk3Z1dNEP2hP4ucUg7t0D5enGcBiSC8saLw4CZk4rA_6mBqm_UnamBrGRtwBaCzk9hK30ZG_/s1600/yare2.gif',
    ecchi: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwRIdqrgbtw1mOyjWTGX1iZrdgYPF8VRTRPMYyk0r5vUAA1d5HdpDkMJhkoBDVJ8Dhk_sILsKQEguMPtZTIbUedNkC8N4K2ULCNgArEIWClZtINCthLp-vdb3MBYXVEug93E7hfSbdvR2m/s1600/simecol.gif',
    asoy: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_SjxK7Pg5rqb1eOri05a0Sf8evwc_GRa6UDvzQf4ejzIZ3cwrfqlQ3J3tXDB70xykqAROs0vp7EWzsEtUkLaw8VYdMY5rgquN9kq_qk19mZp77grA0PSHMeP2bOzw33oWuHaHHQfwI5_-/s1600/asoy2.gif',
    yaoming: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh23LROE4Ghu8nCijzlNh3nbYIwW62ctQUovhx-SswuKbwkyZaTFQ76PEZ1m3gbIIQbNBetUVV4JD_12LOuJbqR6IzErFS03rFpF3PSi5SuYWLngYbbUZwZRvPTyshDfhoRg_BGp4Jx6daE/s1600/yaoming.jpg',
    lapar: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie1pDmzJlq08ZMWZKJz8QzVqv8Pi3JGGFJFcVTNsg6MnMe6qIhs6IHqyULhtFzOeNL-9GsKeyvvQwQazbQqkwuTqBPsnUWnRp-9T-5w8Li8YKbEbVP3N8cB2mMj-K5chkbGyqIq0ncLi1d/s1600/lapar.jpg',
    sodok: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_DwnKL1SX6xTay4sO9M-TyUnYUhMzNpy_oQB5hWlW414MGU3BBei42GF_s2xIRK-vl0FnCy0uRmPdis_kM0zeznDI9UKWPHLuXIdn9tqa8GEcz9GE2tWt9LcEVEzITMOBKSKb-_v8QsIf/s1600/3sodok.gif',
    anjrit: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVoE6hVka_uv1AIIrE6PXY5sE3EngqII6L85Bb07f_xjYOX-23y9NgEZPPvebJ9y8EDofMb_drPo_tRFDBDnnWl7s8JYHNa5smUhPjn9Ij5rn7OiHBKLA5cPH9BQrXM_BxJS66AeC-igrF/s1600/anjrit.jpg',
    bahlul: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr6fjhs1Cy1cHYu4_AzpETvX2hyphenhyphenPSYBce2huoPZizKZwzXwWXtCtySmKqLl3yqI3br6sNk0YQYDTDDaOF_JjxariVrrc0Zij545338rn4dt7EsGJQxYC3eXTpDDYd2YldMnXNwnv06WiFV/s1600/bahlul.jpg',
    baygon: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoIj3J2W7owFl92zse4fhMPXaepfZrKOP4L8TQT8l50ahv7SPwgxLGvWOajI22OCJbIqeFS0Hqpy-Dm2eD8OWgmkLstGwhqUY06IIpdwu6kCE-uqxbNwjbolQvgM6SIQCj49qikKwOv74a/s1600/baygon.jpg',
    bean: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOn6PsMfyLjW7PKPQc-P75oMsFpS3YOeZKWX-M2O4zPAY_GTgQkjgiDKnZzKok3A1W4iUk6Kn1U8gLVwHOrIyceYNZTlBkx81_aTfhqBq-bmHMGQZlLVqk0OqE2t6PzXNCtvfo7IHimJMf/s1600/bean.png',
    gebuk: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnxsGoxKsMl4GPV17oR4pQXblywuwTzvhqywZI5S_T_CppPKE2o5b5OqwP0v5NX1fMgnhcQeGHxG1taWEIEdcH_KBCYQH2CfXRoL_flA0rUGFW93RWbEYJbSkPfIlNJQ51GMoRMWUskehH/s1600/gebuk.gif',
    hoho: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpmjgvzzPazlsXf9HuuUrZ3Hq-Z4pSl9AxIMf7j5ZbXiDAz0DqNcF97ttWLk_He00s7Lx8WVL2I0-jpQwSbTvcA0g4TDZSduMIMiExw2uIUJRQ2AG7qMx4Qo_YBueDMPyDU22TrwOzm3r3/s1600/hoho.gif',
    huha: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfY26t8ZApZVQL39gOm-qU5ojVOq1GNLUyzjMZ9O2CHO3ThMdpEX8_5cF1n4VEZEISt3WKZdnNyYIqfAS23KhrvqAWjyhOef966EpFktsDkJrHw6N34lgdek4L8SFND1oRXzWicUfbUY79/s1600/huha.jpg',
    jotos: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFahmNo1yKr9uQDH8xtpDhRwO_4UQ8jveyQCCepClJCdOASZGzw5Cv5_Fw8sqsT52ctzluqLll9TSKWnty-9ZnBhIYlzN0wpg6VcPT8WktR0XzdtnSRen9Vo-CFEMSwrYivDNbc7JgeR9Y/s1600/jotos.gif',
    keplak: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfofWpV4H7hrx95pxmYeOML91PeDIaV33RelrayBLp86VuBp3BcsW9exbZkicOiPIuWx4p9iUoBQylkPWqLKDlX_Bf61hnIxfLaXLGNTurXMHINwtY1K4oUk7qrKqLfOaUaAJQTqDVFeTi/s1600/keplak.gif',
    keplak2: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgILPQ2c2fFrHssjgkIsdPiaEuEt1dESIf5d3Iy-2y7CH1xBm1-IUrIiurGTH8IWQj0m-UBx4S0vP_lRk4z2mvVGuotocKnqXcLYCSIoKuqjoWpBbXsrXk8dcvPf3FBIQY8GV_MePVT9Y4Z/s1600/keplak2.gif',
    lolol: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiy4CHiZNb2dVh-HQZBTLY0pX1Dn_t5L0V2HJMpTMXoAFGregdHPAgNwQyo09F2pLgRkb02y_XvWVWjUyWUcxRT-0i0DnydzdaGqqYjoF9rr28htdE-OBsLwjymBAj5fp_PRYZIrwmZKt4/s1600/lolol.gif',
    maso: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_iNzKLdcdVE7A6zHMAWz1mK2uKbk8jARdNShKFgse6ccXKzLM-LJOZbXSkn7IP_I3ZkK6230dWGHgE_fT_bB8RbNSaMj4K4S5mhj3PWjr4PtXmtQXhQVg0yKUp46L3-jywAKLFmSHGPeN/s1600/maso.gif',
    mlayu: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4SQ2r25BZTdkK-TWWK28HZ-nMgADFFgPTNchXOJq_gIew5GyB_fHtPbAYtKg1c8QFJLKoyhCC7bMvQXBHTy2VVhYraJ0Khhy6EI_APwSLH0XSU04oOgV3FnbXHl9pTUmdGStO4u-xUA7J/s1600/mlayu.gif',
    muter: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6oa0iVz9rlThwx_DH751hU6_EJTmEAjh3Xa3aJnI2S4aqnp9MA3Vs0PgYwjIGi7kA3OLJiEIeeW-aPRBM_E0JhdbNlpkfLquyAv87y6CXMg-0FgSCrROyoO3Y7TlcGYpIiYj02Z7IsUF2/s1600/muter.gif',
    pakyu: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfnXpGLjg3D76jthp4pFAoPsccnGE6H8-Z2lgxZcYBLg9dBrzIgLeeLEyTOJjtRLWanJMHlRxlpynNOEz4mpwlBrfIXorA411PJNJ5trueB7O8iGLk1H4WKIJZpiLNDp2rdcu4wpaWcURX/s1600/pakyu.gif',
    pare: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx0ituWF_Kj3PxNj2cmk5AoOmgHaJ-pohtpQJx7eZjMPlHOuHD-SvsltKfmJgFCn3KSjmFk_f_08Ob0eoAG1XZE8lwynEfEiQ3jCqUkupQUAgt_JBrjjc08mIbFRH1hs_Ik-msWIokZQwB/s1600/pare.jpg',
    pong: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbR6-18Rrs3sGRQLSJtm5w7MTfUn4zCmYDCIX_oKx2OLb0T-LowBsqNw6b504R25PCwxiXQmvIl-2rz_Hpp4I-34oMGJteVo_Gj_4NiYGRm6VEP2DSd7IEtYyroHPqcnsWhShB9If0TPa9/s1600/pong.gif',
    sodok: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpTtJPhia5Y6ghqpTAk-kN5TEjkrIJ5jN9gZFRq31KbPA203xZ8bd_pioozZJ4w52sF4x8_-HxA9uneORtupC7PVeB8HVAipfVRbKMJZp15nE2RJGzgAukPc2XN1bJfNnnTTTsjSQVjhQS/s1600/sodok.gif',
    udud: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSkMDb1zktP0e8Fv7s-oHAJp89hPPqSrsLc5kCP7M6fYhrM9rOd8ATqYitPyqLjfHIPpjj5-6Coqbzze2-iGAa4XFCxiVC57OXt1n9VHHzm3UcvNIRDnnO3gByb182UVFsVIXJsBTyGEfy/s1600/udud.gif',
    usap: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibv3Lo0KU84JpmTW5SroBXPv2aRazWSGit-nJjRAysc8djeh4GUuork1AEaR1S40n5iikb4WkphQTQOW3DpYcfHdnAZ-qUFuAoYADg4CEfhyvj6WAMNBxoziJGAoXPsNrzZv2REZ3ZCbcv/s1600/usap.gif',
    yaosay: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmLFuDAGz1oELshkbQj_zausJC6SNv-38i9imL82_sg8cZXnWIrXK1DxLe7XKOyto2bQYIYVIP5JQnTN-YZTyFoO1XESBPbnFNeb14VN6lwByskrnQQ3rSe8VSvhb2gKSpCFzM8LaZEJFK/s1600/yaosay.jpg',
    waduh: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1pC2SrRkTy1YpsbZZEw3-Zh5lfkNZYZ35EEvyWxWePk4RjWk2fVdNeUc1GHJq9NxAidVL4kwEnSI3fFAmXJrhICng2w18vqwaJPQeQfvxuQJ81w4E0AFlqo2RTJsDladfHkJykUlBq4N4/s1600/kiai.jpg',
  },a = document,_emoBox = a.getElementById('emo-box'),_emoTitle = a.querySelector('.emoBox h2'),_salin = 'Tersalin',_emoChange = a.querySelectorAll('i[rel*=emo]');if(_emoBox&&_emoTitle){_emoTitle.addEventListener("click",()=>{_emoTitle.classList.toggle("active"),_emoBox.style.maxHeight?_emoBox.style.maxHeight=null:_emoBox.style.maxHeight=_emoBox.scrollHeight+"px"});for(const e in _EmoList)if(Object.hasOwnProperty.call(_EmoList,e)){const t=_EmoList[e];let o=a.createElement("div");o.className="item",o.dataset.emot=e,o.innerHTML=`<img src="${t}"><span></span>`,o.addEventListener("click",()=>{o.dataset.emot;let t=document.createElement("textarea");t.className="clipboard",t.textContent=`<i rel="emo-${e}"></i>`,document.body.append(t),t.select(),t.setSelectionRange(0,99999),document.execCommand("copy"),t.remove(),o.querySelector("span").innerHTML=_salin,setTimeout(()=>{o.querySelector("span").innerHTML=""},750)}),_emoBox.appendChild(o)}}0!=_emoChange.length&&_emoChange.forEach(e=>{let t=e.getAttribute("rel").split("-")[1],o=a.createElement("img");o.src=_EmoList[t],e.parentNode.insertBefore(o,e.nextSibling),e.remove()})
})();
/*]]>*/</script>

    Kamu juga bisa menambahkan emoticon lainnya sesuai dengan keinginan kamu.

  5. Sampai di tahap ini fitur emoticon Blogger sudah berhasil dipasang. Selanjutnya memasang widget untuk menampilkan seluruh list emoticon-nya. Salin dan taruh kode berikut ke dalam barisan tag HTML komentar yang digunakan pada template blog kamu.
    <div class='emoBox'>
  <h2>Emoticon</h2>
  <div id='emo-box'></div>
</div>
    Setiap template memiliki kode atau tag komentar yang berbeda-beda. Jadi sesuaikan dengan kode atau tag HTML komentar yang diguanakan pada template blog kamu. Kamu bisa lihat contohnya di bawah ini: 
    <section id='comments'>
  <div class='emoBox'>
    <h2>Emoticon</h2>
    <div id='emo-box'></div>
  </div>
</section>

<div class='comment-form'>
  <div class='emoBox'>
    <h2>Emoticon</h2>
    <div id='emo-box'></div>
  </div>
</div>

<b:includable id='commentFormIframeSrc' var='post'>
  <div class='emoBox'>
    <h2>Emoticon</h2>
    <div id='emo-box'></div>
  </div>
</b:includable>

<b:includable id='threadedCommentForm' var='post'>
  <div class='emoBox'>
    <h2>Emoticon</h2>
    <div id='emo-box'></div>
  </div>
</b:includable>

<div class='emoBox'>
    <h2>Emoticon</h2>
    <div id='emo-box'></div>
  </div>
<b:include cond='data:view.isSingleItem and !data:view.isPreview' data='post' name='commentPicker'/>
  6. Jika semuanya sudah terpasang, klik simpan dan lihat hasilnya.

Itu dia tutorial cara memasang emoticon pada komentar Blogger menggunakan CSS dan JavaScript. Untuk hasil atau demo dari fitur emoticon di atas, kamu bisa cek pada widget emoticon berikut.

Untuk menggunakannya pada komentar, klik gambar atau emoticon kemudian tempel kode HTML saat berkomentar. Semoga bisa membantu dan bermanfaat.

Emoticon

Dukung NaminaBoky
Buy Me a Coffee Donasi via Buy Me a Coffee Trakteer Donasi via Trakteer Donasi via Saweria Donasi via Saweria Tentang Donasi ?

Artikel Terkait

0 Komentar