Спойлер - как спрятать текст

blogger blogspot spoiler button
Спойлер - очень частое явление на сайтах. С его помощью скрывают объёмные части теста, чтобы придать статье более аккуратный вид. В общем-то спойлеров развелось довольно много, об одном я даже писал (на тот момент я не планировал вести блог и делал краткие записки).

Спойлер (spoiler) - это не только простая надпись, при тыцке которой появится содержимое (прямо как у меня ссылка на твиттер и переводчик, единственные уцелевшие элементы со старого шаблона), к его оформлению тоже можно творчески подойти. Например, сделать в виде кнопки.

Смотрим дему ↓



Реализация ↓
Наверняка вы уже догадались, что сейчас будет ковёр стилей и маленькая фитюлька кода спойлера.
Да, так оно и есть.
Теперь немного отвлечёмся и посмотрим на сайт спонсора:
android soft programs
Rusandroid.org - это самый разнообразный и бесплатный софт для мобильной ОС Android: утилиты, приложения, игры, обои. Также советую посмотреть, как сделано меню на этом сайте.

Возвращаемся к созданию спойлера.
Нужно:
1) jQuery - библиотека должна быть прописана в шаблоне Blogspot, это уже стандарт. Если ссылка ещё не стоит в шаблоне, рекомендую использовать репозиторий скриптов Яндекса, у него самая хорошая отдача.

2) Стили.
У меня есть генератор css кнопок в блоге, поэтому внешний вид кнопки я сотворил именно там.
Использованные в демонстрации стили:
<style type="text/css">
input[type="button"] {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   text-decoration: none;
   vertical-align: middle;
   }
input[type="button"]:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
input[type="button"]:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }
#spo {
   border-top-color: #f0f5f5;
   background: #f0f5f5;
   color: gray;
   }
</style>
Где:
input[type="button"] - оформление кнопки по умолчанию
input[type="button"]:hover - оформление кнопки при касании
input[type="button"]:active - оформление кнопки при нажатии
#spo - область, содержимое спойлера

Стили не надо таскать на каждой странице, достаточно один раз скопировать в css область шаблона и забыть про них.

4) Код спойлера:
<input onclick="$('#spo').toggle(500)" type="button" value="спойлер" />
<div id="spo" style="display: none; > сюда помещается то, что необходимо скрыть
</div>
Где:
toggle(500) - скорость "открывания" спойлера (рекомендую поиграться с цифрами: на высоких значениях (1500) текст выстраивается побуквенно, на низких значениях (50) показывается моментально)

Не рекомендую увлекаться спойлерами (один раз я встретил блог, у которого на странице было штук 30 спойлеров, закрывалось каждое предложение с матами), хорошего, как и плохого - всё должно быть в меру.

13 комментариев:

  1. Я думал ты уже запил. Не в тему, но (ИМХО) эти рекламные блоки внутри текста - верный способ убить хороший блог, наравне с прыгающими жопами по всему сайдбару. Оно точно того стоит?

    ОтветитьУдалить
  2. С биржы выгонят, если заказы не принимать, к тому же там копеечка, сям копеечка - и того на хостинг и выделенку собрал, так что, думаю, того стоит.
    зы: как сделаю ремонт - запью :-).

    ОтветитьУдалить
  3. Привет Аldous!У меня ни чего получилось.Просьба теперь,заглянуть в мой блог.У меня и у моих читателей вверху слева появилась белая полоса со стрелкой.Она меня и другим очень напрягает.Мог ты бы помочь разобраться как исправить это.Очень буду благодарен.

    ОтветитьУдалить
  4. Заглянул. На http://new-school-blogger.blogspot.com никаких аномалий не выявлено.

    ОтветитьУдалить
  5. Как с вами можно связаться?

    ОтветитьУдалить
  6. Внизу на странице ссылка "обратный связь" =).

    ОтветитьУдалить
  7. видимо вы пропустили 3-й шаг, сразу за 2-м 4-й... )))

    ОтветитьУдалить
  8. не получается что-то... вставил стиль в шаблон html, вставляю код спойлера а в него видео с ютуба, визуальные эффекты все пашут, а все остальное нет. Ах да и пишет что ошибка в DIV вот: http://cs405529.userapi.com/v405529514/65b4/baI1v6_Kj8k.jpg

    ОтветитьУдалить
  9. Посмотрите в браузере исходник этой страницы - http://pizd.blogspot.ru/2013/02/blog-post.html
    Я туда вставил код демо из заметки и проверил.

    ОтветитьУдалить
  10. а все понятно :)
    просто jquery не прописан был. спасибо

    ОтветитьУдалить
  11. Хмм, почему-то кнопочка спойлера появляется, в поместить в нее ничего не выходит, она все время оказывается пустой.
    Я первый раз этим все занимаюсь, так что, наверное, косячу где-то, подскажите. что не так.

    Самый первый код отсюда http://blogger.omg-linux.ru/2011/07/blogger-jquery.html я помещаю над /head

    Код из второго шага отсюда я помещаю в "добавить css" в меню правки шаблона.

    И вставляю код спойлера (шаг четвертый отсюда) непосредственно в текст.

    В чем проблема?) Я студент гуманитарного вуза, так что не ругайтесь сильно :)

    ОтветитьУдалить
  12. Видимо у меня тоже что-то с jquery. Пишет тоже, что DIV не закрыт. Как прописать этот jquery правильно?)

    ОтветитьУдалить
  13. Вот код прямо из демо:

    <style type="text/css">
    input[type="button"] {
    border-top: 1px solid #96d1f8;
    background: #65a9d7;
    background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
    background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
    background: -moz-linear-gradient(top, #3e779d, #65a9d7);
    background: -ms-linear-gradient(top, #3e779d, #65a9d7);
    background: -o-linear-gradient(top, #3e779d, #65a9d7);
    padding: 5px 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: white;
    font-size: 14px;
    text-decoration: none;
    vertical-align: middle;
    }
    input[type="button"]:hover {
    border-top-color: #28597a;
    background: #28597a;
    color: #ccc;
    }
    input[type="button"]:active {
    border-top-color: #1b435e;
    background: #1b435e;
    }
    #spo {
    border-top-color: #f0f5f5;
    background: #f0f5f5;
    color: gray;
    }
    </style>
    <input onclick="$('#spo').toggle(800)" type="button" value="спойлер" />
    <div id="spo" style="display: none;">
    <img src="http://1.bp.blogspot.com/-Y9lTDSE_jbc/T8kVShOXujI/AAAAAAAAKcM/0NUjbjDoZyQ/s320/xcBTo2WMQmk.jpg" style="float: left; margin-left: 10px; margin-right: 10px;" />Текст спойлера.</div>
    .
    Попробуйте разом всё вставьте в пост, потом будет ясно, что и куда распихивать.

    ОтветитьУдалить