Содержание
Интересный скрипт, который объединит информеры Вашего сайта в один блок. Дизайн блока прост и разобраться с ним сможет любой пользователь. В верху находятся переключатели, нажимая на которые, мы переключаемся между информерами.
Первым шагом является установка каркаса блока. В нужное место (обычно это первый или второй контейнер) вставляем код:
<div class="blockr tabs_block"> <div class="tabs"> <input id="tab1" type="radio" name="tabs" checked> <label for="tab1" title="Wordpress">Новые </br>материалы</label> <input id="tab2" type="radio" name="tabs"> <label for="tab2" title="Windows">Топ </br>пользователи</label> <input id="tab3" type="radio" name="tabs"> <label for="tab3" title="HTML5">Новые</br> пользователи</label> <section id="content1">Информер 1</section> <section id="content2">Информер 2</section> <section id="content3">Информер 3</section> </div> </div>
Далее необходимо создать и настроить информеры. Заходим в Панель управления сайтов (ПУ) — "Инструменты" — "Информеры".
Создаем информер "Новые материалы".
В шаблон информера вставляем этот код:
<a href="$ENTRY_URL$">$TITLE$</a>
Создаем информер "Топ пользователи"
В шаблон информера вставляем этот код:
<a href="$PROFILE_URL$" class="inf_ava"> <?if($AVATAR_URL$)?> <img src="$AVATAR_URL$"><?else?> <img src="/img/no_avatar.png"> <?endif?> <span>$USERNAME$</span> </a>
Создаем информер "Новые пользователи"
В шаблон информера вставляем этот код:
<a href="$PROFILE_URL$" class="inf_ava"> <?if($AVATAR_URL$)?> <img src="$AVATAR_URL$"><?else?> <img src="/img/no_avatar.png"> <?endif?> <span>$USERNAME$</span> </a>
В таблицу стилей CSS прописать стили:
/* Базовый контейнер табов */ .tabs { /* min-width: 320px; */ /* max-width: 800px; */ padding: 0px; margin: 0 auto; } /* Стили секций с содержанием */ section { display: none; /* padding: 15px; */ background: #fff; /* border: 1px solid #ddd; */ } .tabs input { display: none; } /* Стили вкладок (табов) */ .tabs label { display: inline-block; padding: 10px 0px; text-align: center; text-transform: uppercase; width: 33%; font-size: 11px; box-sizing: border-box; color: #2e3337; background: white; line-height: 16px; } /* изменения стиля заголовков вкладок при наведении */ .tabs label:hover { color: #55adf5; cursor: pointer; } /* стили для активной вкладки */ .tabs input:checked + label { color: white; background: #55adf5; border-color: #55adf5; } /* активация секций с помощью переключателя :checked */ #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 { display: block; } .tabs a{color: #55adf5;text-decoration: none;padding: 15px 0 0 0; display: inline-block;} .tabs a:hover{color:#488ac2;} #content1, #content2, #content3{margin-top:30px;} .tabs label:nth-child(2){ border-radius: 3px 0 0 3px; border: 1px solid #55adf5; } .tabs label:nth-child(4){ border: 1px solid #55adf5; border-left: none; border-right: none; margin: 0 0 0 -4px; } .tabs label:nth-child(6){ border-radius: 0 3px 3px 0; border: 1px solid #55adf5; margin: 0 0 0 -7px; } .inf_ava{width: 100%;color: #2e3337 !important;padding: 0 !important;margin: 0 0 40px 0 !important;} .inf_ava img{width: 80px;height: 80px;float: left;border-radius: 50%;margin-right: 20px;} .inf_ava span{margin-top: 35px;display: inline-block;} .inf_ava:hover{color: #55adf5 !important;}
На этом установка завершена.
Заменяем "Информер 1/2/3" на коды информеров (например, $MYINF_1$, $MYINF_2$)
Источник: ucozbook
Лицензия: CC BY-SA 4.0
Автор: Юрий Герук
Благодарность автору!Здравствуй Гость, как Вы видите еще никто не оставил свой комментарий, будьте первым, поделитесь мнением о материале выше.
Здравствуй Гость, комментарии могут оставлять только зарегистрированные пользователи, зарегистрируйтесь и поделитесь мнением о материале выше Регистрация или Войти.