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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFtC0WxCO-zN9RURSBeAqH0Hydp82ntXLzqODtM5dA89fUpVvewuMJACli_FFw82nm3KTIpMZY_Mcuipt3J4Fea-gmbOB5q9_7UPhkS9PZ_jnEPS0OvynwDNkFE3oT40XTQ6lyHvZdgQ-1/s200/comment-counter-bubble.png) no-repeat;
или например такой
bubble comment count, bubble blogger postshttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOzVlalWecH11qJLqNETmVw-KgIYcXBzV37s4x1f6wFk7oCEmmx2NX-Ws5cGH-LfMbwmQeeuqp2c_hoVmdTeszB46NUuZtcn0GWAneeENgvdU8Zx0hvns1OR_L6-g_pAt6GHSBkLkBZCcP/s1600/4.png
blogger comments, comment counthttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYfHREViArKvM7MnJ4TWi-cL4PYj3zyOyDEtRQK3-CKMbBDNtXc6d0dlkPauk0CQfZg7CC038lKmt3a3KV03WamvmgJ6AQaxIiMfxjd5oOE66jbibZq7TgBmT4wyFngpEKvQcKS4CN0zBr/s1600/2.png
blogger blogspot, blogger commentshttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDv_dDcBrd21jLOyDk-4YqngeQ2u78TDk7rG8k-0UxQKE4GvJr1lT-axMHKrjLSs91QdX0YhuLRb_Jl8zJI7TPMneMNY_mN5DHgwB9aTtLBK_1OYMuIvA-KgHIIApr6_kiBFQhMXfB61zf/s1600/3.png
blogger bubble comment counthttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJXvW5sPcoJNDiGxgvQBzOBmW_nBEOAAYMBokKrozC5BIFyHsvSGL2ViHx8slXBG3ah5Zt8HZO7fzL4E9sXzEGb5dRq4cBLqdchtY4NH-3YQJaTBJIus-JfYiHmj86whJVMbj1EwXopABJ/s1600/blue+2.png
comments in blogger titleshttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTcFOCF2fJQDAZ1XlZE2t-rP5ap_toZetSkM3bkSq-ylL3oEaJnKTqo3I0Y8QjXWBTOTKOsVINEZ3RehHOhUkkAVapHhsupthW8xWNTcPIm_4fA1JhSneVC7203Iz47Wx8FvJuonvlP1n3/s1600/blue.png
blogger widgets, bubble comment count https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxM63YEkJABt14navwRV36U-dPyjfWj4cLxrEeCGGcfa1Y4fEVplGgwRCDdxGGF1aHIfhtkgr4tY1XBjikzpsgQSUAPIaiEyE8MKU0OsCZhd4Ch0cxiI57WoLCfN7i1FRj1aeUkfgEj8l6/s1600/cloud.png
blogger tips, blogger tricks https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhocD3SJshoNrGfG0ZYahI98PfIlrd8jTjJZOI3NXS8SHdCD2AEZpvu9ayeQn7fRV5ted-XvmJGU-prltMctpG16DMlvwIKe-OrsHxa-Al9FAiyPExPHMguA8i-GVUP5ppBdcxxvSgcreyV/s1600/cloud+bubble.png
bubble comment count https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixdt6tFDMCnvnsTgxAp1_foqAquTtw1Joi5Rrq-QCffquiZm1qlRsV9ukVTcHryrTYAO69FtJvcVVoU3MlFeDj4IRLqdrN0aGcPgkXw7EvSSaRhGpWE19kH8mHbFreTWuS2Fa4T6uJWm6k/s1600/comment+1.png
Bubble Comment Count https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRc-ucl3LEFaqnGITTSLgrdWxfFXvU10KO7wj37KbBye-erUVovF7qyNTVU0ti_sv4zQaTfovPX_FVTtEd9grC08LbhECuJJMlIuYNcFc8BLjCMTH1eKsc5EnVc7AwHAvUbjqSrrLNLweh/s1600/comment+bubble.png
Bubble Comment Count, blogger blogspot https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj_mhL1HS4cpE4DIxeovWbmMTSihlF27UNKE9iXaMXOdseNwYbJevi6AqTh5y8l9jtjoFAcVf7ae5vbsjtkvQIfgyPAhtIR1fKPEajop-7KRKyJd-K8smiIp4blPLWyx_eLRoJ9NXUwU_P/s1600/devil+comment+bubble.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTi0zfk6LIjtkyHWfL8O3wBKAcWah31W1HtkAGhOGCSv4_gPPQItSQ6_vBbSX7BZg6bpg3ABE_kcFdrfu0D_glZ99yQQKMzVcAeqdRDutu6iGgKDiDU-xTOSWmNps11EqQXJHMpLNVb21C/s1600/funny+comment.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi82MkFJkbA1gMec22T3sPOc95q0rprgWPj7xUkYu6haLx_2RzrnXZvR6au-pivzg9DmPDIyJEe3Wncl6v663lhNczID7NmH-qL17Y32-FpCWz3jki4FIn6RTfntBd_sZwts0lQ4Ei-nHrP/s1600/pink+bubble+icon.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOCBbmF1WLgND_zNfJL7Rz8Iqo5qVoboVwOTp4KykP68GFIdSYW4pABW_Z2pYTW9eV8hOEGJko-gvOIl4q1XBMwJSUdLMxN7nBsIBqISGLHrbRPEZCbxAI0d7slt69YMKaKb1JcE34lBMu/s1600/speech+bubble+green.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvsfWHC8vaNZCzOT3hBz449ugK6_P-Bz8O2l0Wy84tyQhQTLs-x3TQkG6EfGl91fHCMSDtPBpt3vPlfr7h1KBgdxROi09rcVWa7WFR-Sf8dwJ-l4Q8hwph7MlDOv-tw2IxMjqlojXml8F/s1600/bubble+comment.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvCcWIOu1k9F8ZaWmYJ4yYmL_u5lf7Fmb22gztIRfw6ykqdQduDJoqFkaOsGgIv1d5y1imCQQlHflbLDszMw6mYoSSj6Ofe7IWbhD4jgJxK-G6cVvk7inY1u4BfrylwRDT8vGm1kzd5P0n/s1600/comment+bubble3.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib1I7hDNS8KuVcTfHx9zYQiDCNGNFhYnq8fpife_GAsYILbRKB-s-9CgsZHP6P5Y8Osz6g8B_rG65cQdJpwEaxkyEEGnIyx43x6cn34H-HmConbYR0NSrGTMZiUgkb_KjP28JAi26XY5PY/s1600/comment+bubble4.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc6j98mfonRtXyxK4Qcp-xPTv1ln-21MWD0lR8VuIOLG3IEREp51WH3S2kIUBVSyoR0WkqSH2zu-lMW_WmJ6MS4nfPJiYKJ5o-t7OkA1XyXGteI9mNTP7Ng3t3mi_B3ggze4xyOZUuC5f9/s1600/comment_bubble.png
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcplPZLo74zoFdHMhIsSiDPeUW_fIBBW3rboE0feXd5724ySC6EZSbmsp4GnDdvWsuH_Z1YFOzuqvDdS2gcaKq5-BiKkXYb11T3hWktz26ID2ZDAoPjbNsrm_hd6ipirfceieAFVCd1ECl/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: Нажимаем на кнопку Просмотр, чтобы проверить работает ли блог после внесенных изменений. Если все в порядке, то нажимаем на кнопку Сохранить и Закрыть окно. 

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

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

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