Поделится

вторник, 27 августа 2013 г.

Кнопки вверх вниз


Источник.  Спасибо Владимеру Демяновичу. Хотя он данные кнопки разрабатывал не для blogger.com . Но мне удалось их вставить и на свой сайт.
Получилось очень удобно

Может, кому то благодаря моим советам это удастся тоже. Но за результат не ручаюсь, т.к. я и сам в этом деле новичке самоучка.



Перед тем как начать - рекомендую сделать резервную копию вашего шаблона. Для этого зайдите в "Дизайн ---> Изменить HTML" , в первых строчках вы увидите "Загрузить весь шаблон" .

.
Надо добавить 2а текста
Итак 1й в Настройках блога в «Дизайн»   «Добавить гаджет» (там в дизайне их много в принципе можно клацнуть на любой не имеет значения)
Потом выбрать «HTML\JavaSkript»



И вставить туда этот код



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!— Start: Кнопки вверх вниз —>
<script type="text/javascript">
jQuery(function(){
if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
else $("#ToTop").fadeIn("slow")
});
if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
else $("#OnBottom").fadeIn("slow")
});
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
</script>
<div class="go-up" title="Вверх" id='ToTop'></div>
<div class="go-down" title="Вниз" id='OnBottom'></div>
<!— End: Кнопки вверх вниз —>



В CSS
«Шаблоны» → «Настроить»

Добавить CSS



И вставить текст который находится под спойлером

Открыть спойлер

 

Не забываем клацнуть сохранить. Если  вдруг я что то напутал в кодах то вот источник.

Комментариев нет:

Отправить комментарий

Примечания