How To Add Emoticon/Smileys In Blogger Comment System

Make commenting fun for your readers by adding smileys for their to use in your blog. Although Blogger doesn't support using smileys in comments, we are going to share some easy and safe steps to adding it in blogs.
 The emoticons are called the Kolobok in Blogger/blogspot.

Follow the steps below to spice up comments for your blog readers

Also Read:
How To Fix Comment Box Not Showing in Mobile | Blogger 
How To Add Floating Share Buttons To Blogger

Adding Lolobok Emoticons/Smileys In Blogger Comments

Step 1: Enter blogger.com dashboard and select blog
Step 2: Locate template > Edit Html
Step 3: Click any point in the template and hit the ctrl+F keys for window, Cmd+F for mac to open a search .
Step 4: Search for the tag

</body>

Step 5: For this next  step, there are two code below select the right one for your coment box and add just above the closing body tag.

a) If your comment has no reply button, means you are using the previous commenting system, add this code below

<!--kolobok-smileys-->
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("smileys");
theText = bodyText.innerHTML;
theText = theText.replace(/:\)\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuui6J289T6dQlgEr0rsHVI4Fpvf3uwTbm8R4Kgruup5Y1Bn6T8uLcMMgZfkdvDG0sLoiG_4BF6wkcIX0R5sXUhBqGEUayGXwzboXnpxuoT-LBUjjG5ucHV0H038K7KVxHqHQvHg1A1fA/s1600/taunt.gif'/>");
theText = theText.replace(/=d&gt;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJj2AVq_6pYaKDuKTxqZi9oadqSnMKEkqOc3bZy2WEb5ZaJ5zsuJGIJkvvqLVBMAg4Q6elqrgw6vep0znox4SlI4HlhTMIlM1tX1O9NxwcxLt8K4X2zzg_IgQ94XEeyZDXufPcKYDepVA/s1600/suicide.gif'/>");
theText = theText.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpli6C98WOg6V_fuphtHU72sjwvmjNane9t8rtDKo2ZEaPrSeQtfhjlu8hxtH8FYYRc6mGJhJwQY_nnctvUFN30_Prda5cm5KpDsRF41BbUaTvxc2lN4j1gfjJ-EWZJIGNI3dKvBSX7s/s1600/biggrin.gif'/>");
theText = theText.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP3nBidTnFmcIttEQ5-Mmz-yvJ_BS6___a5yJ6BAQhGn0VsBqnBTPGo2q0Vb3KfxVK_YysW6Bm0Ew68ur-bMms2HcwoFccBZzqIXOONoIHmNxBd6bDCGMxIeUgvfcc2xZP4Vn9LxwPliI/s1600/tongue.gif'/>");
theText = theText.replace(/:\(\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2plja5mh_eNq_nXRexMsAnLq58NA1ZGExaUcD6jGADbFjRyEAAoedUAl41clVXzGbJ8JMLlVYwdcJNfYhfQ8bUyCpmwPeWsraJyewsq5RtRG9Sy3EXBAlj3rvv5tyO8D6NYS6juK6qx4/s1600/cry2.gif'/>");
theText = theText.replace(/:\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXEW9AptW6EGJtoE_jhyphenhyphenq2w_U-28RaAgxEAGK2zA_Kv-Y7Rft-IleQi6WIPulsrGru_hkiVlzhkb4i5aQJHqpel7qdurxttJoBY56vIk_5e63RNxPPRwHQtiqzyvh3lMNuFiwy4RSnzqY/s1600/smile3.gif'/>");
theText = theText.replace(/:\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-g0lsgil6QF-R0G1tjzfOwUShZB_QiYp1dPhEowT2ieH1AVZwQhVHSg7BCPtShCy4zRZY05RgrPPMk_WV3bkns4m_8Gtsu81UYj580qSI7n3IilZEoOk2BK1ccUqLMJEZUcJPq_numhQ/s1600/sad.gif'/>");
theText = theText.replace(/:-\?/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5tcB44gyXz69Ly9jzAD6K7JE9LZBhaqO_pPHEilBNTW68bmlqP21DHIbJaax4gbQULsGfihh8-Z4OXg1jG_zhSIMdP2kVHzDZpkTppAgbUDPP3KcY88RdBA1TrAStCPy-dwoutKr2SME/s1600/think.gif'/>");
theText = theText.replace(/d\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLjpH7f77Mjr_TNtzL168nQmX6ax1TtvuyWFbRLmVGEEj8Np9oRjPmzBRP484RfpyJj2kjfyIJiHjA5RGCENlcro40VUFKLIuVwR4ri2pledsZ_OlJjbtm2HEJq7iX1WqV7tpcUGKxHX4/s1600/doh.gif'/>");
theText = theText.replace(/:-o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU2tRnWePAFOs-buZMp3MUaS7-spYAv1KSEBKQQNS5Hmj94b29UqJAKo0Lpsrm2sxz8vYdtbtiSHUZAM7AU7GpKECsatcpVR-cJJNEHI7QBTDNPwhm_yd5tMTZTJLf6cXl1E-CCVY75q8/s1600/shock.gif'/>");
theText = theText.replace(/:-f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDWRi1uSXArFEXfOk_hK1ai5gly0YevnxmlTxr1GCxtycyIZOgaGJSTdwvAkUr7zXts3Kk1L1Pha44060Ul4I9-HrMc8WcyHE-r37LtNooNkiJkYCULuaUgQYXaFYVGt92upKIpS0N4cE/s1600/flowers1.gif'/>");
theText = theText.replace(/:-ss/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwNlBw5BG-UPPIrUhP5fzmbzr-inss4AvVCBcXGE8SZHzuQGQBrpCfvPC3iNRAgtMsW0G38ToSDxdNcT3K8sfKAsVb_veamlNjs-GwTpnuMeGRsHPtfkOB00baV25b3oH3dgmcHWk9Qxk/s1600/unsure.gif'/>");
theText = theText.replace(/b-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYIbJn11J5XijTnWpfhJE8GWitZh-v2HbiNaB5WIJY8UdvhpBLRlvcus7HQq-837jQZdMTtM6D3HRb2DXRrgwc86fZtpbAiDDLICpa9JjDT9CEBCj0Ed8ZkC2Ql6iBrLvIY_6Inhm8rwg/s1600/threaten.gif'/>");
theText = theText.replace(/h-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjECpO1hypm35Iog2V5RJ_fpvo0FsENRyy4xxGQIIL1J1p1AEkgulCYfLZEvXdEyblpD2Cr98n-X-btETUWeRbGXYYKLsCKhkZvIlJ5xHlkanduVG3ienMB6wKCsgtNDbrU19AJjAcGpjo/s1600/help.gif'/>");
theText = theText.replace(/g-\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuq1yxtBTv4ISvDwuV0ygAu-LGc_xY_DOKtm31ixQKZi6TpWPi92ZiZjWIPDfK4tUDD2IZ952MZk4Fbw7HkS5H_xHnB1D_vGWLVerb8Q1KOVpd6PTjh46mX4WiBn5IymP2DOTjJ3I25uM/s1600/good.gif'/>");
theText = theText.replace(/5-\p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJfjaTTcvFlM-KAkfb77ZtQNV4qldBvmaf5hKwqs9a1LAhFN4SvmvHtfrVutM-xVGQiy_8dpMgmRT9CPAqmg-q_8j8UfqGHcUwBQr1NwW5w-Wde_m05G9ajNuYW_EeEt9N_WKJzVexfk/s1600/beee.gif'/>");
theText = theText.replace(/y-\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDd6THQo5pZhdOhbEpb_Uk9WnP7sPup38if-Y0M-14RkoyB3yhZCFZg3NAZhYLiN8-FUWO_BGHCQ0wKMljEEkzYlex9imu8L1QjQ1bnU5S0ZuHoo6AcvfbTalD3nFx_k2gJ8mqJYXpTKs/s1600/yahoo.gif'/>");
theText = theText.replace(/c-\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgD_BxVTRFpPUBjGBlBcXg9nPR2Vw2hJl6olkjYvQ4DdPKufoyGEFX50okSY_69LUFR0VhHH4h8ohyphenhyphenOE9EdK0B-CQupSJKk2phvfL_vuuUNp1sheWM73K7MsCM5fk7_kuuIQnFGHfgHYY/s1600/crazy.gif'/>");
theText = theText.replace(/s-\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX7vGmmxkgOq175Dwynyrn9jPSwXQ7gewyYQ78PJZi-BJUmjqVeq3gRa8NvgdLYG1LJcsg1UGIRz3fKElWF3_KW5ZiAjwYuN_iq3EEwVgsbvsiZzeTGxnnn-XlIru-S8piFHkbZQnwV-E/s1600/spiteful.gif'/>");
theText = theText.replace(/d-\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5fPft98C_mQAZYy14Wm9lVne-ZZhXWQuqQzq_7W4tCrUY4ITLhmFmr5gfcBxREsEECGfCHsywTBlzPoZrPEFI-j_XsvcIp5adMJxwA3DHF7qjc2fEGWoLLD9i6W5INzmfb5PH-_gu1A/s1600/drinks.gif'/>");
theText = theText.replace(/w-\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYAaOu8NMO9dA3LsZcZDJ5Spv15y_Gj6R4SPchaCI0r9-yNq50oUaw_4LqpGopnSXeQ4s23TlUf53oLfBsTqPcBpy6IDph_ZsQPxf8PoMDH2bWbrK8Smox2LvUUwhQs0kjsWNxMSsErg0/s1600/cheer.gif'/>");
theText = theText.replace(/:-\h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkdh6UVLEVFkw7UlTDaQrD0D92HHUJIkxsGlg4imPMmWAMoGcyn8jFUATn8iLiSXeZzjEK4ncmtsOCas-QUteo9Lry1mbscelW0cogsPbMGmBL1jtmGvhYneHAa7SzQdbucchnM73swK8/s1600/hi+2.gif'/>");
theText = theText.replace(/:X/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpi_3fdo6rwSF7mShVlDpsL8APMkW2nVCVYbHbDVmgQrU6OoGxcbJsM-JJ8kq5KLvrlomrqn0onW9kyebgO3lpkRsLqMXqT5JtMtdxMv0LJSsRim5wCxdgca1uVFMQ3dYg5j2IYs_tmk/s1600/give_heart.gif'/>");
theText = theText.replace(/:\-\*/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkCU29KAKZzo5opmNVVIw3-2KZ-izryqIA0ZdoAgt_d3G6CfLrKeO3lZsLuGw2dxNee3pk7wetZ1eXBBUNLiQdwOjoBSIjDZrM_A4MMcMqNwsx-ThZv30dRirFfRnPK38IYPEUB-HlB8Y/s1600/air_kiss.gif'/>");
theText = theText.replace(/=\)\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm1O5gE7pXDug4TXTNEoZh2p76X7sxLycXCq48VoyPS06uXQQA_TRpd4In2GCqdKOyCrRN5ql08siUxqXoppHTNxWXlhfCOFT87QdcppldUmFy-abPgJuPus_8x3aatyiv5FlC8mdT0AY/s1600/rofl.gif'/>");
bodyText.innerHTML = theText;
}
replaceText();
//]]>
</script>
<!--kolobok-smileys-->

b) If you have a threaded Commenting system that has the reply function, use the code below

<script type='text/javascript'>
//<![CDATA[
a=document.getElementById('comment-holder');if(a){b=a.getElementsByTagName("p");for(i=0;i<b.length;i++){if(b.item(i).getAttribute('CLASS')=='comment-content'){_str=b.item(i).innerHTML.replace(/:\)\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuui6J289T6dQlgEr0rsHVI4Fpvf3uwTbm8R4Kgruup5Y1Bn6T8uLcMMgZfkdvDG0sLoiG_4BF6wkcIX0R5sXUhBqGEUayGXwzboXnpxuoT-LBUjjG5ucHV0H038K7KVxHqHQvHg1A1fA/s1600/taunt.gif' alt='' class='smiley'/>");_str=_str.replace(/=d&gt;/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJj2AVq_6pYaKDuKTxqZi9oadqSnMKEkqOc3bZy2WEb5ZaJ5zsuJGIJkvvqLVBMAg4Q6elqrgw6vep0znox4SlI4HlhTMIlM1tX1O9NxwcxLt8K4X2zzg_IgQ94XEeyZDXufPcKYDepVA/s1600/suicide.gif' alt='' class='smiley'/>");_str=_str.replace(/:d/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpli6C98WOg6V_fuphtHU72sjwvmjNane9t8rtDKo2ZEaPrSeQtfhjlu8hxtH8FYYRc6mGJhJwQY_nnctvUFN30_Prda5cm5KpDsRF41BbUaTvxc2lN4j1gfjJ-EWZJIGNI3dKvBSX7s/s1600/biggrin.gif' alt='' class='smiley'/>");_str=_str.replace(/:p/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP3nBidTnFmcIttEQ5-Mmz-yvJ_BS6___a5yJ6BAQhGn0VsBqnBTPGo2q0Vb3KfxVK_YysW6Bm0Ew68ur-bMms2HcwoFccBZzqIXOONoIHmNxBd6bDCGMxIeUgvfcc2xZP4Vn9LxwPliI/s1600/tongue.gif' alt='' class='smiley'/>");_str=_str.replace(/:\(\(/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2plja5mh_eNq_nXRexMsAnLq58NA1ZGExaUcD6jGADbFjRyEAAoedUAl41clVXzGbJ8JMLlVYwdcJNfYhfQ8bUyCpmwPeWsraJyewsq5RtRG9Sy3EXBAlj3rvv5tyO8D6NYS6juK6qx4/s1600/cry2.gif' alt='' class='smiley'/>");_str=_str.replace(/:\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXEW9AptW6EGJtoE_jhyphenhyphenq2w_U-28RaAgxEAGK2zA_Kv-Y7Rft-IleQi6WIPulsrGru_hkiVlzhkb4i5aQJHqpel7qdurxttJoBY56vIk_5e63RNxPPRwHQtiqzyvh3lMNuFiwy4RSnzqY/s1600/smile3.gif' alt='' class='smiley'/>");_str=_str.replace(/:\(/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-g0lsgil6QF-R0G1tjzfOwUShZB_QiYp1dPhEowT2ieH1AVZwQhVHSg7BCPtShCy4zRZY05RgrPPMk_WV3bkns4m_8Gtsu81UYj580qSI7n3IilZEoOk2BK1ccUqLMJEZUcJPq_numhQ/s1600/sad.gif' alt='' class='smiley'/>");_str=_str.replace(/:-\?/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5tcB44gyXz69Ly9jzAD6K7JE9LZBhaqO_pPHEilBNTW68bmlqP21DHIbJaax4gbQULsGfihh8-Z4OXg1jG_zhSIMdP2kVHzDZpkTppAgbUDPP3KcY88RdBA1TrAStCPy-dwoutKr2SME/s1600/think.gif' alt='' class='smiley'/>");_str=_str.replace(/d\(/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLjpH7f77Mjr_TNtzL168nQmX6ax1TtvuyWFbRLmVGEEj8Np9oRjPmzBRP484RfpyJj2kjfyIJiHjA5RGCENlcro40VUFKLIuVwR4ri2pledsZ_OlJjbtm2HEJq7iX1WqV7tpcUGKxHX4/s1600/doh.gif' alt='' class='smiley'/>");_str=_str.replace(/:-o/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU2tRnWePAFOs-buZMp3MUaS7-spYAv1KSEBKQQNS5Hmj94b29UqJAKo0Lpsrm2sxz8vYdtbtiSHUZAM7AU7GpKECsatcpVR-cJJNEHI7QBTDNPwhm_yd5tMTZTJLf6cXl1E-CCVY75q8/s1600/shock.gif' alt='' class='smiley'/>");_str=_str.replace(/:-f/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDWRi1uSXArFEXfOk_hK1ai5gly0YevnxmlTxr1GCxtycyIZOgaGJSTdwvAkUr7zXts3Kk1L1Pha44060Ul4I9-HrMc8WcyHE-r37LtNooNkiJkYCULuaUgQYXaFYVGt92upKIpS0N4cE/s1600/flowers1.gif' alt='' class='smiley'/>");_str=_str.replace(/:-ss/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwNlBw5BG-UPPIrUhP5fzmbzr-inss4AvVCBcXGE8SZHzuQGQBrpCfvPC3iNRAgtMsW0G38ToSDxdNcT3K8sfKAsVb_veamlNjs-GwTpnuMeGRsHPtfkOB00baV25b3oH3dgmcHWk9Qxk/s1600/unsure.gif' alt='' class='smiley'/>");_str=_str.replace(/b-\(/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYIbJn11J5XijTnWpfhJE8GWitZh-v2HbiNaB5WIJY8UdvhpBLRlvcus7HQq-837jQZdMTtM6D3HRb2DXRrgwc86fZtpbAiDDLICpa9JjDT9CEBCj0Ed8ZkC2Ql6iBrLvIY_6Inhm8rwg/s1600/threaten.gif' alt='' class='smiley'/>");_str=_str.replace(/h-\(/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjECpO1hypm35Iog2V5RJ_fpvo0FsENRyy4xxGQIIL1J1p1AEkgulCYfLZEvXdEyblpD2Cr98n-X-btETUWeRbGXYYKLsCKhkZvIlJ5xHlkanduVG3ienMB6wKCsgtNDbrU19AJjAcGpjo/s1600/help.gif' alt='' class='smiley'/>");_str=_str.replace(/g-\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuq1yxtBTv4ISvDwuV0ygAu-LGc_xY_DOKtm31ixQKZi6TpWPi92ZiZjWIPDfK4tUDD2IZ952MZk4Fbw7HkS5H_xHnB1D_vGWLVerb8Q1KOVpd6PTjh46mX4WiBn5IymP2DOTjJ3I25uM/s1600/good.gif' alt='' class='smiley'/>");_str=_str.replace(/5-\p/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJfjaTTcvFlM-KAkfb77ZtQNV4qldBvmaf5hKwqs9a1LAhFN4SvmvHtfrVutM-xVGQiy_8dpMgmRT9CPAqmg-q_8j8UfqGHcUwBQr1NwW5w-Wde_m05G9ajNuYW_EeEt9N_WKJzVexfk/s1600/beee.gif' alt='' class='smiley'/>");_str=_str.replace(/y-\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDd6THQo5pZhdOhbEpb_Uk9WnP7sPup38if-Y0M-14RkoyB3yhZCFZg3NAZhYLiN8-FUWO_BGHCQ0wKMljEEkzYlex9imu8L1QjQ1bnU5S0ZuHoo6AcvfbTalD3nFx_k2gJ8mqJYXpTKs/s1600/yahoo.gif' alt='' class='smiley'/>");_str=_str.replace(/c-\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgD_BxVTRFpPUBjGBlBcXg9nPR2Vw2hJl6olkjYvQ4DdPKufoyGEFX50okSY_69LUFR0VhHH4h8ohyphenhyphenOE9EdK0B-CQupSJKk2phvfL_vuuUNp1sheWM73K7MsCM5fk7_kuuIQnFGHfgHYY/s1600/crazy.gif' alt='' class='smiley'/>");_str=_str.replace(/s-\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX7vGmmxkgOq175Dwynyrn9jPSwXQ7gewyYQ78PJZi-BJUmjqVeq3gRa8NvgdLYG1LJcsg1UGIRz3fKElWF3_KW5ZiAjwYuN_iq3EEwVgsbvsiZzeTGxnnn-XlIru-S8piFHkbZQnwV-E/s1600/spiteful.gif' alt='' class='smiley'/>");_str=_str.replace(/d-\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5fPft98C_mQAZYy14Wm9lVne-ZZhXWQuqQzq_7W4tCrUY4ITLhmFmr5gfcBxREsEECGfCHsywTBlzPoZrPEFI-j_XsvcIp5adMJxwA3DHF7qjc2fEGWoLLD9i6W5INzmfb5PH-_gu1A/s1600/drinks.gif' alt='' class='smiley'/>");_str=_str.replace(/w-\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYAaOu8NMO9dA3LsZcZDJ5Spv15y_Gj6R4SPchaCI0r9-yNq50oUaw_4LqpGopnSXeQ4s23TlUf53oLfBsTqPcBpy6IDph_ZsQPxf8PoMDH2bWbrK8Smox2LvUUwhQs0kjsWNxMSsErg0/s1600/cheer.gif' alt='' class='smiley'/>");_str=_str.replace(/:-\h/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkdh6UVLEVFkw7UlTDaQrD0D92HHUJIkxsGlg4imPMmWAMoGcyn8jFUATn8iLiSXeZzjEK4ncmtsOCas-QUteo9Lry1mbscelW0cogsPbMGmBL1jtmGvhYneHAa7SzQdbucchnM73swK8/s1600/hi+2.gif' alt='' class='smiley'/>");_str=_str.replace(/:X/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpi_3fdo6rwSF7mShVlDpsL8APMkW2nVCVYbHbDVmgQrU6OoGxcbJsM-JJ8kq5KLvrlomrqn0onW9kyebgO3lpkRsLqMXqT5JtMtdxMv0LJSsRim5wCxdgca1uVFMQ3dYg5j2IYs_tmk/s1600/give_heart.gif' alt='' class='smiley'/>");_str=_str.replace(/:\-\*/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkCU29KAKZzo5opmNVVIw3-2KZ-izryqIA0ZdoAgt_d3G6CfLrKeO3lZsLuGw2dxNee3pk7wetZ1eXBBUNLiQdwOjoBSIjDZrM_A4MMcMqNwsx-ThZv30dRirFfRnPK38IYPEUB-HlB8Y/s1600/air_kiss.gif' alt='' class='smiley'/>");_str=_str.replace(/=\)\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm1O5gE7pXDug4TXTNEoZh2p76X7sxLycXCq48VoyPS06uXQQA_TRpd4In2GCqdKOyCrRN5ql08siUxqXoppHTNxWXlhfCOFT87QdcppldUmFy-abPgJuPus_8x3aatyiv5FlC8mdT0AY/s1600/rofl.gif' alt='' class='smiley'/>");b.item(i).innerHTML=_str;}}}
//]]>
</script>

If your comment is threaded Ignore step 6 to 9
Step 6: Find the snippet code below

<b:loop values='data:post.comments' var='comment'>

Step 7: Paste the following line just above the snippet

<div id='smileys'>

Step 8: Find </b:loop> tag and look carefully, it should be located below the code from step 6

</b:loop>

Step 9: Paste the div below after it.

</div>

Step 10: Next, find this code
a) If you are using Previous Commenting System.

<data:blogTeamBlogMessage/> 

You might find this up to four(4) times, stop at the second one.

b)If you are using threaded commenting system search for the line below stop at the second or the fourth occurrence.

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Step 11: Add the code below just directly after the line

<b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">Hide Emoticons</a>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">Show Emoticons</a>';
}
//]]>
</script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXEW9AptW6EGJtoE_jhyphenhyphenq2w_U-28RaAgxEAGK2zA_Kv-Y7Rft-IleQi6WIPulsrGru_hkiVlzhkb4i5aQJHqpel7qdurxttJoBY56vIk_5e63RNxPPRwHQtiqzyvh3lMNuFiwy4RSnzqY/s1600/smile3.gif'/><div class="emos">:)</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-g0lsgil6QF-R0G1tjzfOwUShZB_QiYp1dPhEowT2ieH1AVZwQhVHSg7BCPtShCy4zRZY05RgrPPMk_WV3bkns4m_8Gtsu81UYj580qSI7n3IilZEoOk2BK1ccUqLMJEZUcJPq_numhQ/s1600/sad.gif'/><div class="emos">:(</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuui6J289T6dQlgEr0rsHVI4Fpvf3uwTbm8R4Kgruup5Y1Bn6T8uLcMMgZfkdvDG0sLoiG_4BF6wkcIX0R5sXUhBqGEUayGXwzboXnpxuoT-LBUjjG5ucHV0H038K7KVxHqHQvHg1A1fA/s1600/taunt.gif'/><div class="emos">:))</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2plja5mh_eNq_nXRexMsAnLq58NA1ZGExaUcD6jGADbFjRyEAAoedUAl41clVXzGbJ8JMLlVYwdcJNfYhfQ8bUyCpmwPeWsraJyewsq5RtRG9Sy3EXBAlj3rvv5tyO8D6NYS6juK6qx4/s1600/cry2.gif'/><div class="emos">:((</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm1O5gE7pXDug4TXTNEoZh2p76X7sxLycXCq48VoyPS06uXQQA_TRpd4In2GCqdKOyCrRN5ql08siUxqXoppHTNxWXlhfCOFT87QdcppldUmFy-abPgJuPus_8x3aatyiv5FlC8mdT0AY/s1600/rofl.gif'/><div class="emos">=))</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJj2AVq_6pYaKDuKTxqZi9oadqSnMKEkqOc3bZy2WEb5ZaJ5zsuJGIJkvvqLVBMAg4Q6elqrgw6vep0znox4SlI4HlhTMIlM1tX1O9NxwcxLt8K4X2zzg_IgQ94XEeyZDXufPcKYDepVA/s1600/suicide.gif'/><div class="emos">=D&gt;</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpli6C98WOg6V_fuphtHU72sjwvmjNane9t8rtDKo2ZEaPrSeQtfhjlu8hxtH8FYYRc6mGJhJwQY_nnctvUFN30_Prda5cm5KpDsRF41BbUaTvxc2lN4j1gfjJ-EWZJIGNI3dKvBSX7s/s1600/biggrin.gif'/><div class="emos">:D</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP3nBidTnFmcIttEQ5-Mmz-yvJ_BS6___a5yJ6BAQhGn0VsBqnBTPGo2q0Vb3KfxVK_YysW6Bm0Ew68ur-bMms2HcwoFccBZzqIXOONoIHmNxBd6bDCGMxIeUgvfcc2xZP4Vn9LxwPliI/s1600/tongue.gif'/><div class="emos">:P</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU2tRnWePAFOs-buZMp3MUaS7-spYAv1KSEBKQQNS5Hmj94b29UqJAKo0Lpsrm2sxz8vYdtbtiSHUZAM7AU7GpKECsatcpVR-cJJNEHI7QBTDNPwhm_yd5tMTZTJLf6cXl1E-CCVY75q8/s1600/shock.gif'/><div class="emos">:-O</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5tcB44gyXz69Ly9jzAD6K7JE9LZBhaqO_pPHEilBNTW68bmlqP21DHIbJaax4gbQULsGfihh8-Z4OXg1jG_zhSIMdP2kVHzDZpkTppAgbUDPP3KcY88RdBA1TrAStCPy-dwoutKr2SME/s1600/think.gif'/><div class="emos">:-?</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwNlBw5BG-UPPIrUhP5fzmbzr-inss4AvVCBcXGE8SZHzuQGQBrpCfvPC3iNRAgtMsW0G38ToSDxdNcT3K8sfKAsVb_veamlNjs-GwTpnuMeGRsHPtfkOB00baV25b3oH3dgmcHWk9Qxk/s1600/unsure.gif'/><div class="emos">:-SS</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDWRi1uSXArFEXfOk_hK1ai5gly0YevnxmlTxr1GCxtycyIZOgaGJSTdwvAkUr7zXts3Kk1L1Pha44060Ul4I9-HrMc8WcyHE-r37LtNooNkiJkYCULuaUgQYXaFYVGt92upKIpS0N4cE/s1600/flowers1.gif'/><div class="emos">:-f</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLjpH7f77Mjr_TNtzL168nQmX6ax1TtvuyWFbRLmVGEEj8Np9oRjPmzBRP484RfpyJj2kjfyIJiHjA5RGCENlcro40VUFKLIuVwR4ri2pledsZ_OlJjbtm2HEJq7iX1WqV7tpcUGKxHX4/s1600/doh.gif'/><div class="emos">d(</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkCU29KAKZzo5opmNVVIw3-2KZ-izryqIA0ZdoAgt_d3G6CfLrKeO3lZsLuGw2dxNee3pk7wetZ1eXBBUNLiQdwOjoBSIjDZrM_A4MMcMqNwsx-ThZv30dRirFfRnPK38IYPEUB-HlB8Y/s1600/air_kiss.gif'/><div class="emos">:-*</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYIbJn11J5XijTnWpfhJE8GWitZh-v2HbiNaB5WIJY8UdvhpBLRlvcus7HQq-837jQZdMTtM6D3HRb2DXRrgwc86fZtpbAiDDLICpa9JjDT9CEBCj0Ed8ZkC2Ql6iBrLvIY_6Inhm8rwg/s1600/threaten.gif'/><div class="emos">b-(</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjECpO1hypm35Iog2V5RJ_fpvo0FsENRyy4xxGQIIL1J1p1AEkgulCYfLZEvXdEyblpD2Cr98n-X-btETUWeRbGXYYKLsCKhkZvIlJ5xHlkanduVG3ienMB6wKCsgtNDbrU19AJjAcGpjo/s1600/help.gif'/><div class="emos">h-(</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuq1yxtBTv4ISvDwuV0ygAu-LGc_xY_DOKtm31ixQKZi6TpWPi92ZiZjWIPDfK4tUDD2IZ952MZk4Fbw7HkS5H_xHnB1D_vGWLVerb8Q1KOVpd6PTjh46mX4WiBn5IymP2DOTjJ3I25uM/s1600/good.gif'/><div class="emos">g-)</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJfjaTTcvFlM-KAkfb77ZtQNV4qldBvmaf5hKwqs9a1LAhFN4SvmvHtfrVutM-xVGQiy_8dpMgmRT9CPAqmg-q_8j8UfqGHcUwBQr1NwW5w-Wde_m05G9ajNuYW_EeEt9N_WKJzVexfk/s1600/beee.gif'/><div class="emos">5-p</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDd6THQo5pZhdOhbEpb_Uk9WnP7sPup38if-Y0M-14RkoyB3yhZCFZg3NAZhYLiN8-FUWO_BGHCQ0wKMljEEkzYlex9imu8L1QjQ1bnU5S0ZuHoo6AcvfbTalD3nFx_k2gJ8mqJYXpTKs/s1600/yahoo.gif'/><div class="emos">y-)</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgD_BxVTRFpPUBjGBlBcXg9nPR2Vw2hJl6olkjYvQ4DdPKufoyGEFX50okSY_69LUFR0VhHH4h8ohyphenhyphenOE9EdK0B-CQupSJKk2phvfL_vuuUNp1sheWM73K7MsCM5fk7_kuuIQnFGHfgHYY/s1600/crazy.gif'/><div class="emos">c-)</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX7vGmmxkgOq175Dwynyrn9jPSwXQ7gewyYQ78PJZi-BJUmjqVeq3gRa8NvgdLYG1LJcsg1UGIRz3fKElWF3_KW5ZiAjwYuN_iq3EEwVgsbvsiZzeTGxnnn-XlIru-S8piFHkbZQnwV-E/s1600/spiteful.gif'/><div class="emos">s-)</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5fPft98C_mQAZYy14Wm9lVne-ZZhXWQuqQzq_7W4tCrUY4ITLhmFmr5gfcBxREsEECGfCHsywTBlzPoZrPEFI-j_XsvcIp5adMJxwA3DHF7qjc2fEGWoLLD9i6W5INzmfb5PH-_gu1A/s1600/drinks.gif'/><div class="emos">d-)</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYAaOu8NMO9dA3LsZcZDJ5Spv15y_Gj6R4SPchaCI0r9-yNq50oUaw_4LqpGopnSXeQ4s23TlUf53oLfBsTqPcBpy6IDph_ZsQPxf8PoMDH2bWbrK8Smox2LvUUwhQs0kjsWNxMSsErg0/s1600/cheer.gif'/><div class="emos">w-)</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkdh6UVLEVFkw7UlTDaQrD0D92HHUJIkxsGlg4imPMmWAMoGcyn8jFUATn8iLiSXeZzjEK4ncmtsOCas-QUteo9Lry1mbscelW0cogsPbMGmBL1jtmGvhYneHAa7SzQdbucchnM73swK8/s1600/hi+2.gif'/><div class="emos">:-h</div></div>
<div class="itemo"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpi_3fdo6rwSF7mShVlDpsL8APMkW2nVCVYbHbDVmgQrU6OoGxcbJsM-JJ8kq5KLvrlomrqn0onW9kyebgO3lpkRsLqMXqT5JtMtdxMv0LJSsRim5wCxdgca1uVFMQ3dYg5j2IYs_tmk/s1600/give_heart.gif'/><div class="emos">:X</div></div>
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'>Show Emoticons <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXEW9AptW6EGJtoE_jhyphenhyphenq2w_U-28RaAgxEAGK2zA_Kv-Y7Rft-IleQi6WIPulsrGru_hkiVlzhkb4i5aQJHqpel7qdurxttJoBY56vIk_5e63RNxPPRwHQtiqzyvh3lMNuFiwy4RSnzqY/s1600/smile3.gif'/></a></span>
</div></b:if>

Step 12: We are almost done, find

]]></b:skin>

Add the css code below above the ]]></b:skin> tag

.itemo{float:left;font-size:11px;height:30px;line-height:1.2;padding:10px 0;text-align:center;width:85px;}
span#smiley-toggle{clear:both;padding:15px 10px;float:left;font:bold 14px 'Oswald', sans-serif;}
span#smiley-toggle a{text-decoration:none;}
#smiley-toggle img{vertical-align:bottom;}
img.smiley{vertical-align:bottom;}

Step 13: Save your template, you are done adding an awesome emoticons in blogger comment system.
Flex am!

Read More

Responsive Navigation Menu For Blogger

If you have a responsive template wouldn't it be nice to spice it up with a responsive navigation menu, suitable for desktop, mobile, tablets, laptops, all kinds of devices.

Thanks to Crawlist.net for this awesome navigation menu.

Live Demo
Follow the steps below to add in blogger

Also Read: How To Add Auto Read More With Thumbnail In Blogger

Steps to add responsive navigation menu

==> Enter blogger.com dashboard and select blog.
==> Locate Template > Edit Html, We are to add Jquery to template, Ignore if it already exists in your template.
==> Locate  <head> tag in the template usually at line four.
==> If you can't find it, click anywhere in the template and hit ctrl+F buttons for window, Cmd+F for Mac to show a search box, input <head> in the box and hit "Enter" key

 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

==> copy and paste the jquery code above directly below the <head> tag.
==> Save your template and go to "Layout".
==> Click on "Add a Gadget". please add gadget where you want the Navigation menu to appear.
==> Select Html/Javascript in pop out menu.
==> Copy and Paste The code below in the Html Box

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>/*blogwox.blogspot.com CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  border-radius: 4px;
  border: 1px solid #2698e9;
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 1;
  background: #6bb9f0;
  background: -webkit-linear-gradient(bottom, #54aeee, #82c4f2);
  background: -ms-linear-gradient(bottom, #54aeee, #82c4f2);
  background: -moz-linear-gradient(bottom, #54aeee, #82c4f2);
  background: -o-linear-gradient(bottom, #54aeee, #82c4f2);
  background: linear-gradient(to top, #54aeee, #82c4f2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), inset 0 -2px 0px #46a7ec, inset 0 1px 0 #90cbf4;

}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 20px 25px 21px 25px;
  font-size: 15px;
  text-decoration: none;
  color: #fcfefb;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
#cssmenu > ul > li:first-child > a {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
#cssmenu.align-center > ul > li:first-child > a {
  border-radius: 0;
}
#cssmen.align-right > ul > li:first-child > a {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
  color: #444444;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  background: rgba(125, 125, 125, 0.04);
}
#cssmenu > ul > li:after {
  content: '';
  position: absolute;
  top: 18px;
  right: 0;
  display: block;
  height: 20px;
  width: 1px;
  opacity: .15;
  background: rgba(0, 0, 0, 0.7);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
}
#cssmenu.align-right > ul > li:after {
  right: auto;
  left: -1px;
}
#cssmenu > ul > li:before {
  content: '';
  position: absolute;
  top: 18px;
  right: -1px;
  display: block;
  height: 20px;
  width: 1px;
  opacity: .35;
  background: rgba(255, 255, 255, 0.8);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.01), #ffffff, rgba(255, 255, 255, 0.01));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
}
#cssmenu.align-right > ul > li:before {
  right: auto;
  left: 0px;
}
#cssmenu > ul > li:last-child:after,
#cssmenu > ul > li:last-child:before {
  display: none;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li > a {
  padding: 18px 25px;
}
#cssmenu.small-screen > ul > li:after,
#cssmenu.small-screen > ul > li:before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 18px 25px 19px 25px;
  cursor: pointer;
  font-size: 15px;
  text-decoration: none;
  color: #fcfefb;
}
#cssmenu.small-screen #menu-button.menu-opened {
  color: #444444;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 20px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #fcfefb;
  border-bottom: 2px solid #fcfefb;
  width: 18px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #444444;
  border-bottom: 2px solid #444444;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 25px;
  top: 30px;
  display: block;
  width: 18px;
  height: 2px;
  background: #fcfefb;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #444444;
}/*blogwox.blogspot.com CSS ends*/
</style>
 
<div id='cssmenu'>
<ul><!--blogwox.blogspot.com menu starts-->
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Tutorials</a></li>
   <li><a href="#">Customization</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
</ul><!--blogwox.blogspot.com menu ends-->
</div>
<script>
(function($) {
  $.fn.menumaker = function(options) {
   
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        breakpoint: 768,
        sticky: false
      }, options);
      return this.each(function() {
        cssmenu.find('li ul').parent().addClass('has-sub');
        if (settings.format != 'select') {
          cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
          $(this).find("#menu-button").on('click', function(){
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) {
              mainmenu.hide().removeClass('open');
            }
            else {
              mainmenu.show().addClass('open');
              if (settings.format === "dropdown") {
                mainmenu.find('ul').show();
              }
            }
          });
          multiTg = function() {
            cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
            cssmenu.find('.submenu-button').on('click', function() {
              $(this).toggleClass('submenu-opened');
              if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').hide();
              }
              else {
                $(this).siblings('ul').addClass('open').show();
              }
            });
          };
          if (settings.format === 'multitoggle') multiTg();
          else cssmenu.addClass('dropdown');
        }
        else if (settings.format === 'select')
        {
          cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
          var selectList = cssmenu.find('select');
          selectList.append('<option>' + settings.title + '</option>', {
                                                         "selected": "selected",
                                                         "value": ""});
          cssmenu.find('a').each(function() {
            var element = $(this), indentation = "";
            for (i = 1; i < element.parents('ul').length; i++)
            {
              indentation += '-';
            }
            selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
          });
          selectList.on('change', function() {
            window.location = $(this).find("option:selected").val();
          });
        }
        if (settings.sticky === true) cssmenu.css('position', 'fixed');
        resizeFix = function() {
          if ($(window).width() > settings.breakpoint) {
            cssmenu.find('ul').show();
            cssmenu.removeClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').hide();
            }
            else {
              cssmenu.find("#menu-button").removeClass("menu-opened");
            }
          }
          if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
            cssmenu.find('ul').hide().removeClass('open');
            cssmenu.addClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').show();
            }
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);
      });
  };
})(jQuery);
(function($){
$(document).ready(function(){
$(document).ready(function() {
  $("#cssmenu").menumaker({
    title: "Menu",
    format: "dropdown"
  });
});
});
})(jQuery);
</script>

==> Save layout. your are done.

If the navigation menu don't work properly, make sure the code below is in your template.

<meta name="viewport" content="width=device-width, initial-scale=1">

Usually around the <head> tag. Enjoy

Read More

How To Add Auto Read More With Thumbnail In Blogger

Hey Guys, lets learn how to add auto read more with thumbnail in blog posts. Talking about professionalism, the auto read more gives your blog the look, gets your blog really organized and more beautiful.
What this does is to help you shorten your blog posts automatically and add "read more" link for your reader to click on and see the full content.

The steps requires you to go to your blog template, so save a copy of the template before applying the steps.

Also read
Add Recent Post Widget In Blogger
Add Floating Share Buttons In Blogger (Easy Steps)

Steps

==> Sign into blogger.com dashboard > Select the blog.

==> Locate and click on Template > Edit Html

==> Click anywhere in the template and hit Ctrl+F buttons for window, Cmd+F buttons for Mac.
==> Copy the highlighted code below and paste in the search box
<data:post.body/>
==> Press Enter key to find its location in template.
==> You might find the code up to two or three times, please make use of the second one.
==> Replace the above code with the one below

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

 Note: If you don' t notice any change after you applied its applied, kindly replace the third <data:post.body/>  tag too with the code above

==> Now search for </head> in the template and place the code below directly above it

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

==> Save your template, you are done.

Customization

Modify the number of character shown in homepage there isn't a photo(thumbnail) useing the 490 value in red, to modify the number of character shown when is a photos(thumbnail) in the post, the 400 value in red also.
To modify the size of the Thumb, use the values in yellow
160 height and 180 width

Hope It helps, comment if any difficulty.

Read More

How To Create A Static Home Page In Blogger

Having a customized static home page give your readers an impression of professionalism, making them comfortable to practice what ever is being thrown out to them by you, creating a static home page in blogger is not as difficult as it sounds, it doesn't require you to edit template or go through risky tasks, the changes are easily reversible.

Steps to add static homepage in blogger

Below are the steps  making

Step 1: Create a page(this will be the static home page)

The very first thing to do is to create a page in your blog, this will serve as your static home page after we are done, to do that open the blog you want to make the change and select "Pages", then click on "New page" this will open a Page editor.

In the title box, enter the name you want for the page, this will be the name of the static homepage.
For better understanding , I named mine "Wox Menu", name yours and follow me.
Next is to design the page to your satisfaction either by adding texts, photos or even videos in the large text box depending on what your site is all about.

Click publish after you are done, locate the page the page, we need to copy its url and paste somewhere, we will need it later. To do so, right click on the 'view' link and select "copy link address" to save you the url.

Step 2: Redirect default home page to the new page(Wox Menu)

Go to blogger settings > Search Preferences, under Errors and redirections, click "edit" beside custom redirects, this is were you set you new redirect.

As the photo indicates, you add a forward slash "/" in the first box (from) and the page url in the second(To)
In the url copied, you have to remove your blog url before you add it in "To" Box.

Example, this is my blog url http://liumestys.blogspot.com, this is the page url http://liumestys.blogspot.com/p/wox-menu.html, you remove http://liumestys.blogspot.com and use /p/wox-menu.html. in the "To" box.

Check Permanent, click on "save" link and save changes. open your blog, to this it worked.
That[s how to create a static homepage in blogger

If you wish to return it to its previous look(default homepage), go to setting > search preferences, under Errors and Redirections, click "Edit" link beside Custom redirects, check/select the created homepage redirect,hit delete and save changes. It will be restored to the original home page.

Read More

Add Widgets To Mobile View In Blogger

How To Make Widgets Show In Blogger Mobile View

Your blog mobile view may look boring, wise to spice it up a little more by making some of those awesome widget in your desktop view also visible in mobile.

There is a way you can make any Widget of your choice show in mobile view, especially  Google Adsense, is one of the many reasons blogger seek for this method. This way you get increase revenue and show your ads in mobile view without going through some boring and risky code adding and long editing.

Follow the Process below to show any widget to mobile.

Steps To Show Widget in blogger mobile view

Before you begin this steps, make sure your mobile template is set to custom.

To make any widget show in mobile, you get to add a mobile='yes' code to a widget code in your template, it not as hard as it sounds.

Enter your blog template and hit the Jump to Widget button, this will display all the widgets in your blog vertically, select the gadget you want to add to mobile, it will take you to it position. Use the example below for proper understanding.

Using  'Adsense' Html code below as an example

From   <b:widget id='HTML2' locked='false' title='' type='Adsense' visible='true'>

To       <b:widget id='HTML2' locked='false' mobile='yes' title='' type='Adsense' visible='true'>

As indicated above, we added mobile='yes'  in the the widget code. this will make that widget appear in mobile view.
If you wish to make it show only in mobile and not visible in desktop view, simply change the 'yes' to 'only', that's mobile='only'

Read More

Add Floating Share Buttons For Blogger (Easy Steps)

How To Add Floating Share Buttons To Blogger

Right here, we will discuss how to add floating share buttons in blogger. This share buttons are shown vertically at the left hand side beside your blog post,

See steps to add it below..

Steps
Step 1: Open blogger template > Edit HTML.

Step 2: Locate this code <b:includable id='post' var='post'> Do that by using control + F key to show to bring out a search box in template, input the code there.

Step 3 paste the code below directly below this <b:includable id='post' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/*<![CDATA[*/
#btnt-social {  bottom: 10%; margin-left: -50px; position: fixed; }
#btnt-social ul { list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#btnt-social ul li { display: inline;background:none;margin:0;padding:0;}
#btnt-social ul li a { display:block;  width: 32px; height:32px; margin: 5px 0; }
#btnt-social ul li a.twitter    { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Ax7CvJ16AkwHDVvZ4LdKip9_o_jy71LpLIe7k1HJTr5jOmOXaDtQfBwRfGsXLVl1P9zKI2phV4Rr4JwVdFWkAvDWArT8M36nIFNRGfp3FJlflxnl174FdTyb9I7pKXw9ljWa5prlGjna/s32/twitter.png") repeat scroll 0 0 transparent;  }
#btnt-social ul li a.facebook   { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZM4zu0bEQgd_JRnt8udQMiItUZqDn6RZMI10NCUuDFcoTO7XJqE2rShlEEhZUShfb1e2q6LoNW4tDrogUZg4H92tT47WV1CatwrjsBlway22xSsxsXSF_w9Gcniz2jihp_pOHGT96eteK/s32/facebook.png") repeat scroll 0 0 transparent; }
#btnt-social ul li a.stumbleupon  { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJrdhvLdU9EpTg4nsAKaoxEhGKSMt_YHtYcnK9ChGWRe8V9QCbEMmKeupjy8vUjyGgYPdZLExOFKX5CGOrC2XDWyVP0tE79bAZRnaM6dckHpzcchJarTDvmdJp2820V0PYNaeJvvDKDyf/s32/stumbleupon.png") repeat scroll 0 0 transparent;  }
#btnt-social ul li .google-plus    { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicEeGCXUCDrLZ3qn-e3JbSfGiIp8RQV7q24qOYjAccXfn_1QFwfVg7NhB3lgBDKxB867Qfpxq4K0DtOtxhd1NhGMwyyl78eYtF1a6zAyR-fnlRGnVCcTfoEpBcAg6WCiP3vkSqEfeo_FVH/s1600/g-plus.png") repeat scroll -1px 0 transparent;  }
#btnt-social ul li a.pin-it-button   {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUEwYQ-bv600DI54AapiwH0gDQMKF7ytyQHYuo81QUrfOyH5_fai5Y6Q82s7_D3BYi1eGJaIAAyXJ7emWLh7_8oZd9i51673at_rNGgHvI9Pe7bDkPilWBPkO3XfvFMoHoeGtEf3405G36/s32/pinterest.png") repeat scroll 0 0 transparent;  }
#btnt-social ul li .addthis_32x32_style .dummy .at300bs, #btnt-social ul li .addthis_32x32_style .at300bs, #btnt-social ul li .addthis_32x32_style .at15t   { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKWDKSgLmlAZtOEkzWkcvc76zCY6-b95pxANIFZQfzIOR-kw0p1Dxy9SKKYyi_IODwqyOl7dhlNckVppJhw6LYffRQw2wbblZbLv7J8QKOT1SVE4f7JGiWTjG290TG2niPj76wfyHsAVYP/s32/sharethis.png") repeat scroll 0 0 transparent;  }
/*]]>*/
</style>
<div id='btnt-social'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='google-plus' expr:href='&quot; http://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Google+ '/></li>
<li><a class='pin-it-button' href='javascript:void(run_pinmarklet())'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script></li>
<li><div class='addthis_toolbox addthis_32x32_style'>
<a class='addthis_button_compact'/>
</div>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;blogtipsntricks.com&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/></li>
</ul>
</div>
</b:if></b:if>

Step 5: Save your template.
You are done, go to your blog, you will find the share buttons beside your blog post.

Read More

Add Recent Post Widget To Blogger

How To Add Recent Post Widget To Blogger Easily

Some blog owners find it scary to go to their blog template and add certain features, thereby leaving their blogs without some important widget for SEO, If you are in that category of persons, then this is the nice post for you.

This recent post widget can be added without going to your blogger template to make certain changes, which may later result to what you are so much afraid of, which is messing up your template.
This recent post widget is actually very safe to use also enough to brighten you blog look in its beauty and holiness.
with out much talks, lets get to the process/steps/method.

Steps to add Recent post Widget to blogger

Like I mentioned above, you don't need to visit your template region for this work, is simply by adding a code to your gadget directly and save see. Steps below.

Step 1: Log on to blogger.com and select the blog you want to add related post widget.
Step 2: Locate Layout in the menus after your selected blog have been opened.

Step 3: Click add a gadget.

Step 4: locate HTML/Javascript and Open.

Step 4: Copy and paste the code below into the Html/javascript box.

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifLj37MPtrp4I6C-ajBsYXDCeec5BsjARgA0tOBiZfpL6J2WjaCLhbI8Ti-DB1vZUY-5UORy3hCUZgr-zzIOCMNUgN90qSlONyYTU7LbYS7BPFMDIU2MlnNu6yVYRoVnHlOYGcjZigamDn/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://blogwox.blogspot.com/2016/09/Recent-post-widget-for-blogger.html">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #000000;}
.post-date {color:#000000; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #eb7303;}.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #eb7303; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #000000;}</style>

Step 6: click save and that's all.

Visit your blog and you will find the recent post widget displayed in your slidebar, if you want this widget to blend well with your template, it can be customized, learn how below.

Customization

To make this customization easier, you will need to open the gadget the code was added, click anywhere in the code and hit Ctrl+F keys if you are using window, for Mac, Hit Cmd+F keys to pop out a search box. Copy and paste the code you want to make changes to, it will lead you directly to its location.

• Change to hover color, look for this code line .recent-posts-container a:hover{color: #000000;} and change to color of your choice
• Change the Read more link color look for the line a.readmorelink {color: #000000;} and swap to any color of your choice.
• Change the border color(the horizontal line displayed below every post title) Look for this code .recent-posts-details {border-top: 4px solid #eb7303 and change to your desired color.
• Change the number of posts to appear locate this line of code var posts_no = 5; change from 5 to any number you prefer.
• Change post title color, find this line of code .recent-post-title a {font-size: 13px; text-transform: uppercase; color: #eb7303;} change to your desired color.
• Change the post date color and Size, locate this code line .post-date {color:#000000; font-size: 11px; } edit to your personal teste.

Read More

Widget: How to add Related post to blogger with Thumbnails

Add Related post widget to blogger blog

Nowadays, hardly can you see a blog without a related post widget displayed below their posts, unless, if or maybe the blog is new, that is to say you must have a new blog for you to be reading this post right now, if you ain't, then what the heck have you being doing?

Anyway, you are all welcome here whether you are new to blogging or you are a pro.

Related posts add certain benefits to your blog, as a matter of fact, lots of benefits, the most important is to increase your site pageviews and also make you blog fun for your readers, without much talks/write-ups, let get straight to steps to add this related post widget to your BLOGGER/BLOGSPOT blog.

Steps to add related post To Blogger

1. Open your blogger, locate template and click on Edit HTML button as indicated in the photo below.

Note: it very advisable to save a copy of your template in case you get it messed up in this process. please do so.

2. While the template is opened, click any point inside the code area and hit your CTRL+F Key in windows, CMD+F keys in Mac, this will pop out a search box.

Ctrl+F keys to pop out the search box

3. In the search box input this code </head> and hit your enter key
 this will take you to the tag position shaded with yellow. Looks like this </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxgcc1sMZxAsfzXQpTpsXgnYIEMFwqDST-A8g7mxUY77eKxLhW9hVJymXlfpPPVlSoSg0WNR2TGfE5HLy8WqUjvYfQLfKK89rrSfZaGvDW9B-Mzb_THiRM4q1i0TRGfdNltYekU1lU8cCD/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Copy the code below and paste right above the </head> Tag

5. Use the search box again input the code below. Note: you might find the code more than once in your template go for the second one, that what we will be making use of
<div class='post-footer'>
6. Copy the code below and paste right above the <div class='post-footer'> tag

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="https://blogwox.blogspot.com/2016/09/how-to-add-related-post-widget-blog-design.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

If you are unable to see this related post widget after saving template,  add the code (step 6) just above the </b:includable> tag which can be found above this line  <b:includable id='postQuickEdit' var='post'>  in your template.

Customization

You can change the number of post that appear in your related post by changing the 5 value, that Max results=5 to your preferred number, to easily locate this, use the search box in template and input this code
var maxresults=5;

To change the size of the thumbnails(width and Height) change the values which are 110px and 100px
input this in the search box
cover;width:110px;height:100px;

Read More