К основному контенту

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


Иногда хочется как-то приукрасить свой блог, сделать его ярче и интереснее. Но начинать надо, как говорится с мелочей. Поэтому давайте коснемся такой важной составляющей вашего блога как раздел комментарии. Итак, хочу сразу оговориться,  что при написании этого поста, я опирался на материалы блога shpargalkablog, в котором собрано довольно много полезных советов. Все действия необходимо выполнять, только после того, как вы сохраните свою старую версию шаблона. Мы постоянно будем искать разные коды (отмечены красным цветом), поэтому советую их находить комбинацией клавиш Ctrl+F. Работаем только в редакторе HTML! Если все понятно, то приступим!
Для начала давайте избавимся от укороченного слова "0 коммент.", а вернее преобразуем его в полноценное, дабы не было ущербности!

  1. Находим заголовок H4, в который входит такая строчка как <b:if cond='data:post.numComments == 1'>
  2. Выделяем следующий код:
<b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
  1. И заменяем его на этот:
<b:if cond='data:post.numComments == 0'>
 Нет комментариев.
<b:else/>
<b:if cond='data:post.numComments &gt; 20'>
 <data:post.numComments/> <script>
     if(<data:post.numComments/> / 10 % 10 == 1) document.write(&quot;комментариев&quot;); else
        switch(<data:post.numComments/> % 10){
 case 1: document.write(&quot;комментарий&quot;); break;
 case 2:
 case 3:
 case 4: document.write(&quot;комментария&quot;); break;
          default: document.write(&quot;комментариев&quot;);
        }
 </script><noscript><data:commentLabelPlural/></noscript>
<b:else/>
<b:if cond='data:post.numComments == 1'>
 <data:post.numComments/> комментарий
<b:else/>
<b:if cond='data:post.numComments &lt; 5'>
 <data:post.numComments/> комментария
<b:else/>
 <data:post.numComments/> комментариев
</b:if></b:if></b:if></b:if>
Убираем слово "Комментирует..."

Находим следующий код <data:commentPostedByMsg/> Удаляем его и смотрим результат!

Чередование фона в комментариях
  1. Находим и выделяем следующий код:
<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>
  1. И меняем его на этот:
<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>
  1. Находим строку ]]></b:skin> и перед ней вставляем:
.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;
}
  1. Ищем строчку <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>
Смайлики в комментариях
  1. Ищем тег <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/AVvXsEg-1LJY1B1zb5B1QplAtWDKaMCIv0kSzSTyk1mwne9M7RMmCwYhfKlXYHIk4XqYLVvbzF37ldA5BG3orDj-KqXfkkNeDdSpeIP-WPi2vVd7aDhQgm9a-9v0JhS8SpoTbANH9bvHvvjzleNg/s1600/ulybka-smailik.gif" alt="Смайлик улыбка" width="21" height="21" />');
// :((
whichText = whichText.replace(/:\(\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Otx9N6NN8Kmsi9t5DkVLMGkiGm0Ik3w4wD24xr093iJ483Sx-5R2imS2qLKDs-SyfWsZLHfXkrgKWHmBiszDDZETPikaIoVEr-g02hqaIVmkpNuz4n8qmvcKTXRg9vOFkb0psFLOA8Rm/s1600/plach-smailik.gif" alt="Смайлик плачущий" width="20" height="21" />');
// :( 
whichText = whichText.replace(/:\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_QlfI-UjTdEcUOefhJVmI0uxskKUORZRjEfB1Myl-8CyGdNwPShzbZouy9Zwy3tQBe_L2zvLU_3CRji4Vr4LUSeLS2vJoNWI9SFyXDOjdY5hb3t1sV6p192vobUSOcoE_S169CNgOBjP-/s1600/nikak-smailik.gif" alt="Смайлик никак" width="20" height="21" />');
// :P 
whichText = whichText.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkAw-3RTEOOL5hILkud3lihSXTlU199ylYHTE9sI9kzN9RouacRRz7aZgNFoIRnkkzg_5gnPnlB5NybtIOTSsl_BixdUrpoFIfiqzPGpE3d0CdXzROZuONK4WHBfpJZ-SiUx6HdK6Wev5n/s1600/yazyk-smailik.gif" alt="Смайлик показывает язык" width="20" height="21" />');
// :D
whichText = whichText.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR_xT04Tj8Z-sb7A8NtbAA1LZHeiX0-v5f9XlO_afT_2YSZYePAz2ajQWSWDvqTU0uI8KALpZEwY9bTwhcMXJtqYY-DeY8VVmNOHFggq8DTJGrMvHUL01y4Id759mqVURyTifmh-7bH2yO/s1600/smeh-smailik.gif" alt="Смайлик смех" width="20" height="21" />');
// :$ 
whichText = whichText.replace(/:\$/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn1shPZJV8Y3RDaAWYBOSe91BlpX6ZVsZuB5Ht4mbHYYK_dFaePn96e__JsDs_AcFdIB59z-sU9Pnv1MF7UeyEj2XxhhyphenhyphengJdMeQkFR1TB_i6EfmiOhBqG2MRSI52L_79ePivPpHMcSU-PD/s1600/stesnitelnost-smailik.gif" alt="Смайлик стеснительный" width="20" height="21" />');
// ;) 
whichText = whichText.replace(/;\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifzRguuT5m2bYJ_J5N7DBJ6zC9Zmuvnp6LruDdSGtmJJEhJDO5PPtL1U-ovOkVkag5OP-KNQnwQ6gplPzd4oqDJEhcriOdsExM6Yh5M9Z4J7cFRHvHcc8aQOXGyfvEpleLKD0U9eONF1vF/s1600/podmignut-smailik.gif" alt="Смайлик подмигивает" width="20" height="21" />');
// :G
whichText = whichText.replace(/:\G/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VNPD7JL4M-PPFEFM4X8b1wORjmR58HDvQbtfd8iLiP_3wMTlLg7crm3zVStlJqNn7ck7x-hfJInG6S-tDchOGNNkJShY7sfwtltIRchaUGQJfRBk04w4PE0lKoDWKb-0SQYHtfpa-FRE/s1600/kukish-smailik.gif" alt="Смайлик кукиш" width="18" height="18" />');
// :X
whichText = whichText.replace(/:\X/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmUhfMuzBjdn9XFdPdmwbD-jM7Fe16iKMiOoMAbmEUrTHHreT2NjdMmYw4IpL4U220tv_sVIvaT_-wbOLdnR0wRqHIFED6jOAbj234NjIkZTg33AXg1QK4jVTJZnTsNnZbrbKSHO7YaPrj/s1600/net-smailik.gif" alt="Смайлик не согласен" width="20" height="21" />');
// :o 
whichText = whichText.replace(/:\o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4SB7B7oyKimx6izFAQTFbFly8TeTGmdKT5LnY0mVRVIzXLAmlNeN5tyUEkO2jsrYCYQ4epyhQk9m2q38w92z4qUYLQDV4lleU73bmSgXTBNVi-KQ8-LpCmA1j1ddRaCK5uFjuImPqtnlw/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/AVvXsEgDHlXXa8dDOyTuZpjExRjr-0suFFkVT79zNfsHT_M14wWIsuRWFvC0P0jUJ2PfP0YElGjPQUhD5uSU8oiKmwhAiMSglWPwUendIDK85gZQEsSuSAAz_3PCFJ3gv8r5xtt9YWe-wFt9Gq_M/s1600/zevota-smailik.gif" alt="Смайлик зевает" width="20" height="20" />');
// :S
whichText = whichText.replace(/:S/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigzPfmP6ICt-rFH5lTSVca7grH59uwZYjyGuQbEQYRImS8PFG4x6yGnMgoVMWLOAgiFln4K4-ZPk5oonndZ-3jLD9dGo2gWNBnMsARFdcL_0O_oD_6SuWvw2RxptQA-09e2wxtDDFDhwRq/s1600/strah-smailik.gif" alt="Смайлик боится" width="20" height="21" />');
bodyText.innerHTML = whichText;
}
//]]>
</script>
</b:if>
  1. Находим следующий код по первой строчке:
<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> 
  1. После второй найденной строчки <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/AVvXsEg-1LJY1B1zb5B1QplAtWDKaMCIv0kSzSTyk1mwne9M7RMmCwYhfKlXYHIk4XqYLVvbzF37ldA5BG3orDj-KqXfkkNeDdSpeIP-WPi2vVd7aDhQgm9a-9v0JhS8SpoTbANH9bvHvvjzleNg/s1600/ulybka-smailik.gif" alt="Смайлик улыбка" width="21" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Otx9N6NN8Kmsi9t5DkVLMGkiGm0Ik3w4wD24xr093iJ483Sx-5R2imS2qLKDs-SyfWsZLHfXkrgKWHmBiszDDZETPikaIoVEr-g02hqaIVmkpNuz4n8qmvcKTXRg9vOFkb0psFLOA8Rm/s1600/plach-smailik.gif" alt="Смайлик плачущий" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_QlfI-UjTdEcUOefhJVmI0uxskKUORZRjEfB1Myl-8CyGdNwPShzbZouy9Zwy3tQBe_L2zvLU_3CRji4Vr4LUSeLS2vJoNWI9SFyXDOjdY5hb3t1sV6p192vobUSOcoE_S169CNgOBjP-/s1600/nikak-smailik.gif" alt="Смайлик никак" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkAw-3RTEOOL5hILkud3lihSXTlU199ylYHTE9sI9kzN9RouacRRz7aZgNFoIRnkkzg_5gnPnlB5NybtIOTSsl_BixdUrpoFIfiqzPGpE3d0CdXzROZuONK4WHBfpJZ-SiUx6HdK6Wev5n/s1600/yazyk-smailik.gif" alt="Смайлик показывает язык" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR_xT04Tj8Z-sb7A8NtbAA1LZHeiX0-v5f9XlO_afT_2YSZYePAz2ajQWSWDvqTU0uI8KALpZEwY9bTwhcMXJtqYY-DeY8VVmNOHFggq8DTJGrMvHUL01y4Id759mqVURyTifmh-7bH2yO/s1600/smeh-smailik.gif" alt="Смайлик смех" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn1shPZJV8Y3RDaAWYBOSe91BlpX6ZVsZuB5Ht4mbHYYK_dFaePn96e__JsDs_AcFdIB59z-sU9Pnv1MF7UeyEj2XxhhyphenhyphengJdMeQkFR1TB_i6EfmiOhBqG2MRSI52L_79ePivPpHMcSU-PD/s1600/stesnitelnost-smailik.gif" alt="Смайлик стеснительный" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifzRguuT5m2bYJ_J5N7DBJ6zC9Zmuvnp6LruDdSGtmJJEhJDO5PPtL1U-ovOkVkag5OP-KNQnwQ6gplPzd4oqDJEhcriOdsExM6Yh5M9Z4J7cFRHvHcc8aQOXGyfvEpleLKD0U9eONF1vF/s1600/podmignut-smailik.gif" alt="Смайлик подмигивает" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VNPD7JL4M-PPFEFM4X8b1wORjmR58HDvQbtfd8iLiP_3wMTlLg7crm3zVStlJqNn7ck7x-hfJInG6S-tDchOGNNkJShY7sfwtltIRchaUGQJfRBk04w4PE0lKoDWKb-0SQYHtfpa-FRE/s1600/kukish-smailik.gif" alt="Смайлик кукиш" width="18" height="18"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmUhfMuzBjdn9XFdPdmwbD-jM7Fe16iKMiOoMAbmEUrTHHreT2NjdMmYw4IpL4U220tv_sVIvaT_-wbOLdnR0wRqHIFED6jOAbj234NjIkZTg33AXg1QK4jVTJZnTsNnZbrbKSHO7YaPrj/s1600/net-smailik.gif" alt="Смайлик не согласен" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4SB7B7oyKimx6izFAQTFbFly8TeTGmdKT5LnY0mVRVIzXLAmlNeN5tyUEkO2jsrYCYQ4epyhQk9m2q38w92z4qUYLQDV4lleU73bmSgXTBNVi-KQ8-LpCmA1j1ddRaCK5uFjuImPqtnlw/s1600/uh-ty-smailik.gif" alt="Смайлик ух-ты" width="20" height="21"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDHlXXa8dDOyTuZpjExRjr-0suFFkVT79zNfsHT_M14wWIsuRWFvC0P0jUJ2PfP0YElGjPQUhD5uSU8oiKmwhAiMSglWPwUendIDK85gZQEsSuSAAz_3PCFJ3gv8r5xtt9YWe-wFt9Gq_M/s1600/zevota-smailik.gif" alt="Смайлик зевает" width="20" height="20"/>
</td>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigzPfmP6ICt-rFH5lTSVca7grH59uwZYjyGuQbEQYRImS8PFG4x6yGnMgoVMWLOAgiFln4K4-ZPk5oonndZ-3jLD9dGo2gWNBnMsARFdcL_0O_oD_6SuWvw2RxptQA-09e2wxtDDFDhwRq/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>
Если что-то непонятно, пишите в комментариях!

Ярлыки

Ярлыки:

Комментарии

Отправить комментарий

А что думаете об этом вы?

Популярные сообщения из этого блога

Расширения для изменения масштаба веб-страницы

Иногда, разработчики сайтов забывают, что у некоторых проблемы со зрением и их 10-12 шрифт таким людям довольно тяжело читать! На эту проблему, в браузере Opera, есть встроенная возможность, представляющая из себя ползунок, перетаскивая который, можно изменить масштаб страницы. Похожее на это реализовано и по дефолту в Chrome, но с той лишь разницей, что приходится использовать комбинацию клавиш: для увеличения Ctrl++, а для уменьшения Ctrl+-. Некоторым пользователям такой вариант не по душе. Поэтому предлагаю на ваш выбор несколько расширений, одно из которых идентично возможности в Opera. Итак, поехали!
2 комментария
Подробнее »

Сравниваем Яндекс.Браузер и Google Chrome на Android

Сравнительно недавно вышел мобильный браузер от Yandex . И правда, почему у всех он есть, а русского поисковика нет? Так решило их руководство и перенесла свои настольные задумки на экраны Android смартфонов и iOS устройств. Но стоит ли изменять официальному приложению Chrome этими женскими "стрингами"? Давайте разбираться...
Отправить комментарий
Подробнее »

Как сделать два ярлыка и два разных профиля в Chrome

Наверняка вы уже знаете, что разработчики Google Chrome добавили в 16 стабильную версию мультипрофильность! Это значит, что каждый член семьи сможет пользоваться браузером со своими личными настройками и предпочтениями в ту или иную сторону. Нужно просто создать "Нового пользователя" в настройках браузера и переключаться на тот или иной псевдоним с персональным аватаром. А хотите сделать так, чтобы у каждого пользователя был не только персональный профиль, но и собственный ярлык Chrome? Ответ под катом!
Отправить комментарий
Подробнее »