» »

Вывод комментариев через информер на uCoz

Вывод комментариев через информер на uCoz

Это полезный скрипт, когда у вас на сайте комментируется материал. И вывод через информер их покажет на главной странице вашего сайта. Тогда вы всегда можете ответить или другой пользователь вовремя, и также происходит Модерация всех написанных комментарий. Здесь также будет еще Avatar пользователя, где перекреплена дата написанного. Создал его ДимДимыч, за основу взял простой вид и теперь у кого социальные или просто под таким дизайн стоят посты, то можно установить в блог. Он смотрится как на узком, что будет предоставлено изображение, так и на широком конструкторе, это по фиксированной ширине.

Здесь все очень просто, не чего лишнего нет, не каких кнопок, просто по клику вы перейдете на то описание, которое вам нужно. Но и стилистика сама у него стильная, что безусловно должна подойти на интернет ресурс. Сам пост будет в синий гамме цвета, но все сделано на стилях, и возможно у вас светло темный, то вы можете просто поменять оттенок цвета, даже что то свое добавить. Если вам сам круг не подходит, то делаем квадратный и потом можно просто закруглить на несколько пикселей углы. Вообщем вывод такой, устанавливаем и смотрим как что подогнать или оставить как идет по умолчанию.

Но вот узкий контейнер и визуально мы видим. что отлично вписался.

Информер комментарий для сайта uCoz

Теперь переходим к установки:

Как всегда все делаем через админ панель, и там заходим в информер и создаем по параметрам.

[ Комментарии · Материалы · Дата добавления материала D · Материалы: 5 · Колонки: 1 ]

Код
<div class="com-film">
<li>
<a href="$PROFILE_URL$"><?if($USER_AVATAR_URL$)?><div class="com-film-img"><img src="$USER_AVATAR_URL$" border="0"></div><?else?><div class="com-film-img"><img src="http://zornet.ru/CSS-ZORNET/ND/zZdU4oy.jpg" alt="avatar" /></div><?endif?></a>  
<a href="$PROFILE_URL$">$USERNAME$</a>  
<div class="com-film-detali">$DATE$ в $TIME$</div>
<div class="com-film-detali-a"><a href="$ENTRY_URL$">$ENTRY_TITLE$</a></div>
<p>$MESSAGE$</p>
</li>
</div>


CSS:

Код
.com-film {border-bottom: 1px solid #E0E9F0; padding-bottom: 15px; padding-top: 3px; background-color: #fff;}
.com-film:last-child { border-bottom: 0; }
.com-film li {list-style: none;}
.com-film a {font-size: 12px; color: #2F2F2F; font-weight: bold;}
.com-film-detali {padding-top: 4px; color: #999999; font-size: 9px; font-family: 'PT Sans'; display: inline-block; float: right; margin-right: 3px;}
.com-film-detali-a a { font-weight: normal;}
.com-film-img img {float: left; border-radius: 50px; width: 35px; height: 35px; margin-right: 4px; margin-left: 2px;}
.com-film p {-webkit-margin-before: 0; -webkit-margin-after: 0; font-size: 11px; background-color: #E6F2F7; display: -webkit-box; padding: 3px; border-radius: 3px; margin-right: 3px; margin-top: 3px;}


PS - стили также можете поставить ниже кода, только нужно будет заключить в style что также все будет отображать.
13.11.2016 Просмотров: 722 Комментарий: (14)

Поделиться в социальных сетях

Материал разместил

Комментарий: 14
tsakonter
tsakonter 13.11.2016 12:531
+2
Нормально с комментариев информер исполнен.
Kolinkor
Kolinkor 13.11.2016 13:012
0
Так не очень от остальных отличается.
Kosten
Kosten 13.11.2016 13:233
0
Brung, каждый материал чем то всегда уникален, и этот не исключение, при этом как написано, он сделан с комментариев.
sasha2016tv
sasha2016tv 13.11.2016 13:564
+1
Круто
sasha2016tv
sasha2016tv 13.11.2016 13:575
0
Спасиб
Kolinkor
Kolinkor 13.11.2016 14:566
0
А так поставил, не чего смотрится.
Сафрон
Сафрон 13.11.2016 14:597
0
Главное, чтоб такой информер, не сносил сайт, то бываешь ссылку или смайл оставишь, и все сносит, но сейчас как то уже настроили или по другому делают, но раньше. было много таких комментариев, которые под любой смайл на дыбы вставали.
-SAM-
-SAM- 13.11.2016 19:2210
+1
Вот здесь уже писал про это, зависит от того есть ли подрезка или нет (высоту блока с выводом текста комментария можно ограничить визуально через стили, а не резать исходный код или выставлять ограничение через ПУ в настройках информера - здесь нет, что и правильно). Кажется, так можно сделать: .com-film p:first-child {display:block;max-height:52px;overflow:hidden;} (может быть, кому-то понадобиться).
Kosten
Kosten 13.11.2016 19:5511
0
-SAM-, грамотно написаный пост, всегда пригодится под материал.
ДимДимыч
ДимДимыч 13.11.2016 15:288
+1
Тут ещё зависит стиль этого информера от шрифта текста, если вы заметили что на одном и на другом изображение разные шрифты и поэтому визуально вроде мелочи а смотрится уже по новому что тот вариант что другой.
Kosten
Kosten 13.11.2016 18:139
0
Что то не обратил внимание, а так подход оригинальный.
1 2 »
avatar