Новое в блоге
Loading...
18 дек. 2011 г.

Скрыть текст под спойлер для Blogger/Blogspot

Здравствуйте! Займёмся сегодня очень полезным уроком, а именно: как скрыть текст под спойлер для Blogger. Спойлер--это  возможность создать в статье, посте разворачиваемые блоки скрытого текста. Наверное примерно так.Используют спойлер как для экономии места, так и для скрытия информации. Для Blogger тоже есть несколько решений как сделать скрытый текст в сообщениях. Я Вам сейчас покажу самый простой и удобный способ как добавить спойлер в блог.Чтобы потрогать и испытать  спойлер, я Вас попрошу в демонстрационный блог. Если Вы готовы добавить к себе в блог,тогда перейдите в Шаблон--Изменить HTML.С помощью сочетанием клавиш (Ctrl+F) Вам надо найти  строку в  шаблоне: </body> Перед этой (чуть выше) строкой - добавьте этот код:

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Открыть спойлер";
}
else {
ele.style.display = "block";
text.innerHTML = "Скрыть текст";
}
}
</script>
Всё, теперь сохраните шаблон. Теперь при добавлении сообщения в режиме HTML пользуйтесь этим кодом:

<a href="javascript:toggle();" id="displayText">Открыть спойлер</a>
<div id="toggleText" style="display: none;">Здесь должен быть ваш текст</div>

Всего доброго.Желаю удачи.

Может Вас заинтересует Как создать свой ​​собственный шаблон Blogger

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

15 коммент. :

  1. скажите для чайников, ГДЕЕ найти
    Дизайн--Изменить HTML (((

    ОтветитьУдалить
  2. Заходишь Blogger-дизайн и т.д.

    ОтветитьУдалить
  3. Ответы
    1. Привет,Ярослав!Спасибо за найденную ошибку.

      Удалить
  4. А как сделать, чтоб просто кнопочка была "Спойлер" в строке редактирования (как есть кнопка "Вставить ссылку дальше"

    ОтветитьУдалить
  5. Сергей, спасибо за статью! У меня все получилось, но один нюанс: мне нужно в посте сделать два спойлера. Я добавляю один и тот же код - с разными текстами, конечно. Первый спойлер открывается нормально, а при открытии второго опять открывается первый. Как сделать, чтобы каждый спойлер открывал свою информацию?

    ОтветитьУдалить
    Ответы
    1. Привет,Надежда!Вот воспользуйтесь первым спойлером. Хоть два вставляйте, хоть три.http://shkolablogger.ru/kak-spryatat-tekst-kartinku-pod-spojler-spoiler.html

      Удалить
    2. Спасибо, Сергей! Все получилось:)

      Удалить
  6. Крутяк даже в виджетах работает спасибо то что нужно.

    ОтветитьУдалить
  7. Установил данный скрипт, вроде сделал все правильно, но не открывает он спойлер, выделяется при наведении и при нажатии никак не реагирует.. ссылка http://dejurelib.com/index.php/konsultacii-mn/obraztsy-dokumentov/103-sait/obrazci-documentov-k/obr-dogovora/dogovora-kupli-prodazhi-nedvizhimosti

    Может сможете посмотреть и подсказать, в чем причина? движок joomla 2.5

    ОтветитьУдалить
    Ответы
    1. Воспользуйтесь этим - http://www.dljablogger.ru/2012/01/stilnyj-spojler-dlja-blogger.html у меня на движке wordpress работает.

      Удалить
  8. Сергей, установил и рекомендуемый Вами спойлер, такая же ерунда.. по той же ссылке если перейдете, то увидите. Почему движок блокирует их интересно, в чем причина...

    ОтветитьУдалить
    Ответы
    1. Даже не могу сказать, joomla для меня темный лес.Вроде для вашего движка существуют расширения, как в вордпресс плагин Advanced Spoiler.

      Удалить
  9. А у меня не получается все, свернуто, а когда нажимаю на ссылку меня перебрасывает на страницу с ошибкой, что я делаю не так?

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

 
Footer