Каталог файлов
Красивый и одновременно простой вид комментариев для uCoz

Рейтинг:5.0
Категория: Скрипты для Ucoz
 


Красивый и одновременно простой вид комментариев. Убедитесь вы этому после того как установите его себе на сайт, так что дерзайте.

Переходим к установке:

И так для начало нам следует удалить старый html код вида комментарий, для этого идём в Админ панель => Дизайн => Управление дизайном => Комментарии => Вид комментариев и устанавливаем следующий код:

Code
<div class="cell_comment_os">  
<div class="comment_p ">  
<?if($USER_AVATAR_URL$)?>  
<a href="$PROFILE_URL$">  
<img class="comment_avatar" src="$USER_AVATAR_URL$" />  
<?else?>  
<img src="http://novi4ok.ru/images/noavatar.png" class="comment_avatar" alt="аватар отсутствует" />  
<?endif?></a>  
</div>  

  <div class="comment_v grey">  
  <a href="#ent$ID$" onclick="if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" name="ent$ID$"><strong>$NUMBER$</strong></a> |  
  <strong class="gren"><?if($USERNAME$)?>$USERNAME$ <?else?>$NAME$<?endif?></strong> пишет: | $DATE$ | $TIME$ <?if($MODER_PANEL$ && $EMAIL$)?><a href="$EMAIL_JS$" title="Email"> ( E-mail )</a><?endif?>  
  <span class="right">$MODER_PANEL$</span>  
  <?if($ENTRY_URL$)?><a class="right" href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Страница с комментарием </a>|<?endif?>  
  </div>  

  <div class="comment_c text_11">  
  $MESSAGE$  
  <?if($ANSWER$)?><p class="vcc_otvet"><strong>Ответ</strong>: $ANSWER$<p><?endif?>  
  </div>  

  <div class="comment_n grey text_9">  
  <?if($ANSWER_URL$)?><a href="$ANSWER_URL$">Ответить</a> |<?endif?>  

<?if($GOOD_COMMENT_URL$)?>  
<a href="$GOOD_COMMENT_URL$"><img src="http://novi4ok.ru/images/rat/plus_01.gif" alt="+" title="Хороший пост"/></a>  
<span class="post_r">($COMMENT_RATING$)</span>  
<a href="$BAD_COMMENT_URL$"><img src="http://novi4ok.ru/images/rat/minuc_01.gif" alt="-" title="Плохой пост"/></a><?else?>  
<?if($COMMENT_RATING$=0)?>  
<img src="http://novi4ok.ru/images/rat/plus_02.png" alt="+" title="Хороший пост"/>  
<span class="post_r">($COMMENT_RATING$)</span>  
<img src="http://novi4ok.ru/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>  
<?else?>  
<?if($COMMENT_RATING$<0)?>  
<img src="http://novi4ok.ru/images/rat/plus_02.png" alt="+" title="Хороший пост"/>  
<span class="red">($COMMENT_RATING$)</span>  
<img src="http://novi4ok.ru/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>  
<?else?>  
<img src="http://novi4ok.ru/images/rat/plus_02.png" alt="+" title="Хороший пост"/>  
<span class="gren">(+$COMMENT_RATING$)</span>  
<img src="http://novi4ok.ru/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>  
<?endif?>  
<?endif?>  
<?endif?>  

  </div>  
  </div><div class="cell_comment_os">  
<div class="comment_p ">  
<?if($USERNAME$)?><a href="$PROFILE_URL$"><?if($USER_AVATAR_URL$)?> <img class="comment_avatar" src="$USER_AVATAR_URL$" /><?else?><img src="http://novi4ok.ru/images/noavatar.png" class="comment_avatar" alt="аватар отсутствует" /><?endif?></a><?else?><img src="http://novi4ok.ru/images/noavatar.png" class="comment_avatar" alt="аватар отсутствует" /><?endif?>  
</div>  

  <div class="comment_v grey">  
  <a href="#ent$ID$" onclick="if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" name="ent$ID$"><strong>$NUMBER$</strong></a> |  
  <strong class="gren"><?if($USERNAME$)?>$USERNAME$ <?else?>$NAME$<?endif?></strong> пишет: | $DATE$ | $TIME$ <?if($MODER_PANEL$ && $EMAIL$)?><a href="$EMAIL_JS$" title="Email"> ( E-mail )</a><?endif?>  
  <span class="right">$MODER_PANEL$</span>  
  <?if($ENTRY_URL$)?><a class="right" href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Страница с комментарием </a>|<?endif?>  
  </div>  

  <div class="comment_c text_11">  
  $MESSAGE$  
  <?if($ANSWER$)?><p class="vcc_otvet"><strong>Ответ</strong>: $ANSWER$<p><?endif?>  
  </div>  

  <div class="comment_n grey text_9">  
  <?if($ANSWER_URL$)?><a href="$ANSWER_URL$">Ответить</a> |<?endif?>  

<?if($GOOD_COMMENT_URL$)?>  
<a href="$GOOD_COMMENT_URL$"><img src="http://novi4ok.ru/images/rat/plus_01.gif" alt="+" title="Хороший пост"/></a>  
<span class="post_r">($COMMENT_RATING$)</span>  
<a href="$BAD_COMMENT_URL$"><img src="http://novi4ok.ru/images/rat/minuc_01.gif" alt="-" title="Плохой пост"/></a><?else?>  
<?if($COMMENT_RATING$=0)?>  
<img src="http://novi4ok.ru/images/rat/plus_02.png" alt="+" title="Хороший пост"/>  
<span class="post_r">($COMMENT_RATING$)</span>  
<img src="http://novi4ok.ru/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>  
<?else?>  
<?if($COMMENT_RATING$<0)?>  
<img src="http://novi4ok.ru/images/rat/plus_02.png" alt="+" title="Хороший пост"/>  
<span class="red">($COMMENT_RATING$)</span>  
<img src="http://novi4ok.ru/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>  
<?else?>  
<img src="http://novi4ok.ru/images/rat/plus_02.png" alt="+" title="Хороший пост"/>  
<span class="gren">(+$COMMENT_RATING$)</span>  
<img src="http://novi4ok.ru/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>  
<?endif?>  
<?endif?>  
<?endif?>  

  </div>  
  </div><div class="cell_comment_os">  
<div class="comment_p ">  
<?if($USERNAME$)?><a href="$PROFILE_URL$"><?if($USER_AVATAR_URL$)?> <img class="comment_avatar" src="$USER_AVATAR_URL$" /><?else?><img src="http://novi4ok.ru/images/noavatar.png" class="comment_avatar" alt="аватар отсутствует" /><?endif?></a><?else?><img src="http://novi4ok.ru/images/noavatar.png" class="comment_avatar" alt="аватар отсутствует" /><?endif?>  
</div>  

  <div class="comment_v grey">  
  <a href="#ent$ID$" onclick="if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" name="ent$ID$"><strong>$NUMBER$</strong></a> |  
  <strong class="gren"><?if($USERNAME$)?>$USERNAME$ <?else?>$NAME$<?endif?></strong> пишет: | $DATE$ | $TIME$ <?if($MODER_PANEL$ && $EMAIL$)?><a href="$EMAIL_JS$" title="Email"> ( E-mail )</a><?endif?>  
  <span class="right">$MODER_PANEL$</span>  
  <?if($ENTRY_URL$)?><a class="right" href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Страница с комментарием </a>|<?endif?>  
  </div>  

  <div class="comment_c text_11">  
  $MESSAGE$  
  <?if($ANSWER$)?><p class="vcc_otvet"><strong>Ответ</strong>: $ANSWER$<p><?endif?>  
  </div>  

  <div class="comment_n grey text_9">  
  <?if($ANSWER_URL$)?><a href="$ANSWER_URL$">Ответить</a> |<?endif?>  

<?if($GOOD_COMMENT_URL$)?>  
<a href="$GOOD_COMMENT_URL$"><img src="http://novi4ok.ru/images/rat/plus_01.gif" alt="+" title="Хороший пост"/></a>  
<span class="post_r">($COMMENT_RATING$)</span>  
<a href="$BAD_COMMENT_URL$"><img src="http://novi4ok.ru/images/rat/minuc_01.gif" alt="-" title="Плохой пост"/></a><?else?>  
<?if($COMMENT_RATING$=0)?>  
<img src="http://novi4ok.ru/images/rat/plus_02.png" alt="+" title="Хороший пост"/>  
<span class="post_r">($COMMENT_RATING$)</span>  
<img src="http://novi4ok.ru/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>  
<?else?>  
<?if($COMMENT_RATING$<0)?>  
<img src="http://novi4ok.ru/images/rat/plus_02.png" alt="+" title="Хороший пост"/>  
<span class="red">($COMMENT_RATING$)</span>  
<img src="http://novi4ok.ru/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>  
<?else?>  
<img src="http://novi4ok.ru/images/rat/plus_02.png" alt="+" title="Хороший пост"/>  
<span class="gren">(+$COMMENT_RATING$)</span>  
<img src="http://novi4ok.ru/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>  
<?endif?>  
<?endif?>  
<?endif?>  

  </div>  
  </div><div class="cell_comment_os">  
<div class="comment_p ">  
<?if($USERNAME$)?><a href="$PROFILE_URL$"><?if($USER_AVATAR_URL$)?> <img class="comment_avatar" src="$USER_AVATAR_URL$" /><?else?><img src="http://novi4ok.ru/images/noavatar.png" class="comment_avatar" alt="аватар отсутствует" /><?endif?></a><?else?><img src="http://novi4ok.ru/images/noavatar.png" class="comment_avatar" alt="аватар отсутствует" /><?endif?>  
</div>  

  <div class="comment_v grey">  
  <a href="#ent$ID$" onclick="if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" name="ent$ID$"><strong>$NUMBER$</strong></a> |  
  <strong class="gren"><?if($USERNAME$)?>$USERNAME$ <?else?>$NAME$<?endif?></strong> пишет: | $DATE$ | $TIME$ <?if($MODER_PANEL$ && $EMAIL$)?><a href="$EMAIL_JS$" title="Email"> ( E-mail )</a><?endif?>  
  <span class="right">$MODER_PANEL$</span>  
  <?if($ENTRY_URL$)?><a class="right" href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Страница с комментарием </a>|<?endif?>  
  </div>  

  <div class="comment_c text_11">  
  $MESSAGE$  
  <?if($ANSWER$)?><p class="vcc_otvet"><strong>Ответ</strong>: $ANSWER$<p><?endif?>  
  </div>  

  <div class="comment_n grey text_9">  
  <?if($ANSWER_URL$)?><a href="$ANSWER_URL$">Ответить</a> |<?endif?>  

<?if($GOOD_COMMENT_URL$)?>  
<a href="$GOOD_COMMENT_URL$"><img src="http://novi4ok.ru/images/rat/plus_01.gif" alt="+" title="Хороший пост"/></a>  
<span class="post_r">($COMMENT_RATING$)</span>  
<a href="$BAD_COMMENT_URL$"><img src="http://novi4ok.ru/images/rat/minuc_01.gif" alt="-" title="Плохой пост"/></a><?else?>  
<?if($COMMENT_RATING$=0)?>  
<img src="http://novi4ok.ru/images/rat/plus_02.png" alt="+" title="Хороший пост"/>  
<span class="post_r">($COMMENT_RATING$)</span>  
<img src="http://novi4ok.ru/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>  
<?else?>  
<?if($COMMENT_RATING$<0)?>  
<img src="http://novi4ok.ru/images/rat/plus_02.png" alt="+" title="Хороший пост"/>  
<span class="red">($COMMENT_RATING$)</span>  
<img src="http://novi4ok.ru/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>  
<?else?>  
<img src="http://novi4ok.ru/images/rat/plus_02.png" alt="+" title="Хороший пост"/>  
<span class="gren">(+$COMMENT_RATING$)</span>  
<img src="http://novi4ok.ru/images/rat/minuc_02.png" alt="-" title="Плохой пост"/>  
<?endif?>  
<?endif?>  
<?endif?>  

  </div>  
  </div>


Теперь давайте пропишем css стили, чтобы улучшить его внешний вид:

Code
/* Вид комментарий v.2.0  
  ------------------------------------------*/  
  .cell_comment_os {  
float:left;  
width:100%;  
background:#fff;  
border:1px solid #CAD1DB;  
padding-bottom:3px;  
margin-bottom:15px;  
  }  

  .comment_p {  
float:right;  
width:80px;  
  }  

  .comment_v {  
margin: 5px 0px 5px 10px;  
  }  

  .comment_c {  
overflow: hidden;  
text-align:justify;  
margin: 0px 0px 0px 10px;  
padding: 5px 0px;  
border-top: 1px solid #e7e7e7;  
  }  

  .comment_n {  
text-align:right;  
margin: 3px 78px 0px 10px;  
  }  
  .vcc_otvet {overflow:hidden!important; border: 1px solid #eccece; padding: 10px;background:#fcf6f6; }  

  .comment_avatar {  
width:40px;  
height:40px;  
padding: 4px;  
margin: 8px 10px 0px 15px;  
border: 1px solid #CAD1DB;  
background:#F6F6F6;  
-webkit-border-radius:5px;  
-moz-border-radius:5px;  
border-radius:5px;  
  }  

  .red {color: #d20000;}  
  .gren {color: #429e1e;}  
  .grey {color: #999;}  
  .text_9 {font: 9px Verdana,Arial,Helvetica, sans-serif;}  
  .right {float:right;}


Вот и всё, более улучшенная по внешнему виду и верстке вид комментарий uCoz готов, а комментарии могут выводиться как в простом варианте так и в древовидном.
 
 
 
Поделиться…
 
 0 комментариев •  1029 просмотров •  дата: 27.11.2024 •  автор: admin
 
 
Советую взглянуть:
  • Форма входа для ucoz
  • Удобный поиск получателя ЛС
  • Выдвигающийся профиль при наведении курсором
  • Подгрузка комментариев с авто прокруткой для ucoz
    •  
     
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    Регистрация | Вход

    Меню сайта

    Мини чат

    Для добавления необходима авторизация

    Последнее с форума

    Последние комментарии


    Опрос сайта

    Бесит ли вас реклама на сайтах?
    Всего ответов: 13

    Купить ссылку здесь


    Статистика

    Кол-во зареганных: 2908 (+0)
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Сейчас на сайте:

    Нас посетили:

    Рейтинг пользователей

    Портал для вас - Uc-new.ru, На сайте Используются технологии uCoz, все материалы в свободном доступе!
    Главная | Форум | Каталог сайтов | наши баннеры | О сайте | Обратная связь