Материал
По возможности мы всех призываем указывать источник материала если вы нашли у нас что-то дейстительно интересное и новое для себя.

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

Источник
Ссылки

Используйте быстрые ссылки для вставки в сообщениях форума.

Ccылка
BB-Code
HTML-код

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

Дата и время публикации : 04.Апр.17 в 05:34 | Раздел : Информеры для uCoz


Параметр Значение
Дата публик. 04.Апр.17, Вторник, 05:34
Адапт. дизайн
Обновления Не производились
Просмотрен 196

Информер который выводит последние комментарии пользователей. Шаблон информера выполнен в светлых тонах. Подойдет к сайту любой тематики. 



Установка :

1. В CSS вставить код:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700); 
@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); 

.materialuon { 
  font-family: 'Open Sans', Arial, sans-serif; 
  position: relative; 
  float: left; 
  overflow: hidden; 
  margin: 10px 1%; 
  min-width: 250px; 
  max-width: 310px; 
  width: 100%; 
  background-color: #ffffff; 
  color: #000000; 
  text-align: left; 
  font-size: 16px; 
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 

.materialuon * { 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 

.materialuon:after { 
  position: absolute; 
  top: 12px; 
  left: 0; 
  width: 0; 
  height: 0; 
  border-style: solid; 
  border-width: 25px 0 25px 25px; 
  border-color: transparent transparent transparent #d2652d; 
  content: ''; 
  -webkit-transform: translateX(-100%); 
  transform: translateX(-100%); 
  -webkit-transition: all 0.3s ease; 
  transition: all 0.3s ease; 

.materialuon img { 
  max-width: 100%; 
  vertical-align: top; 
  position: relative; 

.materialuon figcaption { 
  padding: 20px 20px 30px; 
  background-color: #ffffff; 

.materialuon h3, 
.materialuon p { 
  margin: 0; 
  padding: 0; 

.materialuon h3 { 
  margin-bottom: 10px; 
  display: inline-block; 
  font-weight: 700; 

.materialuon p { 
  font-size: 0.8em; 
  margin-bottom: 20px; 
  line-height: 1.6em; 

.materialuon footer { 
  padding: 0 25px; 
  color: #999999; 
  font-size: 0.8em; 
  line-height: 50px; 
  text-align: left; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  width: 100%; 

.materialuon footer > div { 
  display: inline-block; 
  margin-right: 15px; 

.materialuon footer i { 
  margin-right: 5px; 
  font-size: 1.2em; 

.materialuon a { 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  position: absolute; 
  z-index: 1; 

.materialuon:hover:after, 
.materialuon.hover:after { 
  -webkit-transform: translateX(0%); 
  transform: translateX(0%); 
}

 

2. Создать информер :

[ Комментарии · Материалы · Дата добавления материала 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>

На данный момент никто не оставил комментариев.

Оставить комментарий :


Требуется войти в свой аккаунт.

Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.

Вход Регистрация

Смотрите также :

Модальное окно на HTML5 и CSS3 для uCoz

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