Вид материалов как на официальном блоге Ucoz
Красивый вид материалов.

Недавно зашел на сайт http://blog.ucoz.ru/ и увидел красивый, оригинальный вид материалов. Он мне очень понравился и я решил сделать такой вид материалов.


Установка


Вставить в вид материалов нужного модуля (Управление дизайном - Модуль - Вид материалов):


Код
<div class="post_h"><img src="$AVATAR_URL$" alt="" class="post-photo">
<div class="post-head">
<h2 class="eTitle1"><a href="$ENTRY_URL$">$TITLE$</a></h2>
<span class="post-details">

Автор: <a href="$PROFILE_URL$">$USERNAME$</a>
  | Раздел:
<a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>
</span>
<span class="post-dt"><span class="post-date">$DATE$</span>, $TIME$<span class="post-views">$READS$</span></span>
</div>
<div class="eMessage">

<img src="$IMG_URL1$" class="post-img">
  $MESSAGE$
<div class="post-bottom"><a href="$ENTRY_URL$" class="read-more">Читать далее</a><a href="$COMMENTS_URL$" class="comments-lnk"><span class="comm-num">$COMMENTS_NUM$</span> <span class="comm-ttl">комментариев</span></a>
</div>
</div>
</div></div>


Вставить в таблицу стилей (CSS):

Код

.post_h {
margin-bottom: 15px;
padding: 10px;
background: #fff;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(6, 33, 63, 0.13);
-moz-box-shadow: 0 1px 2px rgba(6, 33, 63, 0.13);
box-shadow: 0 2px 4px rgba(6, 33, 63, 0.13);
text-align: left;
}
.post-photo {
float: left;
width: 60px;
height: 60px;
border-radius: 50%;
}
.post-head {
padding-bottom: 20px;
padding-left: 10.3%;
color: #94999e;
font-size: 14px;
}
.eTitle1 {
margin: 0 0 12px;
letter-spacing: .01em;
font-size: 34px;
line-height: 1.15;
}
.post-head a, .eTitle a {
color: #383e47;
font-weight: 600;
}
.post-details {
padding-right: 25px;
}
.post-dt {
white-space: nowrap;
}.post-date {
padding-left: 20px;
background: url(http://blog.ucoz.ru/img/new/date.png) no-repeat 0 2px;
}
.post-views {
padding-left: 32px;
background: url(http://blog.ucoz.ru/img/new/eye.png) no-repeat 10px 3px;
}
.eMessage {
padding-bottom: 10.9%;
padding-left: 10.3%;
text-align: left;
line-height: 1.5;
}
.post-img {
margin-bottom: 22px;
max-width: 100%;
width: 100%;
vertical-align: middle;
}
.post-bottom {
clear: both;
overflow: hidden;
margin-top: 25px;
text-transform: uppercase;
letter-spacing: .1em;
font-weight: 700;
line-height: 35px;
}
.read-more {
display: inline-block;
padding: 0 20px 2px;
height: 29px;
border: 2px solid #488bfa;
border-radius: 8px;
color: #488bfa;
text-decoration: none;
font-size: 14px;
line-height: 33px;
}
.comments-lnk {
float: right;
color: #383e47;
font-size: 12px;
}
.comments-lnk:before {
display: inline-block;
padding-right: 8px;
width: 12px;
height: 12px;
background: url('http://blog.ucoz.ru/img/new/comm.png') no-repeat 0 0;
content: '';
vertical-align: middle;
}

Всего комментариев: (0)

_LOGGED_IN$)?>
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.

Случайные материалы

CMS login form
CMS login form
Вдохновение для ввода текста эффекты
Вдохновение для ввода текста эффект
Красивый вид материалов для uCoz
Красивый вид материалов для uCoz
Функциональный слайдер с автопрокруткой
Функциональный слайдер с автопрокру
Прокрутка страницы
Прокрутка страницы
Добавление ссылки на источник при копировании
Добавление ссылки на источник при к