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

Комментарии 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="http://1.bp.blogspot.com/_ebKrCj8TLPk/TMnm7TKHnKI/AAAAAAAAA24/_L_TrXMahGY/s1600/ulybka-smailik.gif" alt="Смайлик улыбка" width="21" height="21" />');
// :((
whichText = whichText.replace(/:\(\(/g,'<img src="http://4.bp.blogspot.com/_ebKrCj8TLPk/TMnmsaql89I/AAAAAAAAA2g/Xu52tC0EY24/s1600/plach-smailik.gif" alt="Смайлик плачущий" width="20" height="21" />');
// :( 
whichText = whichText.replace(/:\(/g,'<img src="http://1.bp.blogspot.com/_ebKrCj8TLPk/TMnmpJVr9SI/AAAAAAAAA2c/6eDbGpcjUHA/s1600/nikak-smailik.gif" alt="Смайлик никак" width="20" height="21" />');
// :P 
whichText = whichText.replace(/:\P/g,'<img src="http://2.bp.blogspot.com/_ebKrCj8TLPk/TMnm9_h_26I/AAAAAAAAA28/vKO07LvtFQg/s1600/yazyk-smailik.gif" alt="Смайлик показывает язык" width="20" height="21" />');
// :D
whichText = whichText.replace(/:D/g,'<img src="http://3.bp.blogspot.com/_ebKrCj8TLPk/TMnmxI26O4I/AAAAAAAAA2o/Oj77qBA_Jvo/s1600/smeh-smailik.gif" alt="Смайлик смех" width="20" height="21" />');
// :$ 
whichText = whichText.replace(/:\$/g,'<img src="http://4.bp.blogspot.com/_ebKrCj8TLPk/TMnm09QF7nI/AAAAAAAAA2s/hNLG5Uzui9Y/s1600/stesnitelnost-smailik.gif" alt="Смайлик стеснительный" width="20" height="21" />');
// ;) 
whichText = whichText.replace(/;\)/g,'<img src="http://2.bp.blogspot.com/_ebKrCj8TLPk/TMnmvZ7w_HI/AAAAAAAAA2k/Dz7p2b5PSBQ/s1600/podmignut-smailik.gif" alt="Смайлик подмигивает" width="20" height="21" />');
// :G
whichText = whichText.replace(/:\G/g,'<img src="http://1.bp.blogspot.com/_ebKrCj8TLPk/TMnmjZWnFDI/AAAAAAAAA2U/YSYbRBCU4rU/s1600/kukish-smailik.gif" alt="Смайлик кукиш" width="18" height="18" />');
// :X
whichText = whichText.replace(/:\X/g,'<img src="http://4.bp.blogspot.com/_ebKrCj8TLPk/TMnmmgaFBiI/AAAAAAAAA2Y/yrN5t2xxMqw/s1600/net-smailik.gif" alt="Смайлик не согласен" width="20" height="21" />');
// :o 
whichText = whichText.replace(/:\o/g,'<img src="http://2.bp.blogspot.com/_ebKrCj8TLPk/TMnm5k0iz7I/AAAAAAAAA20/hYRgY7uphAU/s1600/uh-ty-smailik.gif" alt="Смайлик ух-ты" width="20" height="21" />');
// :O 
whichText = whichText.replace(/:\O/g,'<img src="http://2.bp.blogspot.com/_ebKrCj8TLPk/TMnm_8ZLDwI/AAAAAAAAA3A/2xIw0CS57JE/s1600/zevota-smailik.gif" alt="Смайлик зевает" width="20" height="20" />');
// :S
whichText = whichText.replace(/:S/g,'<img src="http://2.bp.blogspot.com/_ebKrCj8TLPk/TMnm3TRlDQI/AAAAAAAAA2w/7TYq9OJ2K0w/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="http://1.bp.blogspot.com/_ebKrCj8TLPk/TMnm7TKHnKI/AAAAAAAAA24/_L_TrXMahGY/s1600/ulybka-smailik.gif" alt="Смайлик улыбка" width="21" height="21"/>
</td>
<td>
<img src="http://4.bp.blogspot.com/_ebKrCj8TLPk/TMnmsaql89I/AAAAAAAAA2g/Xu52tC0EY24/s1600/plach-smailik.gif" alt="Смайлик плачущий" width="20" height="21"/>
</td>
<td>
<img src="http://1.bp.blogspot.com/_ebKrCj8TLPk/TMnmpJVr9SI/AAAAAAAAA2c/6eDbGpcjUHA/s1600/nikak-smailik.gif" alt="Смайлик никак" width="20" height="21"/>
</td>
<td>
<img src="http://2.bp.blogspot.com/_ebKrCj8TLPk/TMnm9_h_26I/AAAAAAAAA28/vKO07LvtFQg/s1600/yazyk-smailik.gif" alt="Смайлик показывает язык" width="20" height="21"/>
</td>
<td>
<img src="http://3.bp.blogspot.com/_ebKrCj8TLPk/TMnmxI26O4I/AAAAAAAAA2o/Oj77qBA_Jvo/s1600/smeh-smailik.gif" alt="Смайлик смех" width="20" height="21"/>
</td>
<td>
<img src="http://4.bp.blogspot.com/_ebKrCj8TLPk/TMnm09QF7nI/AAAAAAAAA2s/hNLG5Uzui9Y/s1600/stesnitelnost-smailik.gif" alt="Смайлик стеснительный" width="20" height="21"/>
</td>
<td>
<img src="http://2.bp.blogspot.com/_ebKrCj8TLPk/TMnmvZ7w_HI/AAAAAAAAA2k/Dz7p2b5PSBQ/s1600/podmignut-smailik.gif" alt="Смайлик подмигивает" width="20" height="21"/>
</td>
<td>
<img src="http://1.bp.blogspot.com/_ebKrCj8TLPk/TMnmjZWnFDI/AAAAAAAAA2U/YSYbRBCU4rU/s1600/kukish-smailik.gif" alt="Смайлик кукиш" width="18" height="18"/>
</td>
<td>
<img src="http://4.bp.blogspot.com/_ebKrCj8TLPk/TMnmmgaFBiI/AAAAAAAAA2Y/yrN5t2xxMqw/s1600/net-smailik.gif" alt="Смайлик не согласен" width="20" height="21"/>
</td>
<td>
<img src="http://2.bp.blogspot.com/_ebKrCj8TLPk/TMnm5k0iz7I/AAAAAAAAA20/hYRgY7uphAU/s1600/uh-ty-smailik.gif" alt="Смайлик ух-ты" width="20" height="21"/>
</td>
<td>
<img src="http://2.bp.blogspot.com/_ebKrCj8TLPk/TMnm_8ZLDwI/AAAAAAAAA3A/2xIw0CS57JE/s1600/zevota-smailik.gif" alt="Смайлик зевает" width="20" height="20"/>
</td>
<td>
<img src="http://2.bp.blogspot.com/_ebKrCj8TLPk/TMnm3TRlDQI/AAAAAAAAA2w/7TYq9OJ2K0w/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>
Если что-то непонятно, пишите в комментариях!

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

Как запретить открывать Chrome новые окна

Иногда просто неприятно, когда вместо новой вкладки, при клике по ссылки, открывается не пойми какое окно без адекватной адресной строки, да еще и не на весь экран. В таком окне может быть что угодно, от простой рекламы, до обычного видео ролика. Кстати, вот вам простой пример: если у вас есть бог на платформе blogger.com, то вы наверняка обращали внимание, что если мы начнем добавлять новые гаджеты, то у нас тот час же откроется новое маленькое окно Chrome. Это скорее всего обусловлено тем, что в таких вот ссылках прописаны HTML коды  target=”_new”, ну или что-то в этом роде. Как прекратить такое безобразие в нашем любимом браузере Chrome? Давайте попробуем разобраться...

Расширение FVD Speed Dial - экспресс-панель для Chrome

Все уже привыкли, что есть мега крутое расширение для установки в "Новой пустой вкладки" Экспресс-панели аля Opera. Имя его - Speed Dial 2. Но есть и достойные альтернативы. Например советую присмотреться к FVD Speed Dial...

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

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