Google+ Followers

Будь в курсе событий!

13.12.2013

Красивая кнопка вверх, scroll to top.

Leave a Comment
 



Здравствуйте сегодяшний урок будет про кнопку вверх, но кнопка необычная  тем что включает в себя помимо кнопки вверх и кнопку вниз. А так же кнопку дом , или перехода на главную страницу, они эти кнопки стояли у меня но я нашел  другой вариант а этот решил обубликовать для вас уважаемые читатели.Что бы  долго вас не мучать баснями перейдем сразу к установке, и так первым делом нам надо зайьт в наш блог, далее панель меню Шаблон, Изменить HTML . Зашли как туда зажимаем  CTRL+F  и в поле поиска вводим, и начинаем искать тег </body>   он в самом низу, и чуть выше его добавляем вот этот код.
<style>#floating-up {
        position:fixed;_position:absolute;top:80px; right:0px; clip:inherit;
        _bottom:expression(document.documentElement.scrollTop
        document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft  document.documentElement.clientWidth - offsetWidth); }
      #floating-up a
      {
        filter:alpha(opacity=65);
        -moz-opacity:0.65;
        opacity:0.65;
        border:0;
      }
      #floating-up img
      {
        border:0;
      }
      #floating-up a:hover
      {
        filter:alpha(opacity=100);
        -moz-opacity:1;
        opacity:1;
      }</style>


Далее сохраняем, и приступаем к фазе номер два, а для этого нам надо будет зайти в панель дизайн Добавить гаджет ищем  в списке HTMLjawascript  и добавляем в него вот этот код.
<div id="floating-up">
<div>
<a title="back to top" href="#">
<img src="http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-top.png" alt="back to top" />
</a>
</div>
<div>
<a title="Home" href="http://www.zarnakoom.com/">
<img src="http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/home-i.png" alt="Home" />
</a>
</div>
<div>
<a title="back to bottom" href="#to-bottom">
<img src="http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png" alt="back to bottom" />
</a>
</div>
</div>
<a name='to-bottom'/></a>


         Сохраняем на этом настройка завершена приятного изпользования.

0 коммент. :

© 2012-2017 Cash's from program