» »

Информер блогеров для вашего сайта

Информер блогеров для  вашего сайта

Всем привет! сегодня не спалось и я решил сделать вот какой вот вид материалов для информера
я назвал его информером блогеров так как в моей задумки он выводит любое количество пользователей у которых есть хоть одна запись в блоге на вашем сайте это количество регулируется при создании информара но об этом я расскажу при установке а пока ещё несколько слов о скрипте вид я сделал ему широкий в две колонки так как привык считать что так должно быть на сайте такой тематики

Установка

Для начало нам нужно создать информер для этого перейдём по пути
Админ панель - Инструменты - Информеры
теперь в правом углу жмём кнопку создать информер
выбираем параметры

Название информера: ЛЮБОЕ
Раздел: ПОЛЬЗОВАТЕЛИ
Способ сортировки: КОЛ. СООБЩЕНИЙ В БЛОГЕ
Количество материалов: ЛЮБОЕ
Количество колонок: 1
Жмем создать и после того как он появится жмём на [Шаблон информера] рядом с названием только что созданного информера и в открывшемся окошке заменяем весь код на вот этот

Код
<div id="block_vb">  
  <div id="block_vb_user"><span><a href="$PROFILE_URL$"><img src="$AVATAR_URL$"></a></span><b>$USERNAME$</b><i>$GROUP_NAME$</i></div>  
  <div id="block_vb_bot"><b>Блогов $BLOG_POSTS$</b><a href="/blog/0-0-$USER_ID$-0-17">Читать блог</a></div>  
  <div id="block_vb_img"><img src="ТУТ ССЫЛКА НА КАРТИНКУ ФОНА"></div>  
  <div id="clr"></div>  
  </div>


Важно замените текст в коде ТУТ ССЫЛКА НА КАРТИНКУ ФОНА на ссылку на картинку что будет фоном
всё сохраняем и копируем код самого информер он выглядит так $MYINF_1$ только в место 1 у вас может быть другая цифра 2б3б4б5 итд
после того как вы его скопировали вставьте его на нужной странице где хотите видеть список блогеров

Ну и последний шаг это стили нашего информер.
скопируйте и вставьте код ниже в вашу таблицу стилей в самый конец.

Код
#block_vb {  
  position: relative;  
  width: 45%;  
  height: 220px;  
  overflow: hidden;  
  float: left;  
  margin: 2.5%;  
}  

#block_vb_user {  
  position: absolute;  
}  

#block_vb_user span {  
  width: 60px;  
  height: 60px;  
  display: block;  
  float: left;  
  margin: 15px;  
  overflow: hidden;  
  border-radius: 50%;  
}  
#block_vb_user span img {  
  width: 60px;  
  height: 60px;  
  object-fit: cover;  
}  

#block_vb_user b {  
  font-size: 16px;  
  font-style: normal;  
  color: #FFF;  
  margin: 17px 0 0;  
  display: block;  
  margin-left: 90px;  
}  

#block_vb_user i {  
  font-size: 13px;  
  font-style: normal;  
  color: #FFF;  
  display: block;  
  margin-left: 90px;  
}  

#block_vb_img {  
  min-width: 100%;  
  height: 100%;  
}  

#block_vb_img img {  
  object-fit: cover;  
  min-width: 100%;  
  height: 220px;  
}  

#block_vb_bot {  
  position: absolute;  
  bottom: 20px;  
  width: 100%;  
}  
#block_vb_bot a {  
  position: absolute;  
  color: #FFF;  
  font-size: 16px;  
  background: #B1A176;  
  right: 15px;  
  padding: 6px 15px;  
  text-decoration: none;  
}  
#block_vb_bot a:hover {background: #000;}  

#block_vb_bot b {  
  color: #FFF;  
  font-size: 14px;  
  font-style: normal;  
  float: left;  
  margin: 0px 20px;  
  line-height: 40px;  
}  
@media screen and (max-width: 700px) {  
#block_vb {width: 95%; float: none;}  
}


Сохраняем и готово!
04.02.2017 Просмотров: 662 Комментарий: (14)

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

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

Комментарий: 14
Сопрано
Сопрано 04.02.2017 16:381
0
В первые такой вижу, возможно но avatar нужно тоже вывести.
waak
waak 04.02.2017 18:216
0
Я не стал этого делать так как считаю что если пользозователь ведёт свой блог у него точно будет аватар но и кто хочет тот добавит
Kosten
Kosten 04.02.2017 18:259
0
С авай, это просто уже совершенно по другому смотрится.
FeStemBer
FeStemBer 04.02.2017 16:432
0
Почему именно блогера, здесь на любой сайт подойдет.
waak
waak 04.02.2017 18:258
0
Я же написал я так задумал по этому и назвал информер бпогеров
если вы заметили то на скрине видны надписи там выводится количество блогов у данного пользователя а по клику на кнопку читать открывается список всех блогов данного пользователя от сюда и название
Kosten
Kosten 04.02.2017 17:533
0
waak, это информер куда основном можно установить?
waak
waak 04.02.2017 18:2710
0
куда угодн! также можно просто использовать код под другие нужды типа вида материла просто заменив операторы
Nikas
Nikas 04.02.2017 18:014
0
не очень 26a
Kosten
Kosten 04.02.2017 18:247
0
А, что не очень, возможно грузить ава будет или по дизайн.
waak
waak 04.02.2017 18:3413
0
для вывода аватара не используются посторонние скрипты все работает на операторах а значит работать будет быстро
waak
waak 04.02.2017 18:2811
0
У каждого своё мнение и вкусы вы же наверняка слышали поговорку
На вкус и цвет товарищей нет
Сафрон
Сафрон 04.02.2017 18:035
0
Мне вот наоборот понравился, что то новое.
waak
waak 04.02.2017 18:2912
+1
Я рад!что хоть кто то оценил значит время потрачено не зря!
Tergran
Tergran 04.02.2017 19:4114
0
Сейчас по информерам вообще не чего нового нет, это редко что то найти можно. +
avatar