суббота, 30 марта 2013 г.

Как добавить кнопку НАВЕРХ / ВНИЗ для блога, используя JQuery

Как добавить кнопку НАВЕРХ / ВНИЗ для блога, используя JQuery
    Кнопка НАВЕРХ / ВНИЗ может использоваться для перехода к верхней или нижней части страницы контента, особенно когда на странице находятся много постов или статья имеет большое количество комментариев. У этих кнопок есть эффект постепенного появления и затемнения изображения. Фактически это означает, что они будут немного исчезать, когда страница будет прокручиваться к верхней или нижней части.




Живой пример полезных кнопок Вы можете увидеть на этом блоге с правой стороны.

Как добавить кнопку НАВЕРХ / ВНИЗ для блога, используя JQuery ?


1. Перейдите в раздел Шаблон и нажмите кнопку Изменить HTML.

Как добавить кнопку ВВЕРХ/ВНИЗ для блога, используя JQuery



2. Отметьте пункт Расширить шаблоны виджета.

Как добавить кнопку ВВЕРХ/ВНИЗ для блога, используя JQuery


3. При помощи команды CTRL+F найдите следующий фрагмент кода:

]]></b:skin>

4.Прямо над этим фрагментом, вставьте следующий код:

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Примечание:

- красным цветом обозначены свойства кнопок, которые при желании можно изменить;

- можно поменять вид кнопок, изменяя адрес URL синего цвета;

- чтобы изменить фоновый цвет кнопок кнопок, измените цвет white (белый) на свой цвет.

5. При помощи команды CTRL+F найдите следующий фрагмент кода:

</body>

6. Прямо над этим фрагментом, вставьте следующий код:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow'); 
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Примечание: В случае, если Вы хотите удалить кнопку "НАВЕРХ", удалите 1-ый выделенный участок кода, если кнопку "ВНИЗ", то удалите 2-ой.

7. Финал. Нажмите кнопку Сохраните шаблон.

Готово!

Перевод Blogger Help

Источник Helpblogger

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

  1. Вроди бы всё правильно вставил, но в итоге появилась всего лишь одна кнопка вниз. Скачал эти две кнопки , залил их на гугл-код к себе, и просто вставил свои ссылки на картинки. что не так?

    ОтветитьУдалить
    Ответы
    1. Заработало спасибо , класные кнопочки из всех что перепробовал. Просто выделил в коде невидимыми надписями границы в html чтоб не забыть где вставил код через некоторое время. Вообщем можно впринципе вставить и любые свои катриночки кнопок, но эти как раз под дизайн видны. Ещё раз спасибо.

      Удалить
  2. здравствуйте,не моу к сожалению сделать эти кнопочки,а очень хочется,пункт Расширить шаблоны виджета отсутствует,когда я захожу в ХТМЛ

    ОтветитьУдалить
  3. Svetlana сейчас нет такой именно кнопки "Расширить шаблоны виджета."
    Вы просто сразу в откывшемся окне "Шаблон"--->>>и нажмите кнопку Изменить HTML
    При помощи команды CTRL+F берите и ищите строку ]]>, и вставляйте код как написано выше. Там же найдите фрагмент кода: и опять по приведённой веше инструкции встовте второй код. затем просто Сохранить.
    И ещё в зависимости от фона страниц блога нужно подобрать- поиграть оттенками и обводкой самих кнопок.
    Это парамеры:
    background-color:white; --->>>
    border:1px solid #CCC; /* Border Color */ --->> <1px толщина обводки кнонки, #CCC - цвет обводки>;
    position:fixed;
    background: white url(http://3.bp.blogs....... ---->>>
    Лично под свеже испечённый блог http://iptvplus1.blogspot.com/ - долго смотрел на цвета и решил изменить только обводку, а цвет как оказалось после некоторого совещания зрителей, оставил прежним и прозрачную заливку.
    Спасибо.

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