» »

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

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

Очередной материал для вывода комментариев через информер ресурса, где пользователь оставляет пост и он потом появляется в блоке сайта. Сделан он для того, чтоб бы быть всегда в курсе, где оставили комментарий, чтоб как можно быстро ответить на его. Также против спама, так как если нет его, то возможно спам останется не замечен для администраций сайта.

Но здесь безусловно сделан для мониторинга и с ним прекрасно работать. Он выводит Avatar пользователя и название материала, что можно по одному клику перейти. Но также само описание, что пишут, где по прочтению можно понять, нужно отвечать или нет. Место под изображение будет круглым и с ним рядом дата, когда был оставлен комментарий и потом уже название идет. Но, а сам пост, будет в светло-синей обводе, но это все можно изменить по стилям, что идут.

Устанавливая его на тестовый сайт, то заметил, если название материала большое, то оно просто не влазит и идет в 2 ряда, что не корректно смотрится. Но здесь можно TITLE уменьшить, как сам комментарий, что по нему где в коде установлен оператор, где сами ставите значение, сколько знаков выводить. А что по названию, не стал делать, если сам нужно, то в этой статье все написано, как уменьшить по знакам, и тогда безусловно корректно все будет визуально смотреться на сайте.

Так на источнике он расположен, это темный фон.

Красивый информер на комментарий сайта

Это уже на тестовом сайте, на светлом, просто проверяя сделал как раз на название большое.

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

На счет адаптивности, то здесь все нормально, под каждую ширину он определятся.

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

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

Нужно зайти в админ панель и проследовать в раздел информер и там создать с такими параметрами. Сколько выводить, сами решайте, здесь выставлено 3 поста.

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

Код
<div class="chat-site">
<li>
<a href="$PROFILE_URL$"><div class="chat-site-img"><img src="$USER_AVATAR_URL$" border="0"></div></a>  
<div class="chat-site-detali">$DATE$</div> <a href="$ENTRY_URL$">$ENTRY_TITLE$</a>  
<p><?if(len($MESSAGE$)>231)?><?substr($MESSAGE$,0,231)?>.....<?else?>$MESSAGE$<?endif?> </p>
</li>
</div>


CSS:

Код
.chat-site {border-bottom: 1px solid #E0E9F0; font-family: 'PT Sans'; padding-bottom: 15px; padding-top: 3px; background-color: #fff;}
.chat-site:last-child { border-bottom: 0; }
.chat-site li {list-style: none;}
.chat-site a {font-size: 12px; color: #2F2F2F; font-weight: bold;}
.chat-site-detali {padding-top: 4px; color: #999999; font-size: 9px; display: inline-block;}
.chat-site-img img {float: left; border-radius: 50px; width: 35px; height: 35px; margin-right: 4px; margin-left: 2px;}
.chat-site 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;}

Также его можно в самом коде переделать и выводить по другому, или где комментарий, то фон изменить, это что качается под какой дизайн ставить.
06.04.2017 Просмотров: 739 Комментарий: (21)

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

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

Комментарий: 21
FeStemBer
FeStemBer 06.04.2017 01:461
0
У таких информер есть одно, если ссылка будет или смайл, то может все слететь, этот был проверен на такую ситуацию.
tsakonter
tsakonter 06.04.2017 01:512
0
Это у информер, который выводит комментарий всегда так, нужно в информер не выставлять, сколько знаков должно выводить и не будет слетать и все смайлы появятся и ссылки, а только поставил, все полетит, не знаю почему, но это не первый год такое и не исправляют.
Kosten
Kosten 06.04.2017 01:593
0
Вот это забыл проверить. просто с названием ушел, сейчас на тестовом выставил. но сколько ждать. кока там обновиться. Хотя здесь в информер не чего по знаком не выставлено, так как в самом коде оператор и думаю должно быть все нормально по этому поводу.
Brung
Brung 06.04.2017 02:044
0
Не чего не полетит если ссылки и смайлы будет, вы что не видите, что в самом коде выставлять, сколько знаков выводить, знать на информер не нужно этого делать, если уже есть.
waak
waak 06.04.2017 02:065
0
Данная проблема только у тех материалов и авторов кто не понимает как нужно делать такие материалы для публикации.
Kosten
Kosten 06.04.2017 02:106
0
Да проверил все, все нормально выводит и не чего не слетает. Почему не понимает, сразу сказал, если в информер поставишь выставив знаки, сколько должно, у тебя самый рабочий слетит. Этот вот проверил и все нормально.

Kosten
Kosten 06.04.2017 02:127
0
waak, а пи чем здесь публикация, так по идее стараюсь каждый материал проверять на тестовом сайте, что все скрины сделаны с него под материал. Если у тебя другое мнение, мне до интересно выслушать, думаю поучительно будет.
waak
waak 06.04.2017 02:299
0
Добавь комментарий чтоб ссылка или смайлы шли после 230 символа или 228 и увидишь что будет или просто добавь такой коммент

Пример

Код
Это тестовый комментарий для проверки вида информера комментария на работу так как есть подозрения на глюки в его работе и чтоб избежать эти подозрения я написал этот комментарий со всем учетом для проверки на работа способность а вот ссылка [url=http://zornet.ru/load/informer_dlja_vyvoda_kommentariev_sajta_ucoz/81-1-0-7656]http://zornet.ru/load/informer_dlja_vyvoda_kommentariev_sajta_ucoz/81-1-0-7656[/url] смайлики сам добавишь
Kosten
Kosten 06.04.2017 02:4111
0
Так получилось, просто смайл не вошел в те знаки, которые ограничили по знакам.

waak
waak 06.04.2017 02:4713
0
это потому что ссылка не попала под сокращение а если ты уберёшь кусок текста из комментария к примеру "способность а вот ссылка" то поломка не избежна
Kosten
Kosten 06.04.2017 02:4814
0
Это я уже понял, как на поле чудес, попадет на приз или что там, просто бесконечно не может корректно выводить, все равно в капкан ссылка или смайл попадет.
Kosten
Kosten 06.04.2017 02:248
0
waak, не могу понять, а для чего ты пишешь истинные вещи, которые понятно всем, или просто надо закинуть камень в огород, но мне кажется мы выросли из того возраста, чтоб такое делать, или суть в другом.
waak
waak 06.04.2017 02:4010
0
Суть всегда в другом! если ограничивать количество символов то рано или поздно попадётся такой комментарий где ссылка или любой другой элемент начнётся с 230 или раньше а заканчиваться будет к примеру на 240 символом и получится так что в первом комментарии будет не закрыт тег а и это приведёт к поломке кода так как этот тег будет закрыт первым закрывающим тегом /а из комментария ниже и т.д. а если под сокращение попадёт картинка или тег <p> или [code]
Kosten
Kosten 06.04.2017 02:4412
0
Но это понятно, что попадется, не сегодня, так завтра, ты если знаешь, подскажи плиз, как правильно сделать, чтоб все по зеленому проезжали, как смайлы или ссылки.
avatar
tirtuvir 06.04.2017 20:3215
0
Цитата Kosten ()
Но это понятно, что попадется, не сегодня, так завтра, ты если знаешь, подскажи плиз, как правильно сделать, чтоб все по зеленому проезжали, как смайлы или ссылки.



1. Снять ограничение, количество символов в сообщении для вывода комментариев.

Код
<p><?if(len($MESSAGE$)>231)?><?substr($MESSAGE$,0,231)?>.....<?else?>$MESSAGE$<?endif?> </p>


2. Задать высоту height:

Это вообще то мини чат, а вы его в Информер для вывода комментариев переименовали, вот он http://zornet.ru/load/stilnyj_vid_mini_chata_na_sajt_ucoz/81-1-0-7191

Вот рабочий информер как на вашем сайте стоит. В этой теме http://zornet.ru/load....-0-5801 ВСЁ РАСКРЫТО ЧТО И КАК.

Код
<div class="web_now clearfix">   
<div class="web_now_ava circle">   
<a href="$PROFILE_URL$"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://zornet.ru/Fresa/AB/avatar.png<?endif?>" width="64" alt="" /></a></div>   
<div class="web_now_body">   
<div class="web_now_body_top">   
<a href="$PROFILE_URL$" class="comm-user">$USERNAME$</a>   
<a href="$ENTRY_URL$" class="fa fa-arrow-circle-o-right pull-right"></a>   
<span class="web_now_date">$DATE$ - $TIME$</span> </div>   
<div class="web_now_body_container">   
<span class="comm_sprt"></span>   
<div class="web_now_body_mess shadow">   
<div class="web_now_body_comment"><a href="$ENTRY_URL$">$MESSAGE$</a> </div>   
</div>   
</div>   
</div>   
</div>


Код
.circle{border-radius:50%}   
.web_now{ position:relative; display:block; margin-bottom:15px}   
.web_now_ava{ height:57px; width:57px; border:4px solid #fff; box-shadow:0px 0px 1px 1px #DDD; overflow:hidden; float:left; margin-top:5px}   
.web_now_ava img{ width:110%; min-height:112%; margin-top:-3px; margin-left:0px}   
.web_now:nth-of-type(even) .web_now_body{ margin-left:75px; margin-top:12px}   
.web_now:nth-of-type(odd) .web_now_body{ padding-right:5px; margin-top:12px; display:block}   
.web_now_body_top{ margin-bottom:5px; padding:0 2px; line-height:22px}   
.web_now_body_top a.comm-user{ color:#515151; font-size:12px; font-family:'Roboto Medium'}   
.web_now_date{ color:#515151; float:right; font-size:8px; margin-top:3px}   
.web_now_body_top a.fa{ margin-left:-13px; font-size:15px; opacity:0; visibility:hidden; transition:all 0.3s ease 0s; color:#d8d8d8; margin-top:3px}   
.web_now_body_top a.fa:hover{ color:#e63a1a}   
.web_now:hover .web_now_body_top a.fa{ margin-left:12px; display:block; transition:all 0.3s ease 0s; opacity:1; visibility:visible; margin-top:7px}   
.web_now_body_container{ position:relative}   
.web_now_body_mess{ background:#fff; border:1px solid rgba(196, 196, 196, 0.47); border-radius:5px; padding:8px 12px 10px; color:#959595; font-size:12px; line-height:18px; z-index:0; display:block; font-family:'Exo 2', sans-serif; font-style:italic; font-weight:300}   
.web_now:hover .web_now_body_container{ box-shadow:rgba(105, 105, 105, 0.09) 0px 0px 8px; border-radius:5px}   
.web_now:hover .web_now_body_mess{ color:#656D78}   
.web_now_body_comment{ height: auto;width: 100%; overflow:hidden; padding-left: 2px}   
.web_now_body_comment a{ color:#3BAFDA}   
.web_now:nth-of-type(even) .web_now_body .web_now_body_container span.comm_sprt{ background:url(http://zornet.ru/Fresa/AB/comm_sprt_l.png) no-repeat 0px 0px; width:25px; height:17px; display:block; position:absolute; left:-8px; top:8px}   
.web_now:nth-of-type(odd) .web_now_body .web_now_body_container span.comm_sprt{ background:url(http://zornet.ru/Fresa/AB/comm_sprt_r.png) no-repeat 0px 0px; width:25px; height:17px; display:block; position:absolute; right:-22px; top:8px}   
.web_now:nth-of-type(odd) .web_now_ava{ float:right}   
.web_now:nth-of-type(odd) .web_now_body{ margin-right:70px}
avatar
tirtuvir 06.04.2017 20:4616
0
Цитата Kosten ()
waak, не могу понять, а для чего ты пишешь истинные вещи, которые понятно всем, или просто надо закинуть камень в огород, но мне кажется мы выросли из того возраста, чтоб такое делать, или суть в другом.

Вам вопрос, для чего вы выкладываете одно и тоже.
Brung
Brung 06.04.2017 20:5417
0
Тоже заметил, только переделанный немного.
Kosten
Kosten 06.04.2017 21:0318
0
tirtuvir, просто за всем материалом не уследишь, так по поиску поискал и не нашел, что то похожее, потому и залил.

А что делать полный комментарий, то это не выход, может кто то такой комментарий написать, что по высоте больше самого конструктора будет. Памяти нет вообще, как то на этом же сайте сделал и все выводит, нужно посмотреть информер.
1 2 »
avatar