Комментарии Blogger

Меня вполне устраивает форма комментариев, которая используется в Blogger. Поколдовав со стилями и HTML, можно изменить её вид и функционал на своё усмотрение.

Содержание.

1. Добавить ответ на конкретный комментарий Blogger.
2. Заменить "коммент." на "комментария".
3. Включить счётчик комментариев.
4. Чередование фона чётных-нечётных комментариев.
5. Убрать слово "Комментирует..."
6. Настроить показ аватара анонимных комментаторов.
7. Аватар автора без загрузки изображения в профиль.
8. Стиль имени комментирующего.
9. Сделать смайлики в комментариях.

Редактирование производим на вкладке "Дизайн"-"Изменить HTML". Устанавливаем галочку "Расширить шаблоны виджета". Для поиска фрагментов кода используется комбинация клавиш CTRL+F. Код CSS следует прописывать перед:

/* Widgets
------------------------------------------------------------------------------------- */

Размещение стилей Css в шаблоне Blogger.

Добавить ответ на конкретный комментарий Blogger.

Я часто встречала упрёки, что, мол, нельзя ответить на отзыв конкретного человека. Это вполне можно исправить. Для чего создаём всплывающую форму, содержащую ссылку на комментарий, вида @<a href="#c2778332992639980746">Геннадий</a>, на который вы отвечаете, и имя автора отзыва.

Форма комментария в ответ на конкретный отзыв.

Код:

<dd class='comment-footer'>
  <span class='comment-timestamp'>
    <a expr:href='data:comment.url' title='comment permalink'>
      <data:comment.timestamp/>
       </a>
      <b:include data='comment' name='commentDeleteIcon'/>
    </span>
</dd>

заменяем на:

<dd class='comment-footer'>
  <span class='comment-timestamp'>
    <a expr:href='data:comment.url' title='comment permalink'>
      <data:comment.timestamp/>
       </a>
      <b:include data='comment' name='commentDeleteIcon'/>
    </span>
  <span class='comment-reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=идентификационный_номер_вашего_блога&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Отправить комментарий]</a>
  </span>
    </dd>

В данном фрагменте нужно указать ваш идентификационный номер блога. Его можно узнать, когда вы находитесь в панели управления блогом, в адресной строке браузера.

Отображение blogID Blogger в строке браузера.

Теперь стили CSS. Определяем отступ.

.comment-reply {float: right;
  margin: 0px -27px 0px 0px;}

Далее можно изменить [Отправить комментарий] на код изображения. Например: <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6SqJLdfXsRjBVABALidO-VWGdV56nsB45fylgYB3AXfaru0aHLgXvZHKn8LZH3YOwjmdlZYU1WNZ9zmKwoZyomegwC19xs7fP_ZsdwaYkILN9WyDyJUN3zoDS9CCmq08YfSPDKfC00UOs/s1600/reply.png" />

Заменить "коммент." на "комментария".

В статье об оптимизации заголовков h1, h2, h3 в разделе о заголовке h4 описаны действия, необходимые для раскрытия сокращения "коммент.". А также изменения стиля слов "Нет комментариев." и "Отправить комментарий".

Включить счётчик комментариев.

Нумерация отзывов Blogger.

С помощью скрипта можно пронумеровать отзывы читателей блога.

Код:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
   <b:loop values='data:post.comments' var='comment'>
    <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
     <b:if cond='data:comment.favicon'>
       <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
     </b:if>
     <a expr:name='data:comment.anchorName'/>
     <b:if cond='data:blog.enabledCommentProfileImages'>
       <data:comment.authorAvatarImage/>
     </b:if>
     <b:if cond='data:comment.authorUrl'>
       <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
     <b:else/>
       <data:comment.author/>
     </b:if>
     <data:commentPostedByMsg/>
    </dt>
    <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
    <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
      <p>
        <data:comment.body/>
      </p>
    </b:if>
  </dd>
  <dd class='comment-footer'>
    <span class='comment-timestamp'>
      <a expr:href='data:comment.url' title='comment permalink'>
        <data:comment.timestamp/>
      </a>
      <b:include data='comment' name='commentDeleteIcon'/>
     </span>
    </dd>
   </b:loop>
  </dl>

нужно изенить на:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
    <script type='text/javascript'>var numberComments=0;</script>
      <b:loop values='data:post.comments' var='comment'>
        <div class='' expr:id='data:comment.id'>
          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <b:if cond='data:comment.favicon'>
               <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
            </b:if>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:blog.enabledCommentProfileImages'>
               <data:comment.authorAvatarImage/>
            </b:if>
            <b:if cond='data:comment.authorUrl'>
               <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
               <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
            <span class='commentnumber'>
             <a expr:href='"#comment-" + data:comment.id' title='Ссылка на комментарий'>
              <script type='text/javascript'>
              numberComments=numberComments+1;
              document.write(numberComments)
              </script>
             </a>
            </span>
            </dt>
          <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
            </div>
          </b:loop>
        </dl>

И CSS. Указываем расположение, размер, шрифт цифр и их цвет.

.commentnumber {
  float: right;
  display: block;
  width: 30px;
  margin-top: -10px;
  text-align: right; 
  font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
  font-size: 25px;
  font-weight: normal;
}

.commentnumber a:link, .commentnumber a:visited {color: #445566 !important;}
.commentnumber a:hover, .commentnumber a:active {color: #FF9933 !important;}

Чередование фона чётных-нечётных комментариев.

Чередование фона чётных-нечётных замечаний посетителей блога выглядит стильно и более наглядно. Преобразуем код счётчика комментариев (см. выше):

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <script type='text/javascript'>var numberComments=0;</script>
          <b:loop values='data:post.comments' var='comment'>
            <div class='' expr:id='data:comment.id'>
           <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
                <span class='commentnumber'>
          <a expr:href='&quot;#comment-&quot; + data:comment.id' title='Ссылка на комментарий'>
            <script type='text/javascript'>
              numberComments=numberComments+1;
              document.write(numberComments)
            </script>
          </a>
        </span>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
<script type='text/javascript'>ContarC(&#39;<data:comment.id/>&#39;)</script>
            </div>
          </b:loop>
        </dl>

Затем шлифуем стиль CSS. Экспериментируем с размерами рамки и цветом (особое внимание обратите на background-color).

.commentPar { 
  margin: 8px -2px 0 -50px;
  padding: 5px 20px 0 50px; 
  background-color: #e9dec4;
  border-bottom: 1px solid #ddcca2;
  border-top: 1px solid #ddcca2;
}

.commentImpar { 
  margin: 8px -2px 0 -50px; 
  padding: 5px 20px 0 50px; 
  background-color: #e5d9bc;
  border-bottom: 1px solid #ddcca2;
  border-top: 1px solid #ddcca2;
}

И, наконец, добавляем скрипт сразу после

<head>:

<script type='text/javascript'>
function ContarC(cual) {
   var resto;
   resto = numberComments % 2;
   if (resto == 0) {
      document.getElementById(cual).className=&#39;commentPar&#39;;
   } else {
      document.getElementById(cual).className=&#39;commentImpar&#39;;
   }
}
</script>

Убрать слово "Комментирует..."

Если возникло желание удалить элемент "Комментирует...", нужно изменить строку

<data:commentPostedByMsg/>

на

<!--<data:commentPostedByMsg/>-->

Настроить показ аватара анонимных комментаторов.

Если посетитель использует при высказывании своего мнения профиль "Название/URL" или "Анонимный", то изображение аватара не будет видно. Решение данной проблемы, а также процесс удаления ссылки на автора отзыва в имени, но не на картинку был описан ранее в статье об удалении нежелательных линков.

Аватар автора без загрузки изображения в профиль.

Панель инструментов Blogger позволяет загрузить в профиль аватар автора блога. Если выбрать профиль отзыва "Google", то именно эта картинка будет использоваться с соответствующей ссылкой на данные автора. Чтобы не включать ссылку и быть анонимным, но при этом иметь аватар, автор блога должен осуществить следующие действия. Код:

<b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>

заменить на:

<b:if cond='data:comment.author != &quot;Ваш-НИК&quot;'>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
                   </b:if>
                      </b:if>
                    <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <b:if cond='data:comment.author == &quot;Ваш-НИК&quot;'>
                   <img class='comment-avatar' height='35px' src='адрес_картинки_аватара' width='35px' alt="Ваш-НИК" />
                       <data:comment.author/>
                   <b:else/>
                 <data:comment.author/>
                </b:if>
              </b:if>

Код CSS:

img.comment-avatar {
float: left;
display: block;
margin: 0px 0px 0 -43px;
}

Теперь при ответе на комментарий следует выбирать профиль "Название/URL" с соответствующим НИКом.

Стиль имени комментирующего.

Стиль имени комментирующего можно изменить, обратив внимание на строку

#comments .comment-author {}

В фигурных скобках можно прописывать любые параметры, например:

1. Цвет: color: #60502a;
2. Размер: font-size: 18px;
3. Тень: text-shadow: 3px 3px 3px #505050;

Сделать смайлики в комментариях.

Смайлики в комментариях Blogger.

Для того, чтобы подчеркнуть чувства, испытываемые при написании письма, удобно использовать смайлики. Для внедрения их в блог на платформе Blogger можно включить скрипт автоматической замены определённых комбинаций символов на изображения.

Итак, после

<head>

пишем:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function smileyComment(which) {
if(!document.getElementById) {return;} // 
bodyText = document.getElementById(which); // combody-xxxxxxxxxx
whichText = bodyText.innerHTML;

// :) 
whichText = whichText.replace(/:\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWc711Lqqlb9sDD1J4HSfiFcqUXS_cxMWu_cMAVLc-sv9Jo4JoTFm_hsgg9D9rphFgD52JbPI-SUno706Qb_n_ssDGQaHnLIsLe6TBUwgDf0IfdSQiPO-ZDx1wssFpqVIbrctVNOvrLc1f/s1600/ulybka-smailik.gif" alt="Смайлик улыбка" width="21" height="21" />');

// :((
whichText = whichText.replace(/:\(\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy7sWBwEl494XUxO3PZQdgX-AtBobAJ8EFf86vnRztsDzuqHRtTYI4bsGeVP9l9IvSb69VYUGnJJgLZ0wTig9RlPnbVX8rVQo0VUxjdYsC6ykkNzLxXUWKA7Mg6x07K_TSzigADz8qSRCp/s1600/plach-smailik.gif" alt="Смайлик плачущий" width="20" height="21" />');

// :( 
whichText = whichText.replace(/:\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx-XyO2F4zoDw6UWn4paarlbMH6v2tM38ZuPMIOUTo8NnjOWXGqJ-r8iVoydDIs5SZl5Qs8U8AzsYbgsfFLqSkZQ_h6xzCk4gZA9d2WB55dopfF77PsIhZVcYi8cJLIBVcsZU7-jc6yjgX/s1600/nikak-smailik.gif" alt="Смайлик никак" width="20" height="21" />');

// :P 
whichText = whichText.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihC8Al9xwbyPea_D76MW6-KubPSUFf4wZLKui8NZnu_WjPPQejzsExajo2lBZJYdnr-frsASdL6OTW0bRGyWEDTauUVSW2TnraNURnnMBV5WNYxGs2VQhPz0xsrn_xILQrU8fb93fYZtjj/s1600/yazyk-smailik.gif" alt="Смайлик показывает язык" width="20" height="21" />');

// :D
whichText = whichText.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKodm_MNdnKol1TTVtiDTbpj7Bp2BgYV-8N0Hc31HTqIzPdyxjGJNC_snf3uwwYpA1QS7nnFqlKmMcJspZ51k81FucvNJmsWicxhfhD_NrdIvqG0pgmN941tbXo7f15EX3THc-e0KwOy4P/s1600/smeh-smailik.gif" alt="Смайлик смех" width="20" height="21" />');

// :$ 
whichText = whichText.replace(/:\$/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVcCMaJZmMNX3XFgU629HJP08P-ZYGO3ntk5n9OVlRMtS_JHBJ63rjKTBoilDtQAF-JwjGolZKcZAWkYD9LePfM9-bL3xnD5gXGSlP8v28iAb-jlDHINxNVKcOzymYAGYhyphenhyphenN9yyXPy4n7n/s1600/stesnitelnost-smailik.gif" alt="Смайлик стеснительный" width="20" height="21" />');

// ;) 
whichText = whichText.replace(/;\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihNcx-lDb20DMuxdDp7LkUSOVUSzlp9rjMKXo3eQujWEqvMw7Nj5uOambwvBhcMcgy-FyLYlo3NKpbP7W0pmL9SGJ-xR_hdwx9lkuL5j_lMKT9J7CXKLKquKze3rmRVw_90DajyKJl8sEj/s1600/podmignut-smailik.gif" alt="Смайлик подмигивает" width="20" height="21" />');

// :G
whichText = whichText.replace(/:\G/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitoRze8W8VW1mAblGyMIXd4LxWIP8QlBApIUcLWGgd4Etq-JItoCKG7mAJyWND7pEkzObvUs0PulE1KC1fksHmc3wN0rD6NTBxA6Leh415ZC1soN_iKb07b1M7emrQ2eZzzOKCJA7WA3t5/s1600/kukish-smailik.gif" alt="Смайлик кукиш" width="18" height="18" />');

// :X
whichText = whichText.replace(/:\X/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhitr29vfTbDUOaltZu4E34GCMsMJCpPtl2jFlFFK4wHIyXIDj4g8SL6ACkEORg8pTq9p_bfhuWyHqBzjHs0I4IIl3tELUD0Co7CF8d4ZNc5QKBse3ngPs3RnNe-SDu1yLcMdg4mJU8nzCD/s1600/net-smailik.gif" alt="Смайлик не согласен" width="20" height="21" />');

// :o 
whichText = whichText.replace(/:\o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPfk2ACKtL5fNzKqTomdCmj5PF1v7d41tZNs1f58McLxGoi9mGcALFIFfXsi8Y5c6lGz6S3MFrMSspUoLmDCvYy7yIKHpB1qgQKLPI6YE09w4dXE_s0HBvIXzXEZGX8kO5iYo3VsSwelIr/s1600/uh-ty-smailik.gif" alt="Смайлик ух-ты" width="20" height="21" />');

// :O 
whichText = whichText.replace(/:\O/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGSEH7KBMlc_GVY-lhpjQ6vtvLDPipgGmXLQ55_102xFEKQzx8zYIIybxVBdXWESnk_z5F2c9jQpXmmXxMfaHxxzoS3pk-F_i3KqQhZH5U6aYK2YM5mRK67lun2o89YH_I98-IN45uM0Li/s1600/zevota-smailik.gif" alt="Смайлик зевает" width="20" height="20" />');

// :S
whichText = whichText.replace(/:S/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOGMdtOCyND3RfiLhIRZd0j5fBaav1paMr82qQ7dNsq1Y-LrsbWPAhITnj4uFSBvClOhVgiFSSRFLH9NarkRujsztDZDwOxrCIes7pITAYx7ohz-n6rbPbDNhDNF7TZuwm2o5r57cytE2O/s1600/strah-smailik.gif" alt="Смайлик боится" width="20" height="21" />');

bodyText.innerHTML = whichText;
}
//]]>
</script>
</b:if>

Код:

<b:if cond='data:comment.isDeleted'>
  <span class='deleted-comment'><data:comment.body/></span>
<b:else/>
  <p>
    <data:comment.body/>
    <span class='interaction-iframe-guide'/>
  </p>
</b:if>

заменяем на:

<b:if cond='data:comment.isDeleted'>
  <span class='deleted-comment'><data:comment.body/></span>
<b:else/>
  <p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/>
<span class='interaction-iframe-guide'/></p>
<script type='text/javascript'>
  which = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;;
  smileyComment(which);
</script>
</b:if>

После строки

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

указываем:

<center>
<table width='400px'>
<tbody>
<tr>
<td colspan='10'/>
<td colspan='3'>
</td>
</tr>
<tr>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWc711Lqqlb9sDD1J4HSfiFcqUXS_cxMWu_cMAVLc-sv9Jo4JoTFm_hsgg9D9rphFgD52JbPI-SUno706Qb_n_ssDGQaHnLIsLe6TBUwgDf0IfdSQiPO-ZDx1wssFpqVIbrctVNOvrLc1f/s1600/ulybka-smailik.gif" alt="Смайлик улыбка" width="21" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy7sWBwEl494XUxO3PZQdgX-AtBobAJ8EFf86vnRztsDzuqHRtTYI4bsGeVP9l9IvSb69VYUGnJJgLZ0wTig9RlPnbVX8rVQo0VUxjdYsC6ykkNzLxXUWKA7Mg6x07K_TSzigADz8qSRCp/s1600/plach-smailik.gif" alt="Смайлик плачущий" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx-XyO2F4zoDw6UWn4paarlbMH6v2tM38ZuPMIOUTo8NnjOWXGqJ-r8iVoydDIs5SZl5Qs8U8AzsYbgsfFLqSkZQ_h6xzCk4gZA9d2WB55dopfF77PsIhZVcYi8cJLIBVcsZU7-jc6yjgX/s1600/nikak-smailik.gif" alt="Смайлик никак" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihC8Al9xwbyPea_D76MW6-KubPSUFf4wZLKui8NZnu_WjPPQejzsExajo2lBZJYdnr-frsASdL6OTW0bRGyWEDTauUVSW2TnraNURnnMBV5WNYxGs2VQhPz0xsrn_xILQrU8fb93fYZtjj/s1600/yazyk-smailik.gif" alt="Смайлик показывает язык" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKodm_MNdnKol1TTVtiDTbpj7Bp2BgYV-8N0Hc31HTqIzPdyxjGJNC_snf3uwwYpA1QS7nnFqlKmMcJspZ51k81FucvNJmsWicxhfhD_NrdIvqG0pgmN941tbXo7f15EX3THc-e0KwOy4P/s1600/smeh-smailik.gif" alt="Смайлик смех" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVcCMaJZmMNX3XFgU629HJP08P-ZYGO3ntk5n9OVlRMtS_JHBJ63rjKTBoilDtQAF-JwjGolZKcZAWkYD9LePfM9-bL3xnD5gXGSlP8v28iAb-jlDHINxNVKcOzymYAGYhyphenhyphenN9yyXPy4n7n/s1600/stesnitelnost-smailik.gif" alt="Смайлик стеснительный" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihNcx-lDb20DMuxdDp7LkUSOVUSzlp9rjMKXo3eQujWEqvMw7Nj5uOambwvBhcMcgy-FyLYlo3NKpbP7W0pmL9SGJ-xR_hdwx9lkuL5j_lMKT9J7CXKLKquKze3rmRVw_90DajyKJl8sEj/s1600/podmignut-smailik.gif" alt="Смайлик подмигивает" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitoRze8W8VW1mAblGyMIXd4LxWIP8QlBApIUcLWGgd4Etq-JItoCKG7mAJyWND7pEkzObvUs0PulE1KC1fksHmc3wN0rD6NTBxA6Leh415ZC1soN_iKb07b1M7emrQ2eZzzOKCJA7WA3t5/s1600/kukish-smailik.gif" alt="Смайлик кукиш" width="18" height="18"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhitr29vfTbDUOaltZu4E34GCMsMJCpPtl2jFlFFK4wHIyXIDj4g8SL6ACkEORg8pTq9p_bfhuWyHqBzjHs0I4IIl3tELUD0Co7CF8d4ZNc5QKBse3ngPs3RnNe-SDu1yLcMdg4mJU8nzCD/s1600/net-smailik.gif" alt="Смайлик не согласен" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPfk2ACKtL5fNzKqTomdCmj5PF1v7d41tZNs1f58McLxGoi9mGcALFIFfXsi8Y5c6lGz6S3MFrMSspUoLmDCvYy7yIKHpB1qgQKLPI6YE09w4dXE_s0HBvIXzXEZGX8kO5iYo3VsSwelIr/s1600/uh-ty-smailik.gif" alt="Смайлик ух-ты" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGSEH7KBMlc_GVY-lhpjQ6vtvLDPipgGmXLQ55_102xFEKQzx8zYIIybxVBdXWESnk_z5F2c9jQpXmmXxMfaHxxzoS3pk-F_i3KqQhZH5U6aYK2YM5mRK67lun2o89YH_I98-IN45uM0Li/s1600/zevota-smailik.gif" alt="Смайлик зевает" width="20" height="20"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOGMdtOCyND3RfiLhIRZd0j5fBaav1paMr82qQ7dNsq1Y-LrsbWPAhITnj4uFSBvClOhVgiFSSRFLH9NarkRujsztDZDwOxrCIes7pITAYx7ohz-n6rbPbDNhDNF7TZuwm2o5r57cytE2O/s1600/strah-smailik.gif" alt="Смайлик боится" width="20" height="21"/>
</td>
</tr>
<tr>
<td>:)</td>
<td>:((</td>
<td>:(</td>
<td>:P</td>
<td>:D</td>
<td>:$</td>
<td>;)</td>
<td>:G</td>
<td>:X</td>
<td>:o</td>
<td>:O</td>
<td>:S</td>
</tr>
</tbody>
</table>
</center>

Изображение смайликов вы можете подобрать самостоятельно, изменив код рисунка, или воспользоваться предложенным мной вариантом.

Похожие статьи:

1. Способы использования гаджета HTML/JavaScript, в том числе оформление меню.
2. Изменяем стиль шрифта лишь в сообщении блога.

____________________________________________________________________________________________________

Поделиться

____________________________________________________________________________________________________

Похожие по тематике статьи :

*

.