Blogger - спойлер для блога.


Ну что, многому вы уже научились, но еще даже и половины пути мы с вами не прошли дорогие друзья. В нашей кладовой осталось еще много разных и чудесных трюков по улучшению дизайна и работы шаблона blogger. В последней нашей статье мы разбирали, как разделить текст сообщения на колонки, в сегодняшней статье речь так же пойдет о примочке для контента, но не только для текста, а и для видео, картинок, таблиц и т.д. Часто бывает, что в своем посте нам нужно указать много разных элементов и чтобы все красиво смотрелось некоторые из них было бы неплохо припрятать под спойлер. Именно о том, как добавить на свой сайт стильный спойлер мы и поговорим. Это совсем не сложно и сам процесс добавления очень схож с тем, который был в вышеупомянутой статье о разделении текста на столбцы. Для тех кто хочет увидеть спойлер и пощупать его до установки можете перейти на наш тестовый блог.

Итак для того, чтобы добавить спойлер вам нужно открыть в панели управления раздел Шаблон - Изменить HTML найти код  ]]></b:skin> и перед ним вставить следующий код:
#flippy {
    text-align: center;
}
#flippy button {
    background: #4DB2EC;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    border: none;
    border-radius: 3px;
    padding: 8px 16px;
    margin: 10px auto;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    transition: background 0.1s ease-in-out;
}
#flippy button:hover, #flippy button:focus {
    background: #5A6269;
    outline: none;
}
#flippanel {
    padding: 1px;
    text-align: left;
    background: #;
    border: 0px;
}
#flippanel {
    padding: 24px;
    display: none;
}


Затем сохраняете шаблон и при создании поста для добавления спойлера используем следующий код:
 
<div id="flippy"><button>Спойлер</button></div>
<div id="flippanel">
Здесь должен быть ваш контент
</div>

Добавили код опубликовали пост и проверяем, что у нас вышло. Теперь для вас не составит труда спрятать ту часть поста, которая не совсем вписывается в его интерьер.

Увы этот спойлер имеет один минус, его нельзя использовать дважды в одном и том же посте из-за того, что его id повторяется и тот спойлер, который был добавлен первым уже не срабатывает. По-этому тем кому нужно использовать спойлер несколько раз в одном посте, я предлагаю использовать другой спойлер, правда он будет не столь красив, как первый.

Итак каждый раз когда нужно скрыть содержимое поста, переходите из вкладки Создать на вкладку HTML и добавляете следующий код:

<div><input value="Показать содержимое" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Скрыть содержимое';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Показать содержимое';}" type="button" /><div style="display: none;">Вставьте сюда контент, который нужно спрятать</div></div>

Вроде бы все.


Коммент.

BLOGGER: 5
Loading...
Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: Blogger - спойлер для блога.
Blogger - спойлер для блога.
BLogspot как установить на блог спойлер. Стильный спойлер для блога.
http://3.bp.blogspot.com/-Has4Hluhd3k/VdM7I93af2I/AAAAAAAAgJ0/beMkrowtYEA/s400/Blogger%2B%25D1%2581%25D0%25BF%25D0%25BE%25D0%25B9%25D0%25BB%25D0%25B5%25D1%2580%2B%25D0%25B4%25D0%25BB%25D1%258F%2B%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%25D0%25B0.png
http://3.bp.blogspot.com/-Has4Hluhd3k/VdM7I93af2I/AAAAAAAAgJ0/beMkrowtYEA/s72-c/Blogger%2B%25D1%2581%25D0%25BF%25D0%25BE%25D0%25B9%25D0%25BB%25D0%25B5%25D1%2580%2B%25D0%25B4%25D0%25BB%25D1%258F%2B%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%25D0%25B0.png
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2015/08/blogger-spoiler-dlya-bloga.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2015/08/blogger-spoiler-dlya-bloga.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy