Hello, Bloggers! Welcome to Raghavendra Technic.
You might seen emoticons in telegram or whatsapp or other social platforms but you have the question about how you can add that emoticons to your blog at comments then here is the blogger tutorial that you are looking for.
Emoticons
I don't think I'd need a few more lines to define what emotion icon is, and probably everyone who has been online or using mobile devices know exactly what I'm talking about. But according to Wikipedia:
An emoticon is a metacommunicative pictorial representation of a facial expression which in the absence of body language and prosody serves to draw a receiver's attention to the tenor or temper of a sender's nominal verbal communication, changing and improving its interpretation.
Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.
/* Emoji Code by (T_MK) */
.emoBox h2{border-radius: 2px; padding: 15px 0; cursor: pointer; margin: 0; font-size: inherit; white-space: nowrap; border-bottom: 1px solid #222; overflow: hidden; text-overflow: ellipsis; line-height: 1.2em; color: #222; font-weight: 600;}.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='%23222'/%3E%3C/svg%3E") center/24px no-repeat;transition:transform .3s ease-in-out}.emoBox h2.active::after{transform:rotate(90deg)}#emo-box{justify-content: center;display:flex;flex-wrap:wrap;align-items:center;max-height:0;overflow:hidden;transition:max-height .2s ease-out;padding:0;margin-top: 20px;overflow:hidden}#emo-box .item{text-align: center;flex: 1 0 auto; cursor: pointer; margin: 5px; width: 60px; padding: 5px; box-shadow: 0 5px 35px rgb(0 0 0 / 7%); height: 60px;}#emo-box .item span{display:block}#emo-box .item img{width: 100%; height: 100%; background-size: cover;}
.emoBox{padding: 0 24px 24px;background: #fffdfc;margin: 20px 0; position: relative; box-shadow: 0 5px 35px rgb(0 0 0 / 7%);}@media (max-width: 480px){.emoBox{padding: 12px!important;}.emoBox h2{padding:15px 12px!important;}}Step 6: Now search the code id='threadedComments-form' and paste the following Codes just below to it.
Up one codes not working to find, Now search the down codes 1,2,3,4.
<section id='comments'> --add here-- </section>
<div class='comment-form'> --add here-- </div>
<b:includable id='comment_picker' var='post'> --add here-- </b:includable>
<b:includable id='commentFormIframeSrc' var='post'> --add here-- </b:includable>
<div class='emoBox'><h2>Emoticon</h2><div id='emo-box'/></div>
Step 7: Now search the code </body> and paste the following Codes just above to it.
<script>/*<![CDATA[*/
//code by (T_MK)
(function(){
const _EmoList = {
aghh: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBjP484mVB33Ye1F-UYoOy06ZczO7mK4RUl1xJ9UjzGl7nNxd9fA618Q7xjzZWnJG-PCpU4j3lJ-Uzzm9eUlcDmUum8M_6iCDVRI6WcIvf0DreaJRunalWYI9wgBdI-TI25YZGH6dRx_HIiM0RONhep57Spxzy2s4-WHa08ewSC6eXZiFu8Y8aGfTm/s1600/UtyaDuck-128px-4.gif',
haha: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXXkDwXbkaBPVKiRKLXxzZipuPYjmt0u7OrkGwHSLzYuB8tPqsaLaPno9TW2V53lKCg-CHFO3WdPXgc5qBrAC8jxNFoZDjo3a48LoxHuCECHaQNIHOcGD1xK2v7OgYNDkE0q-iGBEfwHveT8MRwCZqqozAge6CQa3flPnRciKnIyGRCRFRCJp-7utR/s1600/UtyaDuck-128px-1.gif',
flying_kiss: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGempJpfr-W-S4hUl3ez9GVw4N-1l9i90k_TTVBH1UiFpnj6NuKeYEeW8uVE2d7mntigWN2zrt9GptkZHp6FoyTyWQr6LND263dWDfLi1JhvvVw85ll5x8IftOdP4z1WCr1tvGdy9BXWKR32XaBECsS087kyxezDGObOrv2kmh0bVhJz8AmvUPrBlD/s1600/UtyaDuck-128px-2.gif',
thumsup: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinGyj0I6Jg-8MB0JJy4v9rzn7SWSZJx2rwxDcLLa3PkJzAZWDxd4-KXh66MH6XBa47qnbhXFSURc36UgdLs5XKwyfsHiDZyIbBl6FtqbL7Uzg8OgSIyV52pXdnwipxbiMdft2GLE6r9v0llCMuktLo2F-3zYl9WEJT9nkkEWW1nnNKrKlipyCZQs2Y/s1600/UtyaDuck-128px-3.gif',
money: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwU00IM2EHeCZSaqk55TrxZxeuOMMwBbgAClIrMTPhejG7PbUo0uMFNR4oMJMsjzVWXoZygW4ATk1p6z19-KPAOdKFRvZ5xvzUR_fW49Luy9RrIpuelaQHUdY5lKzVPKjLuE5fTwUTkDVMNxPKq_LNXwv5m1_7oqgsfFmIMfgdzb2HIpJB9wizblE5/s1600/UtyaDuck-128px-18.gif',
unaccept: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8xxBaDDmD_9FeVGfb0eRtOvlXk7OSiuh1_Aye3Br64m0Fa0enxApmV6qUNiT_LMfLfZc_MKgkRcn7-2bRm8evRMwyUvR82rteaEgPtYp_YPSRL3p-gAOHixFXGBqjV44MKShP21mtKWnLfVi-6sI9W_DATkq-SJCHs8yk27pc5MRAz026FONrmr0U/s1600/UtyaDuck-128px-23.gif',
love: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3FRNgJ6U9q3cKVdDSLgBtjVjJtXPdX9CBN5DK-xWhTRdNS8qZCrtrbOvrPQIXvcrtd7b13DPksbVuI1ckA8gBD1jLs4RV1XwKQK1vbkNxeymJ3VumTKVwAZPnfxFh-30w5ZWl4kuVKGuz83DZykmm2x2BHe6LRA_tNuNnhHOu1qUa9GJpcS1q1mNr/s1600/UtyaDuck-128px-24.gif',
thinking: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOGYgCc7VuGSnEnBkWObdBJRDDKObBo0Mdr17HzrjDrf7gO_ppqsIhmR83z5FtCy6dWVCiiJxAINVhAe7bQbW4iPUeP9_ws4M5NTyToRF1O2kiKcAPKv6KC8BMtfx4fzNLynyUh7pYj3zAUE-luVL7sJV4-MHvURes4SURyAPm6ac2PBGgq9g29Snd/s1600/UtyaDuck-128px-17.gif',
hi: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV0__QWfiukNXKoecw8fDLaXlfaqwTNanSFeMuubL4ne9e1cT3jxUeAkacQ7Av4rDhSRSxvZ9UfWdukfLYUd5BHe6IiMuIj4mITEXWshjKRFvfGBrS4idxeQdXl_cD4ewxqZcZBWFXB5wm9JWVz8ZUY1fa9BDirZe1qSSSa_Au6IhOZ7Bjcec-hpIL/s1600/UtyaDuck-128px-5.gif',
crying: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOAmz_Ymq79NTT-ZGVtodShtmxHMAetA4YI95foxZKi_gTlMcBsYvzgrI2k_GXedSFs2EN9ALZ2lrUSXHQogzIotU6yPvTSdLfYXDuJjTeExFoVuY1tfmPpcPx8fh2K8iyuhmrjgnyHE4aOaBFLu1dlhXFGLUd3xkGATzvyVkKrKtWcXkDOVFo12uz/s1600/UtyaDuck-128px-6.gif',
confuse: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiaOYtJtrxFYR9IPvRY417_lQrKqJtYoAeQSEBHLcqlm-89ohp6gbdYcJf0whnzjsl4y_Ovr2k69d-yk-WwltgWFbFo5Gzwrc1fVaCQN1aVO6Jkcb6kZRqWlVy2v-jwh-2hA01bfdjw1MMifXLYyb8rC_4y00RDBYrqxbK6RzwIHIw6-ed2CjpAkHg/s1600/UtyaDuck-128px-7.gif',
angry: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0xIsuj4_dBVqxZ0MDbtWeq99fSOqWwGelhp2jlZaO3-16fIMWY66O-E-Bjc_izJCqYwlkmKzEmvqMSjbDW_4hsYcpkJDtlZLl9eRq7qv928PzDsxzu68hnuGPhTSRVCyO_ZPRuRo820dhKtOrZsi14ft716MBb4ztllpBV_rfTgLVEaWhWgY1W4Ms/s1600/UtyaDuck-128px-8.gif',
wink: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM4BHE9MbFn9Noi0DBPDSdi5EaEaPx42uGH1xUJk-iHCUxBHAYeOa82Ttnu4pjh-74t2YeoCRINWslhh9O88ZoPipnCwz7BTOX8Dzt0Gul72FtgyUaFxLeyYJz6af7HMbvMCgWxi34pn5FqUZwC_X0s4FlC_Wem_UEf27_HpBeNNwGhBZr1F5FZHmi/s1600/UtyaDuck-128px-10.gif',
whatever: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDaU2bdZ36MD_oICcU8uXqR4IDRa5iXBEQhw4h38iR9Ip1hy6b7gro0LyFXg06zIAvl-vwaTSNs-EyiyQjaaiLE4VEjEvFGj3WAj09Bjyn30IZjl3KXvVIV28_woknvvhv24joV3PD2co31px9fypR3Pt5VRhcZBtEB_XG5EY4OOHz9AcSMdxz1foz/s1600/UtyaDuck-128px-11.gif',
kill: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhi8_rGWhI-VsxVyaYLcAgJ0v_yTSx8I3vRHtA3CArKB5QiUOf20N0FTLU9vycUQ1lJlzayRxov0QDZLpeb9wmBdDe3YqNAXMoTfo45GZoUHMbRPSMHWVk1frhRi2pQx9FAh2vxTNYeqoH0uqhdNku1iF1mYGvllOyd9S8XkNJmBiYWK6V_8WjG0r_/s1600/UtyaDuck-128px-16.gif',
cat_aghh: 'https://3.bp.blogspot.com/-9Llq4uNUv0Y/WCn3igVNZkI/AAAAAAAAAyQ/QQkOK6cpdL0DobbtvRzqXQfn0jgoplndgCLcB/s1600/aghh.gif',
cat_excited: 'https://3.bp.blogspot.com/-w5o0yrObD64/WCn3iiHL3eI/AAAAAAAAAyU/TRJGNPklCLAvAKoIm7k9pWdUtnPCmpqPQCLcB/s1600/cling.gif',
cat_scare: 'https://3.bp.blogspot.com/-1RFEB_pw7Eg/WCn3i0M1OkI/AAAAAAAAAyY/Z8gQVN82vcU0gEG6tBZ72DMER78NfhnXwCLcB/s1600/haha.gif',
cat_thinking: 'https://3.bp.blogspot.com/-XFqRHiJg6Mg/WCn3j0gk5JI/AAAAAAAAAyo/iuVHyGL5Ft8Rj-wFlpmO816WrcDLNSZ9QCLcB/s1600/lho.gif',
cat_crying: 'https://3.bp.blogspot.com/-VAJTyZIExRA/WCn3knNB7oI/AAAAAAAAAy0/1Y5lGbYp-awJM0dfnSsxWUajiPSVvKh9QCLcB/s1600/nagis.gif',
cat_lol : 'https://3.bp.blogspot.com/-3BY_mQS_b40/WCn3kB2hyFI/AAAAAAAAAyw/wrUusedtrYIn0sdQGH6cNUTjYQEY0gzJgCLcB/s1600/lol.gif',
lolx: 'https://3.bp.blogspot.com/-k3-mwskFE88/WCn7VUC90CI/AAAAAAAAAzU/HKTyeQ4iN3EJ0XRzzWXWSBFheBOmzlIoQCLcB/s1600/troll.gif',
rotate: 'https://4.bp.blogspot.com/-7VJqZqps6pw/WCn_FPUGVYI/AAAAAAAAA0Y/Zd1A_qFn1P8uhC_pHSWWBux_j6fqn9x1wCLcB/s1600/muter.gif',
},a = document,_emoBox = a.getElementById('emo-box'),_emoTitle = a.querySelector('.emoBox h2'),_at_emo = 'Copied',_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=_at_emo,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>Step 8: Now click on Save by clicking this icon
Step 9: That's done!
Conclusion
In this article I have made a tutorial on How to Add Emoticon Feature in Blogger. I hope you have liked it and Please do share with your friends and follow our blog for more
If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Raghavendra Technic | All Rights Reserved
© Copyright:
raghavendratechnic.blogspot.com