Делаем спойлер для Blogger

Ну вот - сделал свой спойлер!

В общем то ничего сложного, если цель понятна и есть желание и время. 


Обновление от 30.08.2011:

1. Где разместить файлы в сети для blogger или как изменить mime type в хранилище кода Google
2. Делаем спойлер на jQuery и подключаем его к блогу

Обновление от 01.11.2011:

1. Исправил ошибку со вторым вариантом размещения - когда весь код содержится в блоге. 

Конечно в интернет много решений для спойлера. Но мы простых путей не ищем! Ну и вот что у меня получилось. 


Сразу скажу про лицензию использования. Она так называемая LinkWare. Иными словами Вам надо поставить ссылку на этот блог, если Вы используете мой код.  Стоит отметить что сейчас эта ссылка ставиться автоматически. Если Вы за основу взяли мой код и сделали что то своё - просто отразите это в своём коде и всё.  Таким образом будет считаться что лицензия выполнена.


Я сделал две версии спойлера. Отличаются они тем, что для первой версии, которая используется у меня - нужно подключать внешние файлы. Вторая версия - спойлер полностью размещается в шаблоне. 


Какой использовать Вам - решать тоже Вам. Для себя я делаю через внешнее подключение. Но это не тема данного сообщения, поэтому если интересно - спрашивайте почему так в комментариях.

1. В панели управления идём в меню "Дизайн" и там выбираем пункт "Изменить HTML".
   
2. Делаем резервную копию текущего шаблона. Для этого выбираем пункт "Загрузить весь шаблон". Называем файл удобным именем. Лично я в качестве имени файла выбираю такой шаблон [имя блога]-template-[ddMMyyyyHHmm].xml. Например sedegoff-template-200420110859.xml
3. Теперь ищем в тексте шаблона конструкцию "</head>" и перед ней добавляем код:
   

   <!-- SPOILER BEGIN -->
   <style type="text/css" >        
   .srcsoft-spoiler-hidden, .srcsoft-spoiler-visible  {width:96%;margin:20px; border: 1px dotted #005588; border-left: 4px solid #0074ee;}
   .srcsoft-spoiler-caption {width:99%;vertical-align: middle;height: 30px;line-height: 30px;padding-left:10px;background-color: #e7eef7;font-size: 12px;font-weight: bold;color: #0064e5;cursor: pointer;}
   .srcsoft-spoiler-text {width:99%;min-height: 25px;background-color: white;padding-left:10px;padding-top:5px;padding-bottom:5px;}
   .srcsoft-spoiler-hidden  .srcsoft-spoiler-text {display: none; }        
   .srcsoft-spoiler-visible .srcsoft-spoiler-text { display: block; }
   .srcsoft-spoiler-copy { text-align:right; font-size:0.6em; }
   </style>
   <script src='https://sites.google.com/site/sedegoff/home/sedegoff-blog/spoiler.js' type='text/javascript'/> 
   <!-- SPOILER END -->

4. Теперь ищем в тексте шаблона конструкцию "</body>" и перед ней добавляем код:
   

   <!-- SPOILER BEGIN -->
   <script type='text/javascript'>          
             SrcsoftSpoiler.init();
         </script>
   <!-- SPOILER END -->

5. Сохранить шаблон

1. В панели управления идём в меню "Дизайн" и там выбираем пункт "Изменить HTML".
   
2. Делаем резервную копию текущего шаблона. Для этого выбираем пункт "Загрузить весь шаблон". Называем файл удобным именем. Лично я в качестве имени файла выбираю такой шаблон [имя блога]-template-[ddMMyyyyHHmm].xml. Например sedegoff-template-200420110859.xml
3. Теперь ищем в тексте шаблона конструкцию "</head>" и перед ней добавляем код:
   

   <!-- SPOILER BEGIN -->
       <style type="text/css" >        
    /* Спойлер */
           .srcsoft-spoiler-hidden, .srcsoft-spoiler-visible  {width:96%;margin:20px; border: 1px dotted #005588; border-left: 4px solid #0074ee;}
    /* Загловок */
           .srcsoft-spoiler-caption {width:99%;vertical-align: middle;height: 30px;line-height: 30px;padding-left:10px;background-color: #e7eef7;font-size: 12px;font-weight: bold;color: #0064e5;cursor: pointer;}
    /* Текст */
           .srcsoft-spoiler-text {width:99%;min-height: 25px;background-color: white;padding-left:10px;padding-top:5px;padding-bottom:5px;}
    /* Спойлер закрыт*/
           .srcsoft-spoiler-hidden  .srcsoft-spoiler-text {display: none; }        
    /*Спойлер открыт*/
           .srcsoft-spoiler-visible .srcsoft-spoiler-text { display: block; }
    /* Копирайт*/
           .srcsoft-spoiler-copy { text-align:right; font-size:0.6em; }
       </style>
   <!-- SPOILER END -->

4. span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Сохраняем шаблон
5. Теперь  идём в визуальный дизайн шаблона. В новом интерфейсе - это меню Дизайн(в старом собственно тоже). В самом низу выбираем пункт "Добавить гаджет".
   
   
   
6. В результате откроется окно выбора типа гаджета. Найдите гаджет типа "HTML/JavaScript" и нажмите белый плюс на синем фоне.
   
   
   
7. В появившемся окне, в поле содержание добавь приведённый ниже код и нажмите сохранить:
   

   <!-- SPOILER BEGIN -->
   <script type='text/javascript'>
               SrcsoftSpoiler = {
     version: '0.0.1',
     author: 'sedegoff.com',
     options: {
       parentId: "Blog1", 
       spoiler: "srcsoft-spoiler", 
       hidden: "srcsoft-spoiler-hidden", //
       visible: "srcsoft-spoiler-visible",
       caption: "srcsoft-spoiler-caption",
       text: "srcsoft-spoiler-text",
       tm: "srcsoft-spoiler-copy",    
       captionText: "Спойле�"
     },
     set: function (option, value){
       if (this.options[option] != undefined){this.options[option] = value}
     },
     getElementsByClassName: function (classname, node){
       if(!node) node = document.getElementsByTagName("body")[0];
       var a = [];
       var re = new RegExp('\\b' + classname + '\\b');
       var els = node.getElementsByTagName("*");
       for(var i=0,j=els.length; i<j; i++)
         if(re.test(els[i].className))a.push(els[i]);
       return a;
     },
     OnClickSpoiler: function (elem){
       var parent = elem.parentNode;
       if (parent.className == this.options.hidden){
         parent.className = this.options.visible;
         return
       }
       parent.className = this.options.hidden;
     },
     init: function AddSpoilerHandler(){
       var parentNode = document.getElementById(this.options.parentId);
       var spoilers = this.getElementsByClassName(this.options.spoiler, parentNode);
       for(var i=0,j=spoilers.length; i<j; i++){
         spoilers[i].className = "srcsoft-spoiler-hidden";
         var div1 = document.createElement("div");
         var div2 = document.createElement("div");      
         var p1 = document.createElement("div");
         var a1 = document.createElement("a");
         var br1 = document.createElement("br");
         div1.className = this.options.caption;
         div1.innerHTML = spoilers[i].getAttribute("title") ? spoilers[i].getAttribute("title") : this.options.captionText;
         div1.onclick = function(){SrcsoftSpoiler.OnClickSpoiler(this)}
         spoilers[i].removeAttribute("title");
         div2.className = this.options.text;
         div2.innerHTML = spoilers[i].innerHTML;
         div2.appendChild(br1);
         p1.className = this.options.tm;
         p1.innerHTML = "spoiler by ";
         a1.setAttribute("href", "http://www.sedegoff.com");
         a1.innerHTML = "Sedegoff";
         p1.appendChild(a1);
         div2.appendChild(p1);
         spoilers[i].innerHTML = "";      
         spoilers[i].appendChild(div1);
         spoilers[i].appendChild(div2);
       }
     }
   }
             SrcsoftSpoiler.init();
         </script>
   <!-- SPOILER END -->

   
   
   
8. Переместите гаджет в самый низ.
   
9. Сохранить шаблон.

Теоретически, если у Вас уже есть такой гаджет с каким то кодом, то можете попробовать добавить код из пункта 7 в конец имеющегося кода. В любом случае - если не получится, спрашивайте - попробуем разобраться.

Как пользоваться спойлером:

1. В редакторе нажимаем кнопку "Изменить HTML"
2. В нужном месте пишем вставляем код:
   

   <div class="srcsoft-spoiler" title="Тут пишите заголовок спойлера">
   Тут содержимое спойлера
   </div>

Если какой то из стилей пересекается из уже имеющихся, то будет какая то кривизна с отображением. Хотя я постарался максимально уникально сделать и название стилей и объектов. Но если что - спрашивайте - постараюсь помочь.


P.S. Хотел разместить файл стилей отдельно, но никак не получается. Почему то гугл отдаёт его для скачивания и стили не переменяются,  поэтому пришлось внести всё в основное место стилей. Если Вы знаете как разместить css файл на местах гугла, поделитесь плиз.