Как да добавим емотикони в коментарите на Blogger

1
337
Добави коментар
iliqnktz
iliqnktz
www.iliqnktz.com
Как да добавим емотикони в коментарите на Blogger

Емотикони в коментарите на Blogger? Звучи чудесно, но прилагането на тази идея се оказа по-трудно, отколкото си мислех занимание. Намерих няколко теми с различни емотикони и начини на вграждане на код в блог, изграден върху платформата на Blogspot. В долните редове ще ви представя, как процедирах аз, също и кодовете, които използвах, но преди да започнем нека първо покажа крайния резултат, който се получи след прилагането на долните редове код.
Емотиконите са анимирани!

Нека започнем! Първо разбира се си направете резервно копие на шаблона, за да имате back up, в случай на счупване на сайта ви. Следва да влезнете в контрол панела на блогър, да отидете на „Шаблон“ и да изберете „Редактиране на HTML кода“.

Стъпка 1. Използвайте търсачката, като натиснете клавишна комбинация „CTRL+F“ и намерете следният ред:
</body>

Стъпка 2. Точно над него сложете този код (скрипт):
<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=’http://2.bp.blogspot.com/-Ph2wxEvy2mc/UTIr8-fdHjI/AAAAAAAABAo/3use2PsPhMA/s1600/taunt.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/:d/gi,“<img src=’http://4.bp.blogspot.com/-lhTywmMZ58E/UTI04kjJ3WI/AAAAAAAABDY/qNgtijEr_E8/s1600/biggrin.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/:p/gi,“<img src=’http://1.bp.blogspot.com/-gG_Wn6D6Ux4/UTIyqFyfKbI/AAAAAAAABCo/qEmU8s8ndVI/s1600/tongue.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/:\(\(/gi,“<img src=’http://3.bp.blogspot.com/-pcE-4ot-gjk/UTIsLRff6SI/AAAAAAAABAw/LYvZ8__88Ak/s1600/cry2.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/:\)/gi,“<img src=’http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/:\(/gi,“<img src=’http://2.bp.blogspot.com/-XSBJ7zBZKZs/UTIrT-hMYyI/AAAAAAAABAY/6B26_8Ttwj4/s1600/sad.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/:-\?/gi,“<img src=’http://1.bp.blogspot.com/-TSIzPWeGBwk/UTI0S-nw5tI/AAAAAAAABDQ/xyHPCFZH4fI/s1600/think.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/d\(/gi,“<img src=’http://3.bp.blogspot.com/-qlyn_deOhFw/UTIzY8aRgqI/AAAAAAAABC4/pfSojMdD33s/s1600/doh.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/:-o/gi,“<img src=’http://3.bp.blogspot.com/-Zb5g0OWHx4c/UTIsuPLt90I/AAAAAAAABA4/cmP1ltBmVF0/s1600/shock.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/:-f/gi,“<img src=’http://4.bp.blogspot.com/-SpvC8mHHwhg/UTIzQMUVGKI/AAAAAAAABCw/_NKKVyQtulk/s1600/flowers1.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/:s/gi,“<img src=’http://1.bp.blogspot.com/-qpnD1BYon5w/UTI0AIeKX6I/AAAAAAAABDI/HsllV7NYTqk/s1600/unsure.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/b-\(/gi,“<img src=’http://3.bp.blogspot.com/-h4yNmhdKUVU/UTIwUKpvVOI/AAAAAAAABCY/B0FEZVRGHe4/s1600/threaten.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/h-\(/gi,“<img src=’http://4.bp.blogspot.com/-veVoDPEc7I4/UTIv9wCS0jI/AAAAAAAABCQ/4c5FgCHAiU4/s1600/help.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/g-\)/gi,“<img src=’http://2.bp.blogspot.com/-_ttAcnBbAaw/UTIvKtxfWvI/AAAAAAAABCA/X2JLEShhOQU/s1600/good.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/5-\p/gi,“<img src=’http://2.bp.blogspot.com/–o9jZ1nMcec/UTIuyCBgS_I/AAAAAAAABB4/Jf03oz5yKrU/s1600/beee.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/y-\)/gi,“<img src=’http://2.bp.blogspot.com/-6-BTJcVpwY0/UTIvhF_PL-I/AAAAAAAABCI/SS-LDADTSls/s1600/yahoo.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/c-\)/gi,“<img src=’http://3.bp.blogspot.com/-khAwhIYbgvQ/UTItD_PfNyI/AAAAAAAABBI/HMpRMQh5Uak/s1600/crazy.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/s-\)/gi,“<img src=’http://2.bp.blogspot.com/-fsTXhXl10Gg/UTIs7Ll01AI/AAAAAAAABBA/QkWgWAAFG3g/s1600/spiteful.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/d-\)/gi,“<img src=’http://2.bp.blogspot.com/-CIuUuJeuyGI/UTIueHgTxOI/AAAAAAAABBo/BzXkTEEDlhw/s1600/drinks.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/w-\)/gi,“<img src=’http://2.bp.blogspot.com/-Mc5ed3Ymk7s/UTI1GIXMAMI/AAAAAAAABDg/PyDOfoXgsl0/s1600/cheer.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/:-\h/gi,“<img src=’http://2.bp.blogspot.com/-JOgaMRI61Jk/UTItsGc5KdI/AAAAAAAABBY/6UDCabfZQbg/s1600/hi+2.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/:X/gi,“<img src=’http://2.bp.blogspot.com/-wmOB_Z6LPp4/UTIt9FhZiwI/AAAAAAAABBg/7VoefgIQjEs/s1600/give_heart.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/:\-\*/gi,“<img src=’http://2.bp.blogspot.com/-H4e_O5BFVP8/UTIumwhVmKI/AAAAAAAABBw/SKhY4DDxKkk/s1600/air_kiss.gif’ alt=“ class=’smiley’/>“);_str=_str.replace(/=\)\)/gi,“<img src=’http://1.bp.blogspot.com/-lNNTReQVc0A/UTIrjDhVLAI/AAAAAAAABAg/BsVMYnr54pI/s1600/rofl.gif’ alt=“ class=’smiley’/>“);b.item(i).innerHTML=_str;}}}
//]]>
</script>

С това завършихте първия етап от добавянето на емотиконите във вашият блог. Сега остана да сложим кутия с изображенията и кодовете, които вашите посетители могат да копират и публикуват в коментарите си.

Стъпка 3. Намерете следният ред:

<h4 id=’comment-post-message’><data:postCommentMsg/></h4>
Стъпка 4. Точно под него поставете този код:
<center><div style=’ width: 420px; text-align: left; border: 2px solid #333333; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold; ‘>
<img border=’0′ src=’http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif’/> 🙂
<img border=’0′ src=’http://2.bp.blogspot.com/-XSBJ7zBZKZs/UTIrT-hMYyI/AAAAAAAABAY/6B26_8Ttwj4/s1600/sad.gif’/> 🙁
<img border=’0′ src=’http://2.bp.blogspot.com/-Ph2wxEvy2mc/UTIr8-fdHjI/AAAAAAAABAo/3use2PsPhMA/s1600/taunt.gif’/> :))
<img border=’0′ src=’http://3.bp.blogspot.com/-pcE-4ot-gjk/UTIsLRff6SI/AAAAAAAABAw/LYvZ8__88Ak/s1600/cry2.gif’/> :((
<img border=’0′ src=’http://1.bp.blogspot.com/-lNNTReQVc0A/UTIrjDhVLAI/AAAAAAAABAg/BsVMYnr54pI/s1600/rofl.gif’/> =))
<img border=’0′ src=’http://4.bp.blogspot.com/-lhTywmMZ58E/UTI04kjJ3WI/AAAAAAAABDY/qNgtijEr_E8/s1600/biggrin.gif’/> 😀
<img border=’0′ src=’http://1.bp.blogspot.com/-gG_Wn6D6Ux4/UTIyqFyfKbI/AAAAAAAABCo/qEmU8s8ndVI/s1600/tongue.gif’/> 😛
<img border=’0′ src=’http://3.bp.blogspot.com/-Zb5g0OWHx4c/UTIsuPLt90I/AAAAAAAABA4/cmP1ltBmVF0/s1600/shock.gi’/> :-O
<img border=’0′ src=’http://1.bp.blogspot.com/-TSIzPWeGBwk/UTI0S-nw5tI/AAAAAAAABDQ/xyHPCFZH4fI/s1600/think.gif’/> 😕
<img border=’0′ src=’http://1.bp.blogspot.com/-qpnD1BYon5w/UTI0AIeKX6I/AAAAAAAABDI/HsllV7NYTqk/s1600/unsure.gif’/> :s
<img border=’0′ src=’http://4.bp.blogspot.com/-SpvC8mHHwhg/UTIzQMUVGKI/AAAAAAAABCw/_NKKVyQtulk/s1600/flowers1.gif’/> :-f
<img border=’0′ src=’http://3.bp.blogspot.com/-qlyn_deOhFw/UTIzY8aRgqI/AAAAAAAABC4/pfSojMdD33s/s1600/doh.gif’/> d(
<img border=’0′ src=’http://2.bp.blogspot.com/-H4e_O5BFVP8/UTIumwhVmKI/AAAAAAAABBw/SKhY4DDxKkk/s1600/air_kiss.gif’/> :-*
<img border=’0′ src=’http://3.bp.blogspot.com/-h4yNmhdKUVU/UTIwUKpvVOI/AAAAAAAABCY/B0FEZVRGHe4/s1600/threaten.gif’/> b-(
<img border=’0′ src=’http://4.bp.blogspot.com/-veVoDPEc7I4/UTIv9wCS0jI/AAAAAAAABCQ/4c5FgCHAiU4/s1600/help.gif’/> h-(
<img border=’0′ src=’http://2.bp.blogspot.com/-_ttAcnBbAaw/UTIvKtxfWvI/AAAAAAAABCA/X2JLEShhOQU/s1600/good.gif’/> g-)
<img border=’0′ src=’http://2.bp.blogspot.com/–o9jZ1nMcec/UTIuyCBgS_I/AAAAAAAABB4/Jf03oz5yKrU/s1600/beee.gif’/> 5-p
<img border=’0′ src=’http://2.bp.blogspot.com/-6-BTJcVpwY0/UTIvhF_PL-I/AAAAAAAABCI/SS-LDADTSls/s1600/yahoo.gif’/> y-)
<img border=’0′ src=’http://3.bp.blogspot.com/-khAwhIYbgvQ/UTItD_PfNyI/AAAAAAAABBI/HMpRMQh5Uak/s1600/crazy.gif’/> c-)
<img border=’0′ src=’http://2.bp.blogspot.com/-fsTXhXl10Gg/UTIs7Ll01AI/AAAAAAAABBA/QkWgWAAFG3g/s1600/spiteful.gif’/> s-)
<img border=’0′ src=’http://2.bp.blogspot.com/-CIuUuJeuyGI/UTIueHgTxOI/AAAAAAAABBo/BzXkTEEDlhw/s1600/drinks.gif’/> d-)
<img border=’0′ src=’http://2.bp.blogspot.com/-Mc5ed3Ymk7s/UTI1GIXMAMI/AAAAAAAABDg/PyDOfoXgsl0/s1600/cheer.gif’/> w-)
<img border=’0′ src=’http://2.bp.blogspot.com/-JOgaMRI61Jk/UTItsGc5KdI/AAAAAAAABBY/6UDCabfZQbg/s1600/hi+2.gif’/> :-h
<img border=’0′ src=’http://2.bp.blogspot.com/-wmOB_Z6LPp4/UTIt9FhZiwI/AAAAAAAABBg/7VoefgIQjEs/s1600/give_heart.gif’/> :X
</div></center>
Стъпка 5. Сега намерете и този код:
<h4><data:post.commentLabelFull/></h4>
Ето и снимка, за да се ориентирате, ако ви излезе повече от един резултат. На снимката, може да видите, че съм леко добавил надписи „Съществуват“ и „под тази публикация“, които при вас не съществуват, така че не ги изписвайте в търсачката.
Натисни върху снимката, за да се покаже на цял екран!
Стъпка 6. Под него поставете отново:
<center><div style=’ width: 420px; text-align: left; border: 2px solid #333333; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold; ‘>
<img border=’0′ src=’http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif’/> 🙂
<img border=’0′ src=’http://2.bp.blogspot.com/-XSBJ7zBZKZs/UTIrT-hMYyI/AAAAAAAABAY/6B26_8Ttwj4/s1600/sad.gif’/> 🙁
<img border=’0′ src=’http://2.bp.blogspot.com/-Ph2wxEvy2mc/UTIr8-fdHjI/AAAAAAAABAo/3use2PsPhMA/s1600/taunt.gif’/> :))
<img border=’0′ src=’http://3.bp.blogspot.com/-pcE-4ot-gjk/UTIsLRff6SI/AAAAAAAABAw/LYvZ8__88Ak/s1600/cry2.gif’/> :((
<img border=’0′ src=’http://1.bp.blogspot.com/-lNNTReQVc0A/UTIrjDhVLAI/AAAAAAAABAg/BsVMYnr54pI/s1600/rofl.gif’/> =))
<img border=’0′ src=’http://4.bp.blogspot.com/-lhTywmMZ58E/UTI04kjJ3WI/AAAAAAAABDY/qNgtijEr_E8/s1600/biggrin.gif’/> 😀
<img border=’0′ src=’http://1.bp.blogspot.com/-gG_Wn6D6Ux4/UTIyqFyfKbI/AAAAAAAABCo/qEmU8s8ndVI/s1600/tongue.gif’/> 😛
<img border=’0′ src=’http://3.bp.blogspot.com/-Zb5g0OWHx4c/UTIsuPLt90I/AAAAAAAABA4/cmP1ltBmVF0/s1600/shock.gi’/> :-O
<img border=’0′ src=’http://1.bp.blogspot.com/-TSIzPWeGBwk/UTI0S-nw5tI/AAAAAAAABDQ/xyHPCFZH4fI/s1600/think.gif’/> 😕
<img border=’0′ src=’http://1.bp.blogspot.com/-qpnD1BYon5w/UTI0AIeKX6I/AAAAAAAABDI/HsllV7NYTqk/s1600/unsure.gif’/> :s
<img border=’0′ src=’http://4.bp.blogspot.com/-SpvC8mHHwhg/UTIzQMUVGKI/AAAAAAAABCw/_NKKVyQtulk/s1600/flowers1.gif’/> :-f
<img border=’0′ src=’http://3.bp.blogspot.com/-qlyn_deOhFw/UTIzY8aRgqI/AAAAAAAABC4/pfSojMdD33s/s1600/doh.gif’/> d(
<img border=’0′ src=’http://2.bp.blogspot.com/-H4e_O5BFVP8/UTIumwhVmKI/AAAAAAAABBw/SKhY4DDxKkk/s1600/air_kiss.gif’/> :-*
<img border=’0′ src=’http://3.bp.blogspot.com/-h4yNmhdKUVU/UTIwUKpvVOI/AAAAAAAABCY/B0FEZVRGHe4/s1600/threaten.gif’/> b-(
<img border=’0′ src=’http://4.bp.blogspot.com/-veVoDPEc7I4/UTIv9wCS0jI/AAAAAAAABCQ/4c5FgCHAiU4/s1600/help.gif’/> h-(
<img border=’0′ src=’http://2.bp.blogspot.com/-_ttAcnBbAaw/UTIvKtxfWvI/AAAAAAAABCA/X2JLEShhOQU/s1600/good.gif’/> g-)
<img border=’0′ src=’http://2.bp.blogspot.com/–o9jZ1nMcec/UTIuyCBgS_I/AAAAAAAABB4/Jf03oz5yKrU/s1600/beee.gif’/> 5-p
<img border=’0′ src=’http://2.bp.blogspot.com/-6-BTJcVpwY0/UTIvhF_PL-I/AAAAAAAABCI/SS-LDADTSls/s1600/yahoo.gif’/> y-)
<img border=’0′ src=’http://3.bp.blogspot.com/-khAwhIYbgvQ/UTItD_PfNyI/AAAAAAAABBI/HMpRMQh5Uak/s1600/crazy.gif’/> c-)
<img border=’0′ src=’http://2.bp.blogspot.com/-fsTXhXl10Gg/UTIs7Ll01AI/AAAAAAAABBA/QkWgWAAFG3g/s1600/spiteful.gif’/> s-)
<img border=’0′ src=’http://2.bp.blogspot.com/-CIuUuJeuyGI/UTIueHgTxOI/AAAAAAAABBo/BzXkTEEDlhw/s1600/drinks.gif’/> d-)
<img border=’0′ src=’http://2.bp.blogspot.com/-Mc5ed3Ymk7s/UTI1GIXMAMI/AAAAAAAABDg/PyDOfoXgsl0/s1600/cheer.gif’/> w-)
<img border=’0′ src=’http://2.bp.blogspot.com/-JOgaMRI61Jk/UTItsGc5KdI/AAAAAAAABBY/6UDCabfZQbg/s1600/hi+2.gif’/> :-h
<img border=’0’ src=’http://2.bp.blogspot.com/-wmOB_Z6LPp4/UTIt9FhZiwI/AAAAAAAABBg/7VoefgIQjEs/s1600/give_heart.gif’/> :X
</div></center>
Ако се чудите, защо по дяволите добавяте два пъти, един и същи код, сега ще обясня. Когато изпробвах написаното в другите статии, забелязах че кутията с емотиконите се появява само на статии без съществуващи коментари. Ако искате кутията да се показва винаги на всички статии, независимо дали има или няма коментари, тогава е нужно да се добави още един път кода, както посочих на стъпка 5 и 6.

Запазете и  вижте новите си емотикони в някоя публикация. Можете да направите следните корекции в този участък на стъпка 4 и 6:

<div style=’ width: 440px; text-align: left;  border: 2px solid #0084ce;  background: #FEF9EA; padding: 10px;   color:#0084ce;  font-weight:bold;  ‘> 
Коригиране по свой вкус в кода широчината [width: 440px]. От [solid #0084ce] сменявате цветът на рамката, цветът на фона [background: #FEF9EA] и цветът  на текста [color:#0084ce].

Друга възможна корекция е да премахнете html таг-а за центриране на кутията. Отидете на стъпка 4 и 6 и изтрийте:

<center> В началото на кода.
</center> В края на кода.
Източници (кредити) на материал за тази статия:
– Кутията за емотиконите съм взел от блога на Владимир Кабрански, Другият и по-конкретно от тази статия – http://drugiyat.blogspot.bg/2010/05/skype-blogger.html.
– Адресите на изображенията съм взел от този англоезичен блог – HelpBlogger.

Прочети цялата публикация