Комментарии как на WebMaster-uCoz
827материалов
228тем на форуме
3004комментария
6161пользователь

Комментарии как на WebMaster-uCoz


Описание:

Добрые время суток! По многочисленным просьбам мне в ЛС и на почту я решил поделится видом комментариев как у меня на сайте. Вид комментариев грамотно скомпонован в соответствии с привычным видением комментариев на сайтах. В статичном состоянии отображается аватар, имя автора, дата и время, сам текст комментария, рейтинг и панель модератора для администрации и тем, кому разрешено редактировать и удалять комментарии. Фишка в данных комментариях в том, что:
  • Все социальные иконки находятся над аватаром;
  • При наведении на социальную иконку выскочит подсказка (title), через какую социальную сеть оставлен комментарий;
  • При ответе на комментарий пользователя, ему будет отправляться ЛС об ответе;
  • Современный вид;
  • Используются социальные комментарии от uCoz
Установка:

Для начала устанавливаем стили комментариев (в css):
Код
.comment_inner{margin: 0px 12px; padding: 14px 0px;border-bottom: 1px solid #ececec}          
.comment_avatar{float: left; width: 70px; margin-right: 7px;position: relative;}          
.comment_avatar img{width:70px; height: 70px; margin: 3px 10px 0 0;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}          
.comment-soc{width:29px!important; height:29px!important;border-radius: 0%!important;border:0px!important;}
.comment-soc{position: absolute; right:-3px; top:-5px;}
.ucf-avatar img{width:53px!important; height: 53px!important;-webkit-border-radius: 50%!important; -moz-border-radius: 50%!important; border-radius: 50%!important;}          
.comment_body{padding:0px; margin-left: 60px;}          
.comment_title a{text-decoration:none;color: #0078D7;padding-left:3px;font-size: 15px;font-weight:bold}          
.comment_message{padding: 19px 29px;color:#666; font-size: 15px;}
.comment_message_otvet{padding: 0px 29px;color:#666; font-size: 15px;}
.comment_avatar {display:table-cell;vertical-align:top;width:64px;padding-right:15px}          
.comment_avatar img {border:1px solid #F0F0F0;}          
.comment_date{color: #a9a9a9; font: normal 11px/13px "Tahoma";}          
.comment_addition{padding: 0px 10px; font: bold 11px/13px "Arial","Tahoma";text-align: right;}          
.comment_moder{float:right;}          
.comment_answer a {background: #ffffff;color:#a9a9a9;border: 1px solid;border-color:#a9a9a9;line-height:13px;padding: 5px 10px;display: inline-block;border-radius: 30px;outline: none;font-size: 13px;font-family: 'Open Sans', sans-serif;text-decoration: none;}
.comment_answer a:hover {background: #a9a9a9; border-color: #a9a9a9; color: #ffffff;text-decoration: none;}
.comment_answer a:active {background: #a9a9a9; border-color: #a9a9a9; color: #ffffff;text-decoration: none;}

Далее в шаблоне вид комментариев заменяем все на этот код:
Код
<div class="comment_inner <?if($COMMENT_RATING$ < -2)?>commret<?endif?>">          
<div class="comment_avatar"><?if($NAME$="Анонимно")?><img class="comment-soc" src="http://webmaster-ucoz.ru/w-u/img/social/an.png" title="Анонимный комментарий"><?endif?><?if($SOC_TYPE$)?><img class="comment-soc" src="http://webmaster-ucoz.ru/w-u/img/social/$SOC_TYPE$.png" title="<?if($SOC_TYPE$ = "uid")?>Комментарий оставлен через сайт<?endif?><?if($SOC_TYPE$ = "vk")?>Комментарий оставлен через ВКонтакте<?endif?><?if($SOC_TYPE$ = "fb")?>Комментарий оставлен через Facebook<?endif?><?if($SOC_TYPE$ = "tw")?>Комментарий оставлен через Twitter<?endif?><?if($SOC_TYPE$ = "gp")?>Комментарий оставлен через Google+<?endif?><?if($SOC_TYPE$ = "ok")?>Комментарий оставлен через Одноклассники<?endif?><?if($SOC_TYPE$ = "ya")?>Комментарий оставлен через Яндекс<?endif?>"><?endif?><?if($USER_AVATAR_URL$)?><?if($SOC_LINK$)?><a rel="nofollow" href="$SOC_LINK$" title="$USERNAME$"><img alt="$USERNAME$" src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?endif?>"></a><?else?><a rel="nofollow" href="$PROFILE_URL$" title="$USERNAME$"><img alt="$USERNAME$" src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?endif?>"></a><?endif?>
<?else?><img alt="avatar" src="http://webmaster-ucoz.ru/master/avatar.png"><?endif?>
</div>          
<div class="comment_body">          
<div class="comment_title">
<?if($USERNAME$)?><a href="$PROFILE_URL$"><span><?if($NAME$)?>$NAME$<?else?>Имя неизвестно<?endif?></span> <span style="color:#a9a9a9;font-size:12.5px">@$USERNAME$</span></a><?else?><?if($SOC_LINK$)?><a rel="nofollow" href="$SOC_LINK$"><span>$NAME$</span></a><?else?><span>$NAME$</span><?endif?><?endif?> <span class="timestaaamp comment_date"> $DATE$ $TIME$<a href="#ent$ID$" onclick="prompt('', location.protocol + '//' + location.hostname + location.pathname + '#comEnt$ID$'); if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" name="ent$ID$" style="color:#a9a9a9;font-size:12.5px"><b title="Номер комментария"><sup>$NUMBER$</sup></b></a></span>
<div class="comment_moder">
<?if($GOOD_COMMENT_URL$)?><a href="$GOOD_COMMENT_URL$"><img alt="" src="http://s24.ucoz.net/img/icon/thumbu2.png" title="Хороший комментарий" style="margin: 0 4px;vertical-align: middle;"></a><?endif?>
<?if($COMMENT_RATING$<0)?><b style="color:red" title="Рейтинг комментария">$COMMENT_RATING$</b><?else?><?if($COMMENT_RATING$=0)?><b style="color:gray" title="Рейтинг комментария">0</b><?else?><b style="color:green" title="Рейтинг комментария">+$COMMENT_RATING$</b><?endif?><?endif?>
<?if($BAD_COMMENT_URL$)?><a href="$BAD_COMMENT_URL$"><img alt="" src="http://s24.ucoz.net/img/icon/thumbd2.png" title="Плохой комментарий" style="margin: 0 1px;vertical-align: middle;"></a><?endif?>
<?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?>
</div>
</div>          
<div class="comment_message">$MESSAGE$</div>
<div class="comment_addition">          
<?if($ENTRY_URL$)?><span class="comment_answer"><a href="$ENTRY_URL$">материал</a></span><?endif?>
<span class="comment_answer">
<?if($USER_LOGGED_IN$)?><?if($USERNAME$)?><?if($ANSWER_URL$)?><a href="javascript://" onclick="commNote.openwindow('<?substr($ANSWER_URL$,strrpos($ANSWER_URL$,'{url:')+6,strpos(substr($ANSWER_URL$,strrpos($ANSWER_URL$,'{url:')+7),'}'))?>', '$USERNAME$')">ответить</a><?endif?><?else?><?if($ANSWER_URL$)?><a href="$ANSWER_URL$" onmouseover="$(this).attr('onclick', $(this).attr('onclick').replace('resize:0', 'modal:true,autosize:1,notaskbar:1,fadetype:2,fadespeed:500,fadeclosetype:2,fadeclosespeed:500').replace('-570', '650').replace('-100', '280'))">ответить</a><?endif?><?endif?><?else?><?if($ANSWER_URL$)?><div class="uc-answer-link"><a href="$ANSWER_URL$" onmouseover="$(this).attr('onclick', $(this).attr('onclick').replace('resize:0', 'modal:true,autosize:1,notaskbar:1,fadetype:2,fadespeed:500,fadeclosetype:2,fadeclosespeed:500').replace('-570', '650').replace('-100', '280'))">ответить</a></div><?endif?><?endif?></span>
</span>
</div>
</div></div>

Код
<script type="text/javascript" src="http://webmaster-ucoz.ru/w-u/comm/js/comments_notes.js"></script>

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 15.10.2016 в 07:00
Материал просмотрен: 1473 раза
Категория материала: Авторские скрипты
К материалу оставлено: 13 комментариев

Пожаловаться
Сказать спасибо

13 комментариев


666666
unknown @666666 15.10.2016 07:291
0
Большое спасибо за материал!
Kosten
Kocsten @Kosten 15.10.2016 17:482
+1
Классно смотрятся! like
trem200
Александр @trem200 15.10.2016 23:483
0
То, что нужно для сайтов. Ждём больше авторских материалов на сайте like
StimuL
Геннадий @StimuL 16.10.2016 16:504
0
отлично смотрится ))
Knyaz
очень красиво like
1 2 »
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта