понедельник, 25 марта 2013 г.

Как установить кнопку "наверх"

У замечательной Лены Гришиной есть пост о том, как же эту кнопочку устанавливать. Я его  себе частично скопирую для простоты процесса, вставлю свои   пять  дополнения для таких вот несмысленышей как я, которым трудно с первого раза сообразить как делать. Надеюсь Лена меня за такие вот проделки не покусает! Мои коментарии будут вот таким цветом

Ну что, поехали...






Чтобы добавить код кнопки:
  1. Идём в Настроить-Шаблон-Изменить HTML.
  2. Находим строчку </body> (горячие клавиши функции "Поиск" - "Ctrl+F") . Когда нажимаем "Ctrl+F" в правом верхнем углу появляется строчка для поиска, копируем </body> , вставляем и получаем искомую строчку в коде,выделенную оранжевым.
  3. Сразу под строчкой </body> вставляем вот такой код:

<style type="text/css">   

#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE', EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px; cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}

</style><br />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><br />

<script type='text/javascript'>
    $(function() {
        $.fn.scrollToTop = function() {
            $(this).hide().removeAttr("href");
            if ($(window).scrollTop() != "0") {
                $(this).fadeIn("slow")
            }
            var scrollDiv = $(this);
            $(window).scroll(function() {
                if ($(window).scrollTop() == "0") {
                    $(scrollDiv).fadeOut("slow")
                } else {
                    $(scrollDiv).fadeIn("slow")
                }
            });
            $(this).click(function() {
                $("html, body").animate({
                    scrollTop: 0
                }, "slow")
            })
        }
    });
    $(function() {
        $("#w2b-StoTop").scrollToTop();
    });
</script><br />
<a href='#' id='w2b-StoTop' style='display:none;'>Наверх </a>
Просто копируем всю эту абракадабру и вставляем.

4. Сохраняем шаблон

Дизайн кнопки достаточно универсален, тот кто разбирается в кодах, увидит, что дизайн легко настраивается в первой части кода.

Слово "Наверх" также можно заменить на то, что вам больше нравится)

Я так и сделала - изменила цвет шрифта, фона и обводки на более подходящий под дизайн моего блога. И заключила слово "Наверх" в теги <b></b> (жирный шрифт).


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

Мне оказалось проще взять кодировки с вот этой таблицы


Красным выделила то, что можно и нужно изменить.

В верхней части кода есть вот такие строчки: 

background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6) - цвет фона

text-align:center;padding:5px;position: fixed;bottom:10px;right:10px; cursor:pointer;color:#444 - цвет текста

text-decoration:none;border:1px solid #C9C9C9 - цвет бордюра (обводка)

Опять же копируем строчку до знака "-" то есть например первую
background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6) 
и вставляем в окошко поиска, которое все так же на прежнем месте в уголочке висит. В таблице мы видим справа две колонки RGB и КОД. Вместо  #EEEEEE вставляем нужный нам КОД, вместо 238, 238, 238, этих цифр вставляем свои цифры RGB.

Далее по аналогии меняем оставшиеся два КОДА. Сохраняем и нажимаем на просмотр. Если что-то не устраивает, можно вернуться и поменять цвета. 

Ну вот как-то так. Может кому и пригодится. Хотя для более опытных и смышленых думаю будет достаточно и Лениной инструкции. 
На самом деле у Лены очень много полезной информации о том как вести блог. 









5 комментариев:

  1. Хорошая у Вас кнопочка получилась)))

    ОтветитьУдалить
  2. Потом и кровью;-) она мне далась;-) шучу... Спасибо!

    ОтветитьУдалить
  3. Наташа, спасибо!!! Поставила и себе)))

    ОтветитьУдалить
  4. Пожалуйста! Рада что пригодилось!

    ОтветитьУдалить
  5. Этот комментарий был удален автором.

    ОтветитьУдалить