ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Информер новое в каталоге блог для uCoz

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

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

Информер на блог юкоз

[ Блог · Материалы · Дата добавления материала D · Материалы: 6 · Колонки: 1 ]

Код
<div class="bloginfo">  
<div class="blogcat">Категория: <a class="ni" target="_blank" href="$CATEGORY_URL$">$CATEGORY_NAME$</a></div>  
<div class="bl"><a class="name" target="_blank" href="$ENTRY_URL$"><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> $TITLE$</a></div>  
</div>

CSS

Код
.bloginfo{  
display: block;  
font-weight: normal !important;  
padding: 5px 12px;  
font-size: 13px !important;  
position: relative;  
color: #6D6D6D;  
text-decoration: none !important;  
font-weight: normal;  
background: #50545d;  
border-radius: 5px;  
width: auto!important;  
box-shadow: 0 0 2px 0 rgba(0,0,0,.15);  
margin-bottom: 3px;  
}  

.bloginfo:hover{  
background:rgb(121, 125, 132);  
}  

.blogcat{  
color: #d0d0d0;  
font-size: 12px;  
text-decoration: none;  
border-bottom: 1px solid #676b71;  
font-family: 'Open Sans', Tahoma, sans-serif;  
padding: 0 0 4px 0;  
}  

.ni{  
padding: 0 10px;  
text-align:left;  
font-size: 12px;  
font-family: 'Roboto Condensed', sans-serif;  
color: #57a1ea;  
text-decoration: none;  
}  

.bl{  
text-decoration:none;  
padding:4px 0 0 0}  

.name{  
font-size: 12px;  
font-family: 'Roboto Condensed', sans-serif;  
color: #d0d0d0;  
text-decoration: none;  
font-weight: normal;  
}  

.ni:hover, .name:hover{  
color:#fff;  
text-decoration:none;  
}  

.name i{  
color:#ff5555}

На этом установка завершена!
Источник:TurBo-S.uCoz.Ru
18 Октября 2017 Просмотров: 1368 Комментариев: (9)
Поделиться в социальных сетях

Материал разместил
milan_shubin
Похожие материалы

Оставь свой отзыв

Комментарии: 9
workman
workman 19 Октября 2017 03:221
0
Еще бы немного адаптации прикрутить к данному материалу и вообще цены не было бы ))
Kosten
Kosten 19 Октября 2017 04:062
0
Но возможно кто знает как делать, увидеть, если не уведет, будем искать, кто бы может сделать, мастеров много.
workman
workman 19 Октября 2017 12:383
0
Ну это конечно да. Мастера есть. Но если бы сразу выставляли темы с адаптацией то лично мое мнение, было бы более качественным материал на раздачу ....
milan_shubin
milan_shubin 19 Октября 2017 13:234
0
Цитата workman ()
Еще бы немного адаптации прикрутить к данному материалу и вообще цены не было бы ))

Извини еще не знаю как сделать адаптации, но постараюсь учить ))))
workman
workman 19 Октября 2017 15:425
0
Правильный ответ. Молодец!!! Мы ночью с Kosten,ом в ВК тоже изучали адаптацию его сайта ))
workman
workman 19 Октября 2017 16:016
+1
Добавляем span на категорию
Код
<span class="cat">Категория:</span>

Код
@media only screen and (min-device-width:320px) and (max-device-width:480px){.cat,.fa fa-caret-square-o-right{dysplay:none;}
}
milan_shubin
milan_shubin 19 Октября 2017 16:057
0
Хорошо и спс, тебе бы писать уроки по ucoz , был бы хорошо )))
workman
workman 19 Октября 2017 17:158
0
Нееее.. Я так не могу. Да и времени порой мало ... Пока статью написал по оптимизации сайтов, чуть не одурел )) Просто всем всегда объясняю, делать сразу сжатие файлов даже на раздачу, но никто не слышит. )) Kosten вроде как услышал ))
-SAM-
-SAM- 19 Октября 2017 19:049
0
Да тут весь код гумосный, что можно намного проще всё сделать, сократив html и css, чтобы добиться визуально вывода, как на скрине. Как и видно, что не заморачивались с этим, ибо рип же (id="12" -> рипо-артефакт). Сама стилизация идёт в двойном экземпляре вообще, а подключив стиль на i - будет для всего сайта, а не лишь для блока и fa-иконки.
UPD.: материал был мной переписан, исправив кривой рип (взято было с сайта Red-Bear.ру - модуль news, в правом контейнере). Еще в коде присутствует шрифтовая иконка, что у кого не подключена библиотека - нецелесообразно подключать её ради неё (когда других шрифтовых иконок нет на сайте). Можете просто там картинкой вывести (или через стили прописать).
Войдите:
avatar