Регистрация    Войти
Авторизация

Новый вид комментариев для uCoz

Новый вид комментариев для uCozНовый вид комментариев для 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="/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>

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  15-10-2016, 11:10   Просмотров: 929   
Новый вид комментариев, вид комментариев, вид комментариев ucoz
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.