Кнопка НАВЕРХ / ВНИЗ может использоваться для перехода к верхней или нижней части страницы контента, особенно когда на странице находятся много постов или статья имеет большое количество комментариев. У этих кнопок есть эффект постепенного появления и затемнения изображения. Фактически это означает, что они будут немного исчезать, когда страница будет прокручиваться к верхней или нижней части.
Живой пример полезных кнопок Вы можете увидеть на этом блоге с правой стороны.
1. Перейдите в раздел Шаблон и нажмите кнопку Изменить HTML.
2. Отметьте пункт Расширить шаблоны виджета.
3. При помощи команды CTRL+F найдите следующий фрагмент кода:
]]></b:skin>
4.Прямо над этим фрагментом, вставьте следующий код:
Примечание:
- красным цветом обозначены свойства кнопок, которые при желании можно изменить;
- можно поменять вид кнопок, изменяя адрес URL синего цвета;
- чтобы изменить фоновый цвет кнопок кнопок, измените цвет white (белый) на свой цвет.
5. При помощи команды CTRL+F найдите следующий фрагмент кода:
</body>
6. Прямо над этим фрагментом, вставьте следующий код:
Примечание: В случае, если Вы хотите удалить кнопку "НАВЕРХ", удалите 1-ый выделенный участок кода, если кнопку "ВНИЗ", то удалите 2-ой.
7. Финал. Нажмите кнопку Сохраните шаблон.
Готово!
Перевод Blogger Help
Источник Helpblogger
Живой пример полезных кнопок Вы можете увидеть на этом блоге с правой стороны.
Как добавить кнопку НАВЕРХ / ВНИЗ для блога, используя JQuery ?
1. Перейдите в раздел Шаблон и нажмите кнопку Изменить HTML.
2. Отметьте пункт Расширить шаблоны виджета.
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZdwK2r2N6BCBBvEiI5fwTbEobyWC81E_v3NXG27ckBPgLr8BVWED4ZStZ8r15vyyB1fK7-H6YhSiCbKY7ClqVx61ovw9Ha_sGE71VxywGEeNGEIl66FLw78ZLgk_x3cegQK2KMvZB0Nk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Ff9ULQ4BovS-7EYTmylbaCGo5Oq-Xh0VnEt4cXVPYITA4KbLbeY5aMu5CV2210RRU06BzAVNM8WBse6y-Fyq07eBcPMi0t9jGosC0PY35LxjEKBDL-cpB0DhjhLjyQqNI_8xqSydMRU/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
Вроди бы всё правильно вставил, но в итоге появилась всего лишь одна кнопка вниз. Скачал эти две кнопки , залил их на гугл-код к себе, и просто вставил свои ссылки на картинки. что не так?
ОтветитьУдалитьЗаработало спасибо , класные кнопочки из всех что перепробовал. Просто выделил в коде невидимыми надписями границы в html чтоб не забыть где вставил код через некоторое время. Вообщем можно впринципе вставить и любые свои катриночки кнопок, но эти как раз под дизайн видны. Ещё раз спасибо.
Удалитьздравствуйте,не моу к сожалению сделать эти кнопочки,а очень хочется,пункт Расширить шаблоны виджета отсутствует,когда я захожу в ХТМЛ
ОтветитьУдалить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/ - долго смотрел на цвета и решил изменить только обводку, а цвет как оказалось после некоторого совещания зрителей, оставил прежним и прозрачную заливку.
Спасибо.
Дякую велике! Все працює!
ОтветитьУдалитьСпасибо!
ОтветитьУдалитьЭтот комментарий был удален автором.
ОтветитьУдалитьWhat are the features the customer value the most. http://nffpl670yv.dip.jp http://k3axi1a8s8.dip.jp http://dalagdf7kf.dip.jp
ОтветитьУдалить