Приветствую вас, дорогие мои друзья! В буржунете, что не блог на Blogger, то обязательно тема связанная с Blogspot. Встречаются довольно приличные веб - ресурсы, где можно найти полезные виджеты, различные трюки и так далее. Чтобы мы делали без них? Где брали бы темы для наших постов? Существовали ли блоги в рунете, пишущие о платформе Blogger? Наверное нет. Поэтому, хочу сказать им - большое спасибо, за то, что вы есть!
В моём блоге, если не изменяет моя память, похожего скрипта кнопок вверх и вниз, нету. Надо срочно исправлять ситуацию, так как я хочу собрать максимально всё полезное для Blogger в одном месте, то есть, здесь. Особенно для начинающих пользователей бесплатного и популярного продукта от Google - блогохостинга. Зашли сюда и опа, всё есть. Вот как то так.
Как установить кнопки вверх и вниз на jquery в Blogger
Данные кнопки в блоге смотрятся великолепно, думаю вам и вашим посетителям понравятся, и вы обязательно их установите:
Для того, чтобы установить эту прелесть в блог, найдите в своём шаблоне тег ]]></b:skin> куда мы обычно устанавливаем все стили CSS и чуть выше вставляем код:
/* 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); }
Здесь, в стилях вы можете заменить картинки кнопок на свои и поменять параметры кнопок - ширина, высота и так далее.
Следующий шаг, ищем в конце шаблона тег </body> и опять чуть выше над ним копируем код:
<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>
Вот и всё, готово. Сохраняем шаблон и смотрим, что у нас получилось.
Надеюсь, дамы и господа, для вас это было полезно. Всего доброго и удачи.
Спасибо большое, действительно прелесть ) Эти кнопочки мне понравились больше, чем те которые стояли у меня до этого ( )
Удобные и ничего лишнего.
А можно ли их передвинуть в низ экрана? Посередине несколько непривычно.
Михаил, чтобы настроить расстояние, установите нужное значение в этих двух строчках — bottom:280px; /* Distance from the bottom */ и bottom:242px; /* Distance from the bottom */ в меньшую сторону. Первая строчка это — расстояние первой кнопки и соответственно вторая строка — второй кнопки. 🙂
Получается ) Спасибо ещё раз!
Спасибо! Вышло)
Стрелочки красивые. А где можно их скачать, чтобы ссылки ставить на собственное хранилище?
И ещё такой вопрос: я как хранилище использую гугл-диск. Но почему-то он увеличивает изображения и стрелки становятся размытыми. Не подскажите в чём проблема?
Ещё раз спасибо.
В первом коде есть ссылки на изображения. Если у вас не получается с картинками, оставьте как есть или используйте яндекс фотки, там легче. 🙂
в общем, я сделала так:
скопировала адрес, открылись изображения на отдельной странице.
их я сохранила на гугл-диск (яндексом я не пользуюсь), и оттуда взяла юрл-ссылки.
вставила в код и сохранила.
в итоге получились размытые квадратики О_о
уже не в первый раз такое, не пойму в чём проблема.
пока оставлю как есть)
только что попробовала через каби ком, тоже не вышло — в этом случае белое пятно в квадрате ((
Да оставьте картинки так, как есть.