« Вид материалов для блога на uCoz »

Описание материала:

Сегодня я предлагаю вам ознакомится с новым интересным решение для вашего сайта, если у вас сайт создан в системе uCoz, то этот материал будет для вас полезный и может даже кому и пригодится.
Этот вид материалов в принципе не особо крутой, но и с другой стороны смотрится весьма не дурно и отлично может скрасить ваш блог, конечно это его не основная тема на которую можно установить, но для блога будет в самый раз.
Сам вид материалов сделан в светлых тонах и оригинально выведена информация о комментариях в правом верхнем углу, что покажет новинку на вашем сайте.

Установка:
1. Скачиваем архив с нашего сайта и загружаем папку vid_blog в корень своего сайта
2. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код:

Код
/* Вид материалов для блога на uCoz */  
.blog-wrap {}  
.post {  
  margin-bottom: 20px;  
  position: relative;  
  background-image: url(/vid_blog/opacity.png);  
  background-repeat: repeat;  
  border-bottom-width: 1px;  
  border-bottom-style: solid;  
  border-bottom-color: #bbb;  
  width: 690px;  
}  
.post .entry-content {  
  background-image: url(/vid_blog/break-horz-line.png);  
  background-repeat: repeat-x;  
  background-position: left top;  
  padding: 10px;  
  font: 15px 'PT Sans', sans-serif;  
}  
h2.entry-title {  
  padding: 0;  
  margin-bottom: 0;  
  font-weight: bold;  
  font-size: 19px;  
  line-height: 28px;  
  padding: 4px 10px 5px 10px;  
  background-repeat: repeat-x;  
  background-position: left top;  
  background-image: url(/vid_blog/blog-title-bg.png);  
  border-top-width: 1px;  
  border-left-width: 1px;  
  border-top-style: solid;  
  border-left-style: solid;  
  border-top-color: #bbb;  
  border-left-color: #bbb;  
  border-bottom-width: 1px;  
  border-bottom-style: solid;  
  border-bottom-color: #bbb;  
}  
h2.entry-title a {  
  display: block;  
  color: #292929;  
  padding-right: 70px;  
  padding-bottom: 2px;  
  text-shadow: 1px 1px 0 #fff;  
}  
h2.entry-title a:hover {  
  color: #c80349;  
  text-decoration: none;  
  border: none;  
}  
.post .entry-meta {  
  font-size: 10px;  
  line-height: 17px;  
  padding-top: 5px;  
  padding-bottom: 5px;  
  text-transform: uppercase;  
  padding-left: 10px;  
  padding-right: 10px;  
  background-image: url(/vid_blog/meta-bg.png);  
  background-repeat: repeat-x;  
  background-position: left top;  
  background-color: #fff;  
}  
.post .date {  
  position: absolute;  
  top: -4px;  
  right: -4px;  
  text-align: center;  
  padding: 5px;  
  background-image: url(/vid_blog/blog-date-bg.png);  
  height: 45px;  
  width: 68px;  
  background-repeat: no-repeat;  
  background-position: left top;  
  z-index: 11;  
}  
.date .day h2 {  
  font-weight: normal;  
  font-size: 23px;  
  line-height: 24px;  
  letter-spacing: 2px;  
  margin-top: 0;  
  margin-bottom: 0;  
  margin-left: 0;  
  padding-top: 0;  
  padding-right: 0;  
  padding-bottom: 0;  
  padding-left: 4px;  
  text-shadow: 1px 1px 0 #fff;  
}  
.date .day {  
  height: 30px;  
}  
.date .month-year {  
  font-size:10px;  
  height: 15px;  
  line-height: 15px;  
  text-align: center;  
  padding-left: 4px;  
}  
.date .year {  
}  

.post .read-more-link {  
  padding-right: 10px;  
  padding-left: 10px;  
  padding-bottom: 10px;  
}  
.blog-img-wrap {  
  margin-top: -1px;  
  border-top: 1px solid #3B3B3B;  
}  
.img-right-style .blog-img-wrap {  
  border-bottom: 1px solid #3B3B3B;  
  margin-bottom: -1px;  
}  
.blog-img-wrap a {  
  display: block;  
  line-height: 0;  
}  

.clearfix:before, .clearfix:after {  
  content: "";  
  display: table;  
}
/* InternetEmpire.Ru */

3. Заходим в ПУ - Управление дизайном - модуль Блог - Вид материалов и заменяем имеющий код, на этот:
Код
<div class="post clearfix">  
<h2 class="entry-title"><a href="$ENTRY_URL$">$TITLE$</a></h2>  
<div class="date">  
<div class="day"><h2><a href="$COMMENTS_URL$">$COMMENTS_NUM$</a></h2></div>  
<div class="month-year">Коммент.</div>  
</div>  
<div class="blog-img-wrap">  
<div class="banner-wrap clearfix">  

<a href="$ENTRY_URL$"><img width="690" height="230" src="$IMG_URL1$" class="post-img" alt="$TITLE$" title="$TITLE$"></a>  
</div>  
</div>  
<div class="entry-meta"> Просмотров: $READS$ | Добавил: <a href="$PROFILE_URL$">$USERNAME$</a> | Дата: <span>$DATE$</span> </div>  
<div class="entry-content clearfix">  
<div align="justify">$MESSAGE$</div>  
</div>  
</div>


Готово!


Скачать ( Размер архива 170.3 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 735 | Загрузок: 27

Теги к материалу: для, блога, на, ucoz, вид, материалов

Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев к материалу: 0
avatar