» »

Вид материалов новостного блога для сайта ucoz


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

Установка:

CSS:

Код
/* Вид новостей для uCoz  
------------------------------------------*/  
@font-face {font-family: 'Open Sans'; font-style: normal; src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff) format('woff');}  

.uotvet-news-1 {  
  float:left;  
  width:400px;  
  background:#fff;  
  overflow:hidden;  
  margin-bottom: 40px;  
  padding: 25px 25px 0px 25px;  
   
  box-shadow:0 0 5px #a0afba;  
  border-radius:8px;  
}  

.img-news-1 {  
  float:left;  
  width:400px;  
  height:250px;  
}  

.uotvet-news-1 h2 {  
  float:left;  
  width:100%;  
  margin: 15px 0px 15px 0px;  
  font-size: 17px; font-family: Open Sans,Verdana,Arial, sans-serif;  
}  

.uotvet-news-mp {  
  float:right;  
}  

.uotvet-news-1 h2 a:link,  
.uotvet-news-1 h2 a:visited {color:#555}  
.uotvet-news-1 h2 a:hover {color:#2270a7}  

.uotvet-news-1 p {  
  margin-bottom: 35px;  
  font-size: 13px; font-family:Verdana,Arial, sans-serif; line-height: 1.5; text-align:justify;  
}  

.bottom-news-1 {  
  float:left;  
  width:400px;  
  background:#eaf0f4;  
  padding: 0px 25px 0px 25px;  
  margin: 0px -25px 0px -25px;  
  border-top: 1px solid #d8e3eb;  
}  

.bottom-news-1 ul {  
  margin: 0;  
  padding: 0;  
  font-size: 12px; font-family:Verdana,Arial, sans-serif;  
  color:#96a6b0;  
}  

.bottom-news-1 li {  
  float:left;  
  list-style: none;  
  padding: 15px 33px 15px 33px;  
  border-right: 1px solid #d8e3eb;  
}  

.ico-like,  
.ico-date {  
  float:left;  
  width:20px;  
  height:20px;  
  margin: -1px 10px 0px 0px;  
  background: url(http://zornet.ru/CSS-ZORNET/derkamer/ret/icon_bottom_news.png) no-repeat;  
}  

.ico-like {background-position: 0px 0px!important;}  
.ico-date {background-position: 0px -20px!important;}  

.bn-li-1 {  
  padding-left:0px!important;  
}  

.bn-li-2 {  
  float:right!important;  
  padding-right: 0px!important;  
  border-right: none!important;  
}  

.bn-li-2 {  
  font-weight:bold;  
  float:right!important;  
  padding-right: 0px!important;  
  border-right: none!important;  
}  

.bn-li-2 a:link,  
.bn-li-2 a:visited {color:#96a6b0}  
.bn-li-2 a:hover {color:#2270a7}  

.bn-li-3 {  
  text-align:center!important;  
  padding-right: 0px!important;  
  border-right: none!important;  
}  

.bn-li-3 img[style],  
.bn-li-3 img[width="1"] {display:none!important}  
.bn-li-3 span {display:inline!important}  
.bn-li-3 span img {margin: 0px 2px; }


Вид новостей:

Код
<div class="uotvet-news-1">  
  <?if($IMG_URL1$)?>  
  <a href="$IMG_URL1$" class="ulightbox" target="_blank"><img class="img-news-1" alt="$TITLE$" src="$IMG_URL1$" /></a>  
  <?endif?>  

  <h2><a href="$ENTRY_URL$">$TITLE$</a></h2>  
  <p>$MESSAGE$</p>  

  <div class="bottom-news-1">  
  <ul>  
  <li class="bn-li-1"><span class="ico-like"></span>$RATED$</li>  
  <li><span class="ico-date"></span>$DATE$</li>  

  <?if($MODER_PANEL$)?>  
  <li class="bn-li-3">  
  $MODER_PANEL$  
  </li>  

  <?else?>  
  <li class="bn-li-2"> <a href="$ENTRY_URL$" target="_blank">Читать дальше</a></li>  
  <?endif?>  
  </ul>  
   
  </div>  
  </div>




Сами потом решайте, сколько колонок будет у вас. Одну если создавать, то на блог, будет думаю красиво, на ресурс нужно несколько.
10.02.2015 Просмотров: 1218 Комментарий: (12)

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

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

Комментарий: 12
Dimstrik
Dimstrik 11.02.2015 16:101
0
Хорошенький такой вид материалов а то все стандартные хоть что то стали менять дизайнеры smile
Kosten
Kosten 11.02.2015 16:132
0
Dimstrik, так смотрится не плохо, на тестовом проверял.
trem200
trem200 26.01.2016 19:583
0
А как можно их поставить по середине?
Kosten
Kosten 26.01.2016 20:294
0
Они автоматически должны встать как нужно.
Kosten
Kosten 26.01.2016 20:425
0
trem200, нужно только задать краткое описание, но на модуле новость, это можно сделать в админ панели. В каталоге файлов, там нет такой функций и делают по другому.

Точно не помню, но кажется так.

Код
<?substr($MESSAGE$,0,200)?>...


200 - это знаки, но лучше ставить 140 - 160 где то так.

Для того, чтоб длинна вида была ровная, если ставить в рад. Просто если станет больше описание, то автоматически увеличивается сам вид.
trem200
trem200 26.01.2016 22:126
0
Я поставил этот код для каталога статей
Kosten
Kosten 26.01.2016 22:167
0
Но все нормально установилось, там же тоже нет раздела про краткое описание и его делают в админ панели.
trem200
trem200 26.01.2016 22:538
0
Теперь понял, спасибо
Kosten
Kosten 26.01.2016 22:599
0
Да не за что.
trem200
trem200 26.01.2016 23:0010
0
Цитата Kosten
trem200, нужно только задать краткое описание, но на модуле новость, это можно сделать в админ панели. В каталоге файлов, там нет такой функций и делают по другому.

Точно не помню, но кажется так.

Код: выделить всё
<?substr($MESSAGE$,0,200)?>...

200 - это знаки, но лучше ставить 140 - 160 где то так.

Для того, чтоб длинна вида была ровная, если ставить в рад. Просто если станет больше описание, то автоматически увеличивается сам вид.


Как это прописать? А то не пойму.
Kosten
Kosten 26.01.2016 23:2811
0
По идее так должно для каталога файлов и думаю для других модулей.

Описание
Код
<?substr($MESSAGE$,0,200)?>...


Название
Код
$TITLE$ - <?substr($MESSAGE$,0,300)?>...


Но думаю, лучше поискать информацию, просто на некоторых вид материала так идет.
Kosten
Kosten 26.01.2016 23:3512
0
Просто есть еще код такой на описание краткое. Вот здесь Здесь почитай, там написано за эту тему.

Просто есть еще один код, который совершенно другой.

Код
<?if($MESSAGE$)?><div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;"><?substr($MESSAGE$,0,400)?> ...<br /><a style="display:block;float:right;" href="$ENTRY_URL$"><b>Читать дальше ...</b></a></div><?endif?>


Где:
<?substr($MESSAGE$,0,400)?> - количество символов.
avatar