388x60 Ads

Создание спойлера в Blogspot (Blogger)

Создание спойлера в Blogspot (Blogger)

Доброго времени суток!

Сегодня я хочу рассказать вам , как создавать спойлер в Blogspot (Blogger).

С необходимостью решения этой задачи, я столкнулся в процессе оформления своей страницы Обзоры, которая раньше была в этом блоге.

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

Решение задачи состоит в следующем. Заходите в режим Дизайн, выбираете Отправка, а в ней Редактирование страниц. В том, месте, где нужно установить спойлер вставляете такой код:
<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> Подробнее : <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 = 'Скрыть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Показать'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Показать" /> </div>  <div class="alt2" style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: whitesmoke; background-image: none; background-position: 0% 50%; background-repeat: repeat; border: 1px inset; line-height: 1.5em; margin: 0px; padding: 6px;"> <div style="display: none;"> Ваш текст... <br/> </div> </div> </div>

Подробнее :
Erho
Эрхо.ру - это блог одного из моих друзей по по Яндекс клубу "Обмен ссылками и статьями".

Показатели тИЦ и PR

По состоянию на 5 апреля 2011 тИЦ 10 PR 2.

Дизайн

Дизайн блога оригинальный и выгодно отличается от дизайна других подобных блогов. Создание веб дизайна довольно не простой процесс. Если вам нужна помощь в создании веб дизайна, можете обращаться к автору блога Эрхо.ру.

Полезность

Блог содержит разнообразную тематику: блогокомментарии, как делать деньги, как стать успешным в жизни, маркетинг. По крайней мере, вебмастер, или человек , имеющий отношение к маркетингу, может найти там полезную информацию.

Идею подсказал автор блога Tutorial Blog, Tips and Tricks.

От себя хотел бы добавить еще один способ создания спойлера.
Открываем вкладку Дизайн, добавляем гаджет HTML/JavaScript, а в него вставляем код:
<script type="text/javascript"> //<![CDATA[ function blarg(id) {var obj = document.getElementById(id);if( obj.style.display == "none" ) { obj.style.display = "block"; } else { obj.style.display = "none"; }}//]]></script>

Дальше в самом сообщении выбираем часть текста, которую нужно спрятать под спойлер:

<h3><a href="#" onclick="blarg('n1');return false">

Обзор блога 1

</a></h3><div style="display: none;" id="n1">

Скрытый текст.

</div>



<h3><a href="#" onclick="blarg('n2');return false">

Обзор блога 2

</a></h3><div style="display: none;" id="n2">

Скрытый текст.

</div>   
Раньше именно второй вариант, я использовал в новом шаблоне моего блога на странице Обзоры, но сейчас он пока не работает. Дело в том, что часть кода при сохранении автоматически по каким то причинам начала заменяться на совершенно иной.

Создание спойлера в Blogspot







Подпишитесь В закладки НапечататьPrint Friendly and PDF


Вячеслав Вареня
Статус: seo-специалист | Контакты


14 коммент.:

Blogger комментирует... [Ответить]

Боюсь, у вас битая (404)ссылка на страницы с Обзорами... А хотелось бы посмотреть, как спойлеры выглядят в деле)

БЛОGГЕР комментирует... [Ответить]

Да, вы правы. Действительно ссылка была битая. Уже подправил. Что касается спойлера на странице Обзоры, то после смены шаблона я пока не решил, установить там спойлер или нет...

CosmoAdvisor комментирует... [Ответить]

Ну вот так всегда) Только найдешь что-то интересное, как оно уже неактуально кому-то другому(( Кстати, хотела немного не в тему спросить: заметила, что на главной у вас не анонсы статей, а полный текст.. Не считаете ли вы, что из-за этого вы можете получить большую долю отказов, чем могли бы, поставив ссылку *Дальше*?

БЛОGГЕР комментирует... [Ответить]

Спасибо за комментарий. да, я думал об этом и работаю над этим :)

Flee.lancer комментирует... [Ответить]

Спасибо, мне как раз нужен спойлер. Я довольно часто пишу длинные тексты, но как насчёт индексирования этого спойлера? ПС к нему относятся как простому тексту?

БЛОGГЕР комментирует... [Ответить]

Да, поисковые системы относятся как к простому тексту.

Loveholic комментирует... [Ответить]

Спасибо вам! Очень полезное руководство

Надеюсь, что скоро кнопку создания спойлера вмонтируют в редактор, тк функция действительно нужная.

Loveholic комментирует... [Ответить]

Спасибо вам! Руководство оказалось очень полезным

Надеюсь, в скором времени скнопку для создания спойлера вмонтируют в визуальный редактор, тк функция нужная.

БЛОGГЕР комментирует... [Ответить]

@Loveholic

Я тоже это надеюсь. Хотя, как я вижу разработчики не особо спешат это внедрять.

Виктория комментирует... [Ответить]

отличная идея

Mister Mauzer комментирует... [Ответить]

Первый способ попробовал и очень он мне понравился. Появилась кнопка и пустая рамка. При нажатии на кнопку рамка разъехалась. В теле рамки появился текст - этот факт впечатляет.

Mio комментирует... [Ответить]

мне очень хотелось бы похожий вариант только при нажатии на спойлер можно было чтобы название спойлера менялось (ну допустим)
Отркыть спойлер, Закрыть спойлер
заранее спс

Татьяна комментирует... [Ответить]

Уже есть готовые шаблоны, на которых текст постов так и выходит в сокращённом виде.И это шаблоны для Блогспота.
А вот как на блогспоте сделать выход Похожих статей под каждым постом?

Вячеслав Вареня комментирует... [Ответить]

Лично я использую для вывода похожих статей жава скрипт.