четверг, 4 октября 2012 г.

Спойлеры (скрытие текста) \рабочие\основные. Йёжа Йежов


Это обзорная статья по спойлерам .Материал взят из инета . Ссылки на первоисточники прилагаю .
Что такое спойлеры ? Это скрытие части текста ,которую при необходимости можно развернуть .Спойлер способствует компактности сообщения  ,так что вещь в хозяйстве нужная ! Чаще пользуюсь седьмым спойлером ,раньше пользовался больше первым.И первый и седьмой позволяют делать несколько спойлеров на одной странице ,впрочем ,не только они .С помощью 7 спойлера сделано допустим содержание раздела моего блога "О том и о сёмНаше кино  , Не наше кино  ,а также  Содержание статьи о блогах данного раздела про блоги ,единствено ,если захочется к примеру поставить и седьмой и первый спойлеры на одном блоге ,надо будет ковыряться и прописывать разные стили .Я это делать не очень умею ,точнее совсем не умею ,хотя для данной статьи всё-таки получилось совместить Первый спойлер и Седьмой .

Спойлер один .
Делается много спойлеров на одной странице ,без проблем 
Взято с блога Наблюдатель за Переходом
Название статьи
Как делать спойлер в блоге

Можно пофантазировать и немного изменить вид .
  Код можно здесь взять
 http://www.divshare.com/download/19480846-816
Инструкция по установке под спойлером .....
1.В редактировании блога Шаблон  - Изменить HTML - поставить галку Расширить шаблоны виджета.
2. Найти </head> (как это сделать описано в статье Найти строчку или код в шаблоне и в сообщении в режиме HTML Йёжа Йежов  и вставить перед ним  :


<style> /* Стили для спойлера */ .bar { background:#B2BDCB url('http://lh5.ggpht.com/_3_wwcvitlLc/SlqyHLMerfI/AAAAAAAABKk/T3rgvkvrTZY/spoiler.png') no-repeat; padding-left: 30px; color: #1A3457; height:26px; font-weight:bold; cursor:pointer; } /* Скрытый спойлер */ .spoiler-hidden .bar { background-position: 0 0; } .spoiler, .spoiler-hidden .text { display: none; } /*Открытый спойлер */ .spoiler-visible .bar { background-position: 0 -26px; } .spoiler-visible .copy { text-align:right; font-size:0.6em; } .spoiler-visible .text { display:visible; padding: 0 1em; border: 1px dashed #B2BDCB; border-top-width:0; }</style>


3.Найти </body> и вставить перед ним:

<script src='http://sites.google.com/site/railsdepot/files/widget_spoiler.js' type='text/javascript'></script><br /> <script type='text/javascript'> WidgetSpoilerManager.setOption("defaultTitleText", "Скрытый текст"); WidgetSpoilerManager.init(); </script>


4.Нажимаем Сохранить шаблон 
5. Для вставки в сообщение в режиме HTML пишем 


<div class="spoiler" title="Название спойлера допустим РАЗВЕРНУТЬ ">Ваш скрытый текст ,картинка и тд <br /> </div>

Естественно , название можно написать Ваше 





Спойлер два
Можно изменить размер ,Название.Сделать несколько спойлеров и вставить спойлер в спойлер.Очень простой спойлер , не требующий ковыряния в шаблоне , подойдёт для новичков
Взято с блога
Школа Blogger(а)

Статья  
Стильный спойлер (spoiler) для Blogger

 Код можно здесь взять  

Spoiler:


<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>
Вставляем также в сообщение в режиме HTML



 Спойлер три
Взято  с сайта blogger.com.md/
Название статьи Скрытый текст (спойлер) для вашего блога!  
Код можно здесь взять  


Открыть спойлер


Спойлер четыре

Очень даже стильный спойлер в клеточку
Взято  с сайта blogger.com.md/
Название статьи Скрытый текст (спойлер) для вашего блога!  
Код можно здесь взять 
Кстати можно вставить несколько спойлеров. и спойлер в спойлер


Title (Название)
ПоказатьСкрыть
1. Зайти в Шаблон ---> Изменить HTML
2. С помощью поиска (Ctrl+F) вам надо будет найти эту строку в вашем шаблоне:
</body>
Перед этой строчкой добавляем
<script> $(&quot;.box .block&quot;).show(); $(&quot;.closed .block&quot;).hide(); $(&quot;div.hide&quot;).click(function(){ $(this).toggleClass(&quot;show&quot;).next().slideToggle(&quot;medium&quot;); }); </script>

Затем ищем

 ]]></b:skin> 

/* Spoiler ----------------------------------------------- */ .container { width: 99%; display:block; margin: 0 auto; } .box_title { font-size:14px; /* 14px - размер название спойлера */ font-family:candara; } .block_text { font-size:12px; /* 12px - размер текста */ font-family:candara; } /*----------------------------------------------- */

Далее с помощью поиска (Ctrl+F) вам надо будет найти эту строку в вашем шаблоне:
 </head>

 
<link href='http://c1970c.narod.ru/Spoil/chetv/style2_1.css' rel='stylesheet'/>

Также должна быть подключёна библиотека Джейкверри (см
)

При добавлении в сообщение вставляем следубщий код в режиме HTML

<div class="container"> <div class="box /*----если хотим , чтобы спойлер при загрузке был закрыт меняем box на box closed ---*/"> <div class="box_title"> Title (Название) </div> <div class="hide"><span class="s">Показать</span><span class="h">Скрыть</span></div> <div class="block"> <div class="block_text">
Ваш текст или картинка
</div> </div> </div></div>
если хотим , чтобы спойлер при загрузке был закрыт меняем box на box closed



Спойлер пять 

Взят с блога votrexflame.blogspot.ru
Название статьи Как создать спойлер для скрытия отдельных фрагментов сообщения блога
Не требует ковыряния в шаблоне .Установка прямо в сообщение в режиме HTML.У  меня , к сожалению ,работает через раз.


Под спойлер можно спрятать и таблицы, и изображения, и даже видео.


Спойлер шесть 

Взят с блога votrexflame.blogspot.ru
Название статьи Как создать спойлер для скрытия отдельных фрагментов сообщения блога
Не требует ковыряния в шаблоне .Установка прямо в сообщение в режиме HTML.У  меня , к сожалению ,работает через раз.Когда устанавливаю ,работает норм .Потом что -то исправляю в тексте и всё ,не хочет . Но может у вас заработает





Спойлер семь 

 Взято с блога Блогер о Blogger
Название статьи Спойлеры в блоге    Это спойлер .которым скрыта данная часть статьи.А также
  ПОСМОТРЕТЬ РЕЗУЛЬТАТ  МОЖНО ЗДЕСЬ  Легко меняется цвет ,делается несколько спойлеров.Инструкция по спойлером ,разверните.
Этот спойлер мне нравится больше всего



Итак, в создании спойлеров нам как всегда помогут javascript и CSS. Сначала интегрируем скрипт. Для этого открываем шаблон на редактирование (Идём в редактирование блога Шаблон->Изменить HTML), находим закрывающий тэг  с помощью кнопок Ctrl+F
 </body>
 и прямо перед ним добавляем следующий код:
 <script type='text/javascript'>   WidgetSpoilerManager.setOption("defaultTitleText", "Подробнее"); </script> <script src='http://dl.dropbox.com/s/e6skbrad7o1c73m/widget_spoiler.jstype='text/javascript'/>
  ознакомиться с содержимым скрипта, лежащего по адресу http://aboutblogger.googlecode.com/files/widget_spoiler.js, к которому выше шло обращение: МОЖНО ЗДЕСЬ   ВСтавлять его никуда не надо на него сделана сылка Далее находим с помощью кнопок Ctrl+F
 ]]></b:skin>
Вставляем перед ним 
 /* Accents ----------------------------------------------- */ .bar {   background: #138FD8 url('https://lh5.googleusercontent.com/-SWOQVNt9y0M/TlT5KzL9cWI/AAAAAAAAAJw/TOt-RHHd4rg/spoiler-back.gif') no-repeat;   border-radius: 3px;   -webkit-border-radius: 3px;   -moz-border-radius: 3px;   box-shadow: 1px 1px 1px #bbb;   -webkit-box-shadow: 1px 1px 1px #bbb;   -moz-box-shadow: 1px 1px 1px #bbb;   padding-left: 30px;   color: #fff;   font-size: 15px;   font-family: 'Trebuchet MS', Trebuchet, sans-serif;   cursor: pointer; } .spoiler-hidden .bar {   background-position: 0 0; } .spoiler, .spoiler-hidden .text {   display: none; } .spoiler-visible .bar {   background-position: 0 -20px;   border-radius: 3px 3px 0 0;   -webkit-border-radius: 3px 3px 0 0;   -moz-border-radius: 3px 3px 0 0;   box-shadow: 1px 0 1px #bbb;   -webkit-box-shadow: 1px 0 1px #bbb;   -moz-box-shadow: 1px 0 1px #bbb; } .spoiler-visible .text {   display: visible;   padding: 5px 1em 0;   border: 1px solid #138FD8;   border-top-width: 0;   border-radius: 0 0 3px 3px;   -webkit-border-radius: 0 0 3px 3px;   -moz-border-radius: 0 0 3px 3px;   box-shadow: 1px 1px 1px #bbb;   -webkit-box-shadow: 1px 1px 1px #bbb;   -moz-box-shadow: 1px 1px 1px #bbb; }
 Цвет можно поменять  найдя background: #138FD8
Чтобы вставить в сообщение пишем
 <div class="spoiler" title="заголовок спойлера">спрятанный текст</div>.
.
. ---
.


http://blogger.omg-linux.ru/2012/06/blog-post.html
http://blogger.omg-linux.ru/p/sozdat-css-knopky-generator.html#
http://blogger.omg-linux.ru/2012/03/kak-sozdat-css-knopky.html

 http://www.sedegoff.com/2011/04/delaem-spojler-dlja-blogger.html

 http://rche.ru/80_prostoj-spojler-na-javascript.html    \НЕ РАБОТАЕТ\

 http://www.sedegoff.com/2011/04/delaem-spojler-dlja-blogger.html

 http://www.sedegoff.com/2011/04/delaem-spojler-dlja-blogger.html  \НЕ РАБОТАЕТ\


 http://blogger.omg-linux.ru/2012/06/blog-post.html \НЕ РАБОТАЕТ\

http://pro100blogger.com/2011/04/blogspot-blogger.html

http://vadimkiselev.blogspot.com/2010/12/css.html

 http://blogger.com.md/tutorials/70-spoiler.html


ИНТЕРЕСНО есть с текстовой
 http://blogger.com.md/tutorials/70-spoiler.html
 http://mk-template.blogspot.com/p/spoiler.html

рабочий
 http://new-school-blogger.blogspot.com/2012/01/stilnyj-spojler-dlja-blogger.html


 http://blogger.com.md/tutorials/70-spoiler.html


http://aasten.blogspot.com/2011/05/doxygen.html
====
РАБОЧИЙ \КЛЕТОЧКА И ТЕКСТ\

http://blogger.com.md/tutorials/70-spoiler.html

=====
 синий
 http://www.aboutblogger.ru/2011/09/spoilery-v-bloge.html

шпаргалка блоггера
http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html
=====

 http://votrexflame.blogspot.com/2011/04/kak-sozdat-spoiler-dla-skrytiya.html#axzz25KPRFW6h
=======

 http://swaego.blogspot.com/2011/06/spoiler-in-blogspot.html
=====
ещё в том числе и треугольничек открытие.кнопка зелёная
  http://votrexflame.blogspot.com/2011/04/kak-sozdat-spoiler-dla-skrytiya.html#axzz25KPRFW6h
================
http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html

кнопка спойлер

http://blogger.omg-linux.ru/2012/06/blog-post.html

http://blogger.omg-linux.ru/p/sozdat-css-knopky-generator.html#

http://blogger.omg-linux.ru/2012/03/kak-sozdat-css-knopky.html

.
 С уважением !
 
 
.



Комментариев нет:

Отправить комментарий