Всем привет, в этом посте мы будем создавать информер на странице контента и комментарий к нему, под названием "Рекомендую к прочтению", для того чтобы предоставить пользователям дополнительный контент и удержать его на сайте как можно дольше.
И так давайте для начало создадим информер случайных новостей, для этого идём в Админ панель => Инструменты => Информеры => Создать информер
с параметрами:
Раздел: Новости сайта
Тип данных: Материалы
Способ сортировки: В случайном порядке
Количество материалов: 1-й и 3-й вариант = 3, а 2-й вариант = 6
Количество колонок: 1
А на страницу контента для первого и второго примера, установим следующий html каркас:
HTML
<div class="cell_recommend_1 left">
<h3>Рекомендую к прочтению</h3>
$MYINF_1$
</div>
незабываем изменить номер класса cell_recommend_1 на один из ниже приведённых примеров стилизации информера.
1 - вариант информера
Шаг 1 - Установим JS:
Для первого варианта информера случайных новостей, я использовал Caption Plugin, поэтому внизу страницы после закрывающего тега </body> устанавливаем следующий js скрипт:
JS
<script type="text/javascript" src="http://ucoz-helper.ucoz.com/vid_info/capty.min.js" ></script>
Шаг 2 - Установим HTML:
Для отображение контента в информере заходим в его шаблон, удаляем старый html код и устанавливаем следующий:
HTML
<p><a href="$ENTRY_URL$">if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" />else>if($IMG_URL1$)?><img src="$IMG_URL1$" class="default" alt="substr($TITLE$,0,35)?>if len($TITLE$)>35 ?>...endif?>">endif?>endif?></a></p>
Шаг 3 - Установим CSS:
А для данного визуально решения, пропишем следующие css стили:
CSS-Code
/* Рекомендую к прочтению - v 1.0
------------------------------------------*/
.cell_recommend_1 {
width:620px;
background:#fff;
margin-bottom:20px;
border: 1px solid #CAD1DB;
padding: 0px 0px 10px 30px;
}
.cell_recommend_1 h3 {
font:115% Verdana,Arial,Helvetica, sans-serif!important;
font-weight:700!important;
color:#666;
}
.capty-caption {
color: #fff;
padding:5px;
background: #000;
font: bold 11px verdana;
text-shadow: 1px 1px 0 #222;
}
.cell_recommend_1 img{
width:180px;
height:100px;
}
.cell_recommend_1 p{
float:left;
margin: 0px 25px 10px 0px;
}
.left {float:left;}
2 - вариант информера
Шаг 1 - Установим HTML:
Для второго варианта информера используем следующий html код:
HTML
<a id="nr_$NUMBER$" href="$ENTRY_URL$"> if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" alt="$TITLE$">else>if($IMG_URL1$)?><img src="$IMG_URL1$" alt="$TITLE$">endif?>endif?><p>substr($TITLE$,0,35)?>if len($TITLE$)>35 ?>...endif?></p></a>
Шаг 3 - Установим CSS:
А для визуально решения, пропишем следующие css стили:
CSS-Code
/* Рекомендую к прочтению - v 2.0
------------------------------------------*/
.cell_recommend_2 {
width:590px;
background:#fff;
margin-bottom:20px;
border: 1px solid #CAD1DB;
padding: 0px 30px 10px 30px;
}
.cell_recommend_2 h3 {
font:120%/1.5 Verdana,Arial,Helvetica, sans-serif;
font-weight:700;
color:#666;
margin-bottom: 5px;
}
.cell_recommend_2 img {
width:90px;
height:30px;
padding:3px;
background:#F4F8F9;
border: 1px solid #CAD3DA;
float:left;
margin-right: 15px!important
}
.cell_recommend_2 p {
margin: 0px;
}
.cell_recommend_2 a:link,
.cell_recommend_2 a:visited {
color:#555;
float:left;
width:280px;
display: block;
color:#555;
padding: 10px 0px;
border-top: 1px solid #CAD3DA;
}
.cell_recommend_2 a:hover {
background:#F4F8F9;
}
#nr_2,
#nr_4,
#nr_6 {float:right;}
3 - вариант информера
Шаг 1 - Установим HTML:
Для третьего варианте информера мы будем использовать списки, поэтому в шаблон информера устанавливаем следующий html код:
HTML
<div class="cell_recommend_1 left">
<h3>Рекомендую к прочтению</h3>
<ul>
$MYINF_1$
</ul>
</div>
а сам html шаблон информера будет создан из следующего кода:
HTML
<li>
<a href="$ENTRY_URL$">
<h2>$TITLE$</h2>
substr($MESSAGE$,0,300)?>if len($MESSAGE$)>300 ?>...endif?>
</a>
</li>
Шаг 2 - Установим CSS:
А для визуально решения, пропишем следующие css стили:
CSS-Code
/* Рекомендую к прочтению - v 3.0
------------------------------------------*/
.cell_recommend_3 {
width:590px;
background:#fff;
margin-bottom:20px;
border: 1px solid #CAD1DB;
padding: 0px 30px 10px 30px;
}
.cell_recommend_3 h3 {
font:120%/1.5 Verdana,Arial,Helvetica, sans-serif;
font-weight:700;
color:#666;
margin-bottom: 5px;
}
.cell_recommend_3 h2 {
font:120%/1.5 Verdana,Arial,Helvetica, sans-serif;
font-weight:700;
width:100%;
margin: 0px 0px 5px 0px;
}
.cell_recommend_3 ul {
padding:0;
margin:0;
}
.cell_recommend_3 li {
float:left;
width:100%;
list-style:none;
}
.cell_recommend_3 img {
float:left;
width:150px;
height:60px;
padding:3px;
background:#F4F8F9;
border: 1px solid #CAD3DA;
margin-right: 15px!important
}
.cell_recommend_3 p {
margin: 5px 0px 0px 0px;
}
.cell_recommend_3 a:link,
.cell_recommend_3 a:visited {
overflow:hidden;
display: block;
color:#555;
padding: 10px 0px;
border-top: 1px solid #CAD3DA;
}
.cell_recommend_3 a:hover {
background:#F4F8F9;
}
Примечание:
Обратите внимание, что в данных примерах я использовал системные переменные uCoz, которые выводят сокращённое название заголовка и сам контент в кратком описании материала.
HTML
substr($MESSAGE$,0,300)?>if len($MESSAGE$)>300 ?>...endif?>
и
HTML
substr($TITLE$,0,35)?>if len($TITLE$)>35 ?>...endif?>
Незабываем установить в общих настройках вашего сайта в админ панели версию библиотеки jQuery: 1.7.2 для правильной работы первого варианта информера рекомендую к прочтению.
На этом всё, спасибо за внимание!
· 
16:58
