У замечательной Лены Гришиной есть пост о том, как же эту кнопочку устанавливать. Я его себе частично скопирую для простоты процесса, вставлю свои пять дополнения для таких вот несмысленышей как я, которым трудно с первого раза сообразить как делать. Надеюсь Лена меня за такие вот проделки не покусает! Мои коментарии будут вот таким цветом
Ну что, поехали...
Чтобы добавить код кнопки:
Красным выделила то, что можно и нужно изменить.
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 - цвет бордюра (обводка)
Ну что, поехали...
Чтобы добавить код кнопки:
- Идём в Настроить-Шаблон-Изменить HTML.
- Находим строчку </body> (горячие клавиши функции "Поиск" - "Ctrl+F") . Когда нажимаем "Ctrl+F" в правом верхнем углу появляется строчка для поиска, копируем </body> , вставляем и получаем искомую строчку в коде,выделенную оранжевым.
- Сразу под строчкой </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> (жирный шрифт).
Немного поясню по коду, который можно изменить в зависимости от дизайна вашего блога - кодировки цветов можно посмотреть в фотошопе, кликнув на палитре цветов.
Слово "Наверх" также можно заменить на то, что вам больше нравится)
Я так и сделала - изменила цвет шрифта, фона и обводки на более подходящий под дизайн моего блога. И заключила слово "Наверх" в теги <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.
Далее по аналогии меняем оставшиеся два КОДА. Сохраняем и нажимаем на просмотр. Если что-то не устраивает, можно вернуться и поменять цвета.
Ну вот как-то так. Может кому и пригодится. Хотя для более опытных и смышленых думаю будет достаточно и Лениной инструкции.
На самом деле у Лены очень много полезной информации о том как вести блог.
Хорошая у Вас кнопочка получилась)))
ОтветитьУдалитьПотом и кровью;-) она мне далась;-) шучу... Спасибо!
ОтветитьУдалитьНаташа, спасибо!!! Поставила и себе)))
ОтветитьУдалитьПожалуйста! Рада что пригодилось!
ОтветитьУдалитьЭтот комментарий был удален автором.
ОтветитьУдалить