пятница, 15 марта 2013 г.

Спойлер в Blogger.


Иногда есть необходимость спрятать текст или изображение в статье. Ради шутки или красоты, причины разные. Спросите какая может быть в этом красота? А Вы вспомните, как выглядят скрипты. Часто они портят внешний вид своими закорючками, отрывками фонов. Читать его смысла нет, но сам код вставить нужно. Вот тут-то и придет на помощь спойлер. Но это мне. Чем может такое пригодиться рядовым блоггерам?

За спойлер можно спрятать цитату или примечание. Кстати, хотела выложить определение спойлера, но везде пишут, что образовано от гадить, и передумала.

Улыбнуло. Пока искала информацию, среди прочего на глаза попало такое:
"спойлер установленный в автомобиле не играет никакой роли в аэродинамике. Зачем тогда он нужен? Так, для красоты и понтов."
Смешно, но именно эта фраза, которая абсолютно не относится к сайтам (блогам) выразила всю суть. То бишь скрытое под спойлером не делает страницу легче. Но спойлер может визуально облегчить главную страницу и сделать удобнее быстрый просмотр.

Например. Когда я писала, что на главной странице нужно оставить только анонсы, а остальное убрать под кат (статья тут ), в комментариях писали, что терпеть не могут, когда в открывшемся посте всего строчка текста и одна фотография. В подобном случае вполне можно воспользоваться спойлером. Непонятно?



Вы открыли новый, неизвестный Вам блог. Нужно быстрым взглядом определиться, нравится или нет то, что в блоге содержится. Если в блоге только анонсы, то представление приходит очень быстро: Вы либо подписываетесь, либо уходите. Когда на главной посты полностью, то утомительный первый пост может стать причиной, что до второго третьего интересного можете не добраться. Чтобы такого не было, нужно писать привлекательные анонсы и выкладывать на затравку интересные фото. 

А если текст не длинный, но выглядит как много букофф? Или первая фотография красивой детской шапочки, а короткая схемка все портит? В общем спойлер нужен для красоты и понтов, как в автомобиле. 

Ой, простите. Может кто-то так и не понимает о чем речь? Вот пример. Под спойлером спрятано фото моей старшей дочки Сони. Это сейчас она помощница и взрослая четырех летняя девочка, а на фото ей 1,5 года.
Нажмите для просмотра:
Нравится? Мне он нравится простотой установки, так как ранее найденные требовали устанавливать их сначала в шаблон, в который без особой необходимости я предпочитаю не соваться.

Итак. Написали часть сообщения, потребовалось в конкретное место установить спойлер. Мой чайниковский совет: нажмите раз 5 enter (энтер), чтобы снизу были пустые строчки, так как после установки спойлера у меня не получилось поставить курсор ниже, пришлось удалять.

1.Нажимаем четыре заветные HTML слева вверху.
2.Среди абры кадабры спускаемся вниз, вместо одного из br с закорючками, вставляем следующий код.


<div style="margin: 5px 20px 20px;">

<div class="smallfont" style="margin-bottom: 2px;">

<b>Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Open/Close" /> </div>

<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">

<div style="display: none;">


Здесь Ваш текст, скрипт или картинка


<br>

</div>

</div>

</div>



Слово Spoiler можно заменить. Я написала Нажмите для просмотра. Главное, не зацепите скобочки. Вообще в этом скрипте много чего настраивается, но это немного не для чайников или просто отдельная тема, если захотите.

3.Теперь фразу Здесь ваш текст, скрипт или картинка меняем на любую свою или целый текст (Вы его могли написать ранее привычным способом, вырезать из сообщения и вставить в скрипт)

4.Как вставить изображение? Если обратите внимание, то заметите, что часть инструментов присутствует и когда наше сообщение в виде закорючек. То есть выше есть привычный способ вставить изображение.
Вместо этой красной фразы привычным способом вставляем картинку. Если есть необходимость, то снизу подписываем ее.

5.Нажимаем СОЗДАТЬ (слева сверху), чтобы попасть в привычный вид сообщения.

Работает или нет спойлер в просмотре не видно, узнаете после публикации. Именно для проверки его работы мне вчера пришлось опубликовать начало сообщения)).

Это не единственный найденный мною в блогах у умных мужчин вид спойлера. Конкретно этот нашла в http://new-school-blogger.blogspot.ru/2012/01/stilnyj-spojler-dlja-blogger.html , но там нет инструкции как установить. Только скрипт.

И помните, что я очень люблю Ваши комментарии и рекомендации в виде +1 для других пользователей всемирной сети.

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

  1. Ты всегда прям интригуешь!))

    ОтветитьУдалить
  2. Какая штука интересная! А как ее установить-то?

    ОтветитьУдалить
  3. Здорово!!!! Моя мечта!!!
    А Пусик - твоя младшая? Класс!

    ОтветитьУдалить
  4. Спасибо!
    Как всегда, очень интересно и полезно!

    ОтветитьУдалить
  5. Наташ, так это именно то, чего мне иногда не хватает!!
    Спасибо! Пригодится!
    [mark]И мне очень нравится, что не надо лезть в шаблон!!![/mark]

    ОтветитьУдалить
  6. огромное спасибо, долго не мог понять, как это сделать, а тег more только один раз вставляется

    ОтветитьУдалить
  7. А как в шаблоне страницы сделать?

    ОтветитьУдалить
    Ответы
    1. Олег, в шаблоне их делать не нужно, они есть по умолчанию. А вот как их сделать видимыми, можно прочесть в двух статьях. Если не сложно, откройте карту сайта и найдите КАК СДЕЛАТЬ СТРАНИЦЫ ВИДИМЫМИ? и КАК СДЕЛАТЬ СТРАНИЦУ ССЫЛКОЙ НА ДРУГОЙ СЕРВИС?

      Удалить
  8. Спасибо:) Очень оригинальный пост, самое главное все получилось

    ОтветитьУдалить
  9. Спасибо! Очень хорошо написано. И очень просто, что важнее.

    ОтветитьУдалить
  10. Этот комментарий был удален администратором блога.

    ОтветитьУдалить
    Ответы
    1. Комментарий удален из-за ссылки, но попытаюсь ответить на вопрос. Попробуйте заново скопировать скрипт, возможно забыли какую скобочку или один див со скобочками в конце (в скрипте их три открывающих, должно быть и три закрывающих)

      Удалить
  11. Спасибо! Разобрался, работает.
    Было 50 картинок по вертикали, осталось 3, остальное спрятал. КРАСОТЕНЬ!

    ОтветитьУдалить
  12. Спасибо! Достаточно просто и понятно.

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

Дорогой мой читатель, если Вам понравилась статья, то напишите отзыв, мне очень приятно читать комментарии. А если Вы посчитаете, что статья достойна того, чтобы ее порекомендовать остальным, нажмите на +1.

Хотите сохранить полезную информацию в соц.сетях? Выбираем и сохраняем!

LinkWithin

Related Posts Plugin for WordPress, Blogger...