Оформление блога

Тут я расскажу про три элемента, которые я использую в своем блоге (нажмите на них, чтобы прочесть).

+ Текст, раскрывающийся при нажатии

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

1. Надо писать с html-представлением своей странички. Здесь, в блоге, для этого достаточно нажать "HTML" (в левом верхнем углу) и писать там.
2. Перед всем что будет там написано, вставьте такой скрипт:
   
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
   <script>
         $(document).ready(function(){
             $('div.block').on('click', function(){
               // Если надо чтоб скрывались остальные подобные блоки, то раскоментировать
               //$('div.block').find('div.text').hide();
               // сам скрипт
               $(this).children('div.text').show()
                      .children('div.hider').on('click', function(){
                       // Свернуть всех детей
                       $(this).parent().children('div.block').children('div.text:visible').children('div.hider').click();
                      
                       // Свернуть текущий элемент
                       $(this).parent().hide();                   
                       var title = $(this).parent().parent().children('div.title');                   
                       var docViewTop = $(window).scrollTop();
                       var elemTop = $(title).offset().top;                   
                       if(elemTop < docViewTop){
                           var top = elemTop;
                           if(top > 50){
                               top-= 50;
                           }
                           else{
                               top = 0;
                           }
                           $(window).scrollTop(top);
                       }
                      
                       return false;
                   });
           })
       });
   </script>    
   
   <style>
       div.block {overflow: hidden}
       div.block > div.text{ display : none; position: relative; padding-left: 35px }
       div.block > div.text > div {float: none}
       div.block > div.text > div.hider {width: 30px; float: left, width: 30px; height: 100%; background-color: white; position: absolute; left: 0; }
       div.block > div.text > div.hider:hover { background-color: #E9EDF1;}
   </style> 
    Автор этого скрипта - Валентин Федотов.
3. Свой заголовок и текст, который будет появляться при нажатии на него помещайте в такую конструкцию:
   <div class="block">
        <div class="title">Заголовок1</div>
        <div class="text">
               <div class="hider"></div>
               <div>
                    Тут пишется весь текст
               </div>
        </div>
   </div> 
   Если в тексте надо вставить ветку - пишется </div> тут вставляется как описано выше </div>.

+ Серая подложка (для кода и т.п.)

Все что я хочу поместить на серую подложку я помещаю в такие дивы:

<div style="background-color: #f7f7f9; border: 1px solid #E1E1E8; color: black; font-size: small; margin: 10px; padding: 10px;">
Весь мой код
</div>

+ Вставка формул в блог

Для вставки формул в блог я пользуюсь сервисом TeX online. Там, зная систему компьютерной верстки TeX, можно задать любую формулу. Для тех кто не знает TeX-а там есть очень доступный tutorial.