Информер последние комментарии для uCoz
09.04.2026 272 0 VeL
Данный информер выведет три последних комментария пользователей к материалам, на любую страницу вашего сайта. Информер выполнен в минималистическом стиле, смотрится довольно красиво и гармонично.
Информер с таким дизайном подойдет для более светлых шаблонов, но не стоит забывать, что CSS в вашем распоряжении.
Установка:
1. Создать информер [ Комментарии · Материалы · Дата добавления материала D · Материалы: 3 · Колонки: 1 · Длина заголовка: 50 ] и в шаблон информера вставить код:
Код
<figure class="lastcomments "> <div class="profile-image"> <?if($USERNAME$)?> <a href="$PROFILE_URL$"> <?if($USER_AVATAR_URL$)?> <img alt="Аватар $USERNAME$" title="$USERNAME$" src="$USER_AVATAR_URL$" /> <?else?> <img title="$USERNAME$" alt="аватар отсутствует" src="http://wallaby.ucoz.ru/_ph/1/2/92873634.jpg" /> <?endif?> </a> <?else?> <img title="$NAME$" alt="аватар отсутствует" src="http://wallaby.ucoz.ru/_ph/1/2/92873634.jpg"/> <?endif?> </div> <figcaption> <h3><?if($USERNAME$)?><a href="$PROFILE_URL$">$USERNAME$</a><?else?>$NAME$<?endif?></h3> <h5>$DATE$ | $TIME$</h5> <p> <a href="$ENTRY_URL$" title="$ENTRY_TITLE$">$MESSAGE$</a> </p> </figcaption> </figure>
В CSS вставить код:
Код
/* UON.UCOZ.COM */ .lastcomments { font-family: Tahoma; position: relative; display: inline-block; overflow: hidden; margin: 8px; min-width: 250px; max-width: 310px; width: 100%; background-color: #ffffff; color: #2B2B2B; text-align: center; font-size: 16px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } .lastcomments * { -webkit-box-sizing: border-box; box-sizing: border-box; } .lastcomments .profile-image { padding: 15% 10% 0; } .lastcomments .profile-image img { max-width: 100%; vertical-align: top; position: relative; border-radius: 50%; max-width: 40%; } .lastcomments figcaption { padding: 5% 10% 15%; } .lastcomments h3 { text-transform: uppercase; font-size: 20px; font-weight: 400; line-height: 24px; margin: 3px 0; } .lastcomments h5 { font-weight: 400; margin: 0; text-transform: uppercase; color: #888; letter-spacing: 1px; }
В нужное вам место вставить код информера. Вот и все.
Комментариев:0
