Скрипт "Скрытый помощник" на Blogspot

Твитнуть
Видите у меня на блоге справа кнопку с надписью "помощь"?

Если по ней кликнуть, то Вы увидете уже вот такую картинку:

Она у меня пока умеет только вызывать мой блог в новой вкладке, да при клике по строке "Телефоны" показывать мое расписание работы - ну, не успел я пока написать соответствущих текстов :)

При повторном клике панель убирается обратно.

Этот бесплатный скрипт разработал Евгений Попов для блогов на "Wordpress", я только приспособил его для своих нужд :)

Расскажу, как я это сделал на Blogger.

Как всегда первым делом сохраняем шаблон.
Открываем шаблон(кнопка "Изменить HTML")
Ищем в шаблоне строку ]]></b:skin>
Сразу после нее вставляем текст:

<script src="helper/jquery.min.v1.4.2.js"></script>

<style type="text/css">    

a {

    outline: none;

}

   

#help {

    display: block;

    font-size: 12px;

    position: fixed;

    right: 0;

    top: 250px;

    width: 279px;

    z-index: 5;

    font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;

}

#help img{

    border: 0px;

}

#help-panel {

    background-color: #FFFFFF;

    border: 1px solid #CCCCCC;

    display: none;

    float: right;

    width: 240px;

}

#help-panel .collapse {

    display: none;

    float: left;

    padding: 15px 10px;

    font-size: 12px;

    line-height: 15px;

}

#help-panel .collapse a {

    font-size: 11px;

    color: black;

    text-decoration: underline;

    font-size: 12px;

}

#support-header {

    background: url("helper/24-7-bg.gif") repeat-x scroll 0 0 transparent;

    height: 17px;

    padding: 2px 0 0 10px;

}

#help-panel .main {

    background: url("helper/item-bg.gif") repeat-x scroll 0 0 transparent;

    float: left;

    height: 37px;

    width: 240px;

}

#help-panel a.title {

    background: url("helper/but-right.gif") no-repeat scroll 10px 15px 

    transparent;

    color: #444;

    display: block;

    font-weight: bold;

    padding: 12px 10px 12px 22px;

    font-size: 12px;

}

#help-panel a.title span {

    color: #666;

    display: block;

    font-weight: bold;

    font-size: 12px;

}

#help-panel a.selected {

    background: url("helper/but-down.gif") no-repeat scroll 10px 15px 

    transparent;

}

#help a {

    text-decoration: none;

}

#help-button {

    float: right;

}

    

</style>

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

<div id="help">

<div id="help-panel" style="display: none;">
    <!-- Блок переходов по ссылкам -->
    <div class="main"><a class="title" title="Обучающие курсы Азамата Ушанова"
    href="http://sngsnick.blogspot.com/" target="_blank">
    Все курсы Азамата Ушанова</a></div>
    <div class="main"><a class="title" title="Обучающие курсы Евгения Попова"
    href="http://sngsnick.blogspot.com/" target="_blank">
    Все курсы Евгения Попова</a></div>
    <!-- Блок телефонов -->
    <div class="main"><a class="title" href="javascript:void(0);">Телефоны</a>
    </div>  
        <div class="collapse">
            <strong>Телефон не указан</strong><br />
            ПН-ПТ с 9.00 до 24.00,<br />
            СБ с 10.00 до 22.00,<br />
            ВС - 10.00 до 20.00,<br />
            время указано московское.
 
        </div>
</div>

<a id="help-button" href="javascript:void(0);"><img alt=""
   src="helper/button.png"/></a>
</div>

<script type="text/javascript">
$(function(){
 
    var current_index = null;  
 
    $('#help-button').click(function(){      
        $('#help-panel').toggle(300);
    });
 
     
    $('a.title').click(function(){      
     
        if(current_index != $('a.title').index(this)){
            $('.collapse:visible').slideUp(500);
            $('a.title').removeClass('selected');
        }      
     
        if($(this).parent().next().attr('class') == 'collapse'){
         
            if($(this).parent().next().is(":hidden")){
                $(this).addClass('selected');
            } else if($(this).parent().next().is(":visible")) {
                $(this).removeClass('selected');
            }
            $(this).parent().next().slideToggle(500);
        }
     
        current_index = $('a.title').index(this);      
    });
});
</script>