01 февраля 2013

Как разместить в блоге счетчик комментариев

Путем проб и ошибок, я смогла все-таки сделать в своем блоге счетчик комментариев. Пока все еще свежо в памяти, поделюсь с Вами алгоритмом добавления этого достаточно удобного сервиса. Итак начнем:
Шаг 1: Заходим в раздел блога Дизайн. Прежде всего перед любыми действиями, связанными с изменениями HTML кода, необходимо сохранить текущий HTML код, во избежание возможных ошибок. Делается это путем нажатия кнопки в верхнем правом углу рабочего поля Резервное копирование и восстановление.



Шаг 2: нажимаем на кнопку Изменить HTML, поставить галочку  

Шаг 3: С помощью кнопок Ctrl+F  ищем часть кода   ]]></b:skin> и перед ним в разделе шаблона добавляем новую часть кода:

.comments-button { 
width : 48px; 
height : 48px; 
background : no-repeat; 
float : right; 
font-size : 18px; 
margin-top : -15px; 
margin-right : 2px; 
text-align : center; 
padding-top:10px; 
}

ВНИМАНИЕ: если Вы хотите, чтобы счетчик был оформлен в так называемое "облочко" или "рамочку", то части кода background : no-repeat;  нужно внести изменения и заменить данный код например на такой (как у меня):

background : url(http://3.bp.blogspot.com/_vLeiVavkV_M/TRqeSsZYiYI/AAAAAAAADw0/NKcU4q-Vbq4/s200/comment-counter-bubble.png) no-repeat;
или например такой
bubble comment count, bubble blogger postshttp://1.bp.blogspot.com/-xfo0SsfkT4c/T4x88yABusI/AAAAAAAAAJs/xnI6JuTFaI4/s1600/4.png
blogger comments, comment counthttp://3.bp.blogspot.com/-6WDOT8ar2PY/T4x89QkCk3I/AAAAAAAAAJw/5BO-Xew0a1Y/s1600/2.png
blogger blogspot, blogger commentshttp://3.bp.blogspot.com/-i4hLcZ6iNTo/T4x896QUZXI/AAAAAAAAAJ4/1uquwhIfKUg/s1600/3.png
blogger bubble comment counthttp://1.bp.blogspot.com/-x4vNbDrKefM/T4x8_B03K-I/AAAAAAAAAKE/LFAne_Cfddg/s1600/blue+2.png
comments in blogger titleshttp://1.bp.blogspot.com/-6eXXeRC0Jtk/T4x8_1mb3II/AAAAAAAAAKI/5I4QHXPYmWM/s1600/blue.png
blogger widgets, bubble comment count http://2.bp.blogspot.com/-8x8Jk0pky3g/T4x9A2mb5uI/AAAAAAAAAKY/bcRjXbN2Sks/s1600/cloud.png
blogger tips, blogger tricks http://2.bp.blogspot.com/-SCwcWLedHn8/T4x9AMfNwFI/AAAAAAAAAKQ/65_qPzjgwJw/s1600/cloud+bubble.png
bubble comment count http://1.bp.blogspot.com/-Vi3aHSeUakk/T4x9BI0dnvI/AAAAAAAAAKk/33ADIy2xtSc/s1600/comment+1.png
Bubble Comment Count http://2.bp.blogspot.com/-4u-ZDsUVkA0/T4x9CgDJjsI/AAAAAAAAAKo/0ZwY3lQGHQ0/s1600/comment+bubble.png
Bubble Comment Count, blogger blogspot http://4.bp.blogspot.com/-_gqhvhmUEjk/T4x9CyFJkNI/AAAAAAAAAKw/MCiVb3WrcJA/s1600/devil+comment+bubble.png
 http://3.bp.blogspot.com/-t2H-mZFFl3Y/T4x9DWM6wpI/AAAAAAAAAK4/h-e4v1Jz4PY/s1600/funny+comment.png
 http://2.bp.blogspot.com/-eh1c2IJfz7w/T4x9EaOsY_I/AAAAAAAAALA/5GhAU2TbZRs/s1600/pink+bubble+icon.png
 http://2.bp.blogspot.com/-7FFIKA34Kvw/T4x9E0RmA0I/AAAAAAAAALI/03AG305CesI/s1600/speech+bubble+green.png
 http://3.bp.blogspot.com/-VUzYUHeMr9A/T4x_6ddRwNI/AAAAAAAAB14/zMBy66dPc_Q/s1600/bubble+comment.png
 http://3.bp.blogspot.com/-UgpSGm_aQtY/T4x_94j1VSI/AAAAAAAAB2I/u0AVc8s-HVU/s1600/comment+bubble3.png
 http://2.bp.blogspot.com/-WkSXY-eDUIU/T4x_-4FPdYI/AAAAAAAAB2Q/dsDlXawYSmk/s1600/comment+bubble4.png
 http://4.bp.blogspot.com/-AAYKJhdfG3w/T4yBGL5nehI/AAAAAAAAB2Y/HsQpBecKvf8/s1600/comment_bubble.png
  http://1.bp.blogspot.com/-g34ZwqIE7bw/T4yBJMyKrDI/AAAAAAAAB2g/fz0Ilonq-pA/s1600/text_comment_bubble_comments.png

Шаг 4: Далее также с помощью кнопок Ctrl+F  ищем часть кода:
<b:includable id='post' var='post'> 
<div class='post hentry uncustomized-post-template'> 
<a expr:name='data:post.id'/> 
<b:if cond='data:post.title'> 
<h3 class='post-title entry-title'> 
<b:if cond='data:post.link'> 
<a expr:href='data:post.link'><data:post.title/></a>
и вставляем в него новый код 

<b:if cond='data:post.allowComments'> 
<a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a> 
</b:if>

следующим образом

<b:includable id='post' var='post'> 
<div class='post hentry uncustomized-post-template'> 
<a expr:name='data:post.id'/> 
<b:if cond='data:post.title'> 
<h3 class='post-title entry-title'> 

<b:if cond='data:post.allowComments'> 
<a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a> 
</b:if> 

<b:if cond='data:post.link'> 
<a expr:href='data:post.link'><data:post.title/></a>

Шаг 5: Нажимаем на кнопку Просмотр, чтобы проверить работает ли блог после внесенных изменений. Если все в порядке, то нажимаем на кнопку Сохранить и Закрыть окно. 

Комментариев нет:

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

Предлагаю продолжить историю или написать свою.