С помощью CSS можно изменить гаджет постоянные читатели.
Итак, сделать гаджет постоянные читатели в виде спойлера, используя CSS.
Копируем к себе в черновик этот код
#Followers1 {
background: #F0F0FF;
overflow: hidden;
border: 1px solid #C04D00 ;
border-radius: 5px;
box-shadow: none; /
-webkit-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
-moz-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
-o-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
height: 80px;
width: auto;
}
#Followers1:hover {
background: #FAF5FF;
border: 1px solid #A08BED;
-webkit-box-shadow: 0 1em 1em .3em rgba(0,0,6,0.5); /*Chrome*/
-moz-box-shadow: 0 1em 1em .3em rgba(0,0,6,0.5); /*FF*/
box-shadow: 0 1em 1em .3em rgba(0,0,6,0.5);
height: 300px;
}
#Followers1 > h2 {
display: none;
}
#Followers1-wrapper {
box-shadow: none;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-o-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
}
#Followers1-wrapper:hover {
-webkit-box-shadow: inset 0 0 1em .3em #c9f;
-moz-box-shadow: inset 0 0 1em .3em #c9f;
box-shadow: inset 0 0 1em .3em #c9f;
height: 300px;
}
Давайте сейчас разберёмся в настройках. Тут можно много чего поменять, но остановимся, на основных. Они выделены синим цветом. Рассмотрим сверху вниз по порядку.
background: #F0F0FF; -цвет основного фона
#C04D00 -цвет рамки
height: 80px;-это высота гаджета в состоянии покоя
height: 300px;-эта высота всего гаджета. Её нужно будет редактировать на свой вкус. В двух местах.
Обратите внимание на 2 строки в коде #Followers1 > h2 {
display: none; этот участок отвечает за название гаджета. Если оставить в таком виде, то он будет без названия. Название осталось. Вот и все настройки.
Когда код готов, заходим в шаблон-изменить HTML. Находим строку ]]></b:skin>и прямо над ней вставляем его. Сохраняем.
Ещё на один момент. Так как, шаблоны могут быть разные нужно проверить вот такой идентификатор гаджета постоянные читатели- #Followers1. У вас он может быть несколько другой #Followers2 или 3. В этом случае эти цифры нужно поменять на свои.
И давайте посмотрим, как это узнать.
Зайдите во вкладку дизайн. Видим гаджет постоянные читатели( может у вас другое название)
и нажимаем изменить. Дальше подведите курсор к самому верху где указан адрес. Нажмите левую кнопку мыши и тяните бегунок вправо. В самом конце будет искомый Followers.
Посмотрите на скриншот ниже.
В результате, мы получаем новый дизайн гаджета постоянные читатели. Добавим места в боковой колонке.
Закрыть ссылку гаджета постоянные читатели.
(http://www.shpargalochki.ru/2014/04/zakryt-ssylku-gadzheta-pch.html#more)
Не так давно мы уже поднимали эту тему в посте убрать всё лишнее с главной страницы блога(http://www.shpargalochki.ru/2014/01/ubrat-lishnie-ssylki.html).
А именно , как убрать кнопки быстрого редактирования.
Однако, этот способ не прошёл с гаджетом постоянные читатели. Я сама долго ломала голову, как закрыть ссылку этого гаджета (я ведь тоже только учусь). Заходим на главную страницу нашего блога и нажимаем правую кнопку мыши. В открывшемся окне выбираем просмотр кода страницы.
В этом коде находим строку такую строку Followers1-wrapper.
Мы её видим и через строчку ниже начинается код <script type="text/javascript">.....
Код достаточно большой и заканчивается он примерно вот так .
height: 260,
|
|
|
site: "14730854670774716477",
|
|
locale: 'ru' },
|
|
skin);
|
|
</script>
|
Копируем весь этот код (от и до).
ДИЗАЙН-ДОБАВИТЬ ГАДЖЕТ-HTML/JavaScript и вставляем скопированный код. Называем гаджет, как нам хочется и перетаскиваем его в любое место блога.
После всего этого остаётся только зайти в шаблон (не забывайте делать копию шаблона) , найти строку <b include name='quickedit'/> и закрыть вот таким образом <!-- <b include name='quickedit'/> -->. Просматриваем блог и сохраняем изменения.
Ну вот и ещё от лишних ссылок мы освободили свой блог. Когда всё проделали смело можно убрать старый гаджет постоянные читатели. Узнать как изменить дизайн этого (http://www.shpargalochki.ru/2014/09/kak-izmenit-gadzhet-postojannye.html#more) гаджета .
0 коммент.:
Отправить комментарий