Google+ Followers

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

17.04.2013

Back to top или Кнопка Вверх

Leave a Comment
                         Back to top или Кнопка Вверх

                                                                     

Привет моим читателям расскажу вам сегодня про удобный гаджет, ((кнопка вверх))) или Back To Top Button To Your Blogger. Так что же это такое, и зачем это нам: Кнопка располагается внизу нужна она для быстрого перехода к началу страницы, это очень удобно так что же нам надо что бы ее установить. Есть несколько вариантов ее установки, можно поставить вариант первый заходим к себе в блог, переходим на вкладку дизайн нажимаем добавить гаджет, выбираем из списка (((script html )))  без скобок добавляем вставляем в него следующий код.


      <a href="#" id="backtotop"><img src="адрес своей картинки" alt="back to top" /></a>


Нажимаем сохранить виджет готов, или вариант второй в вашем блоге переходим в шаблон, нажимаем изменить html  , потом зажимаем (((  ctrl+f  ))) у вас открывается строка поиска вводим в нее.
Этап 1.    ]]></b:skin>      далее код  что видите ниже копируем и вставляем выше     ]]></b:skin>



#backtotop {
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
}


Этап 2. Далее в поиске находим строчку </ body> и код который ниже, вставляем перед ней.


 <a href="#" id="backtotop"><img src="адрес своей картинки" alt="back to top" /></a>

Этап 3. После этого нам нужно будет найти строку в коде   <head>   и вставляем код ниже после этого тега.код такой:

<!-- start back to top -->
&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;
<!-- end back to top -->

Нажимаем проверить сохраняем, на этом настройка закончена что еще могу сказать, я когда ставил я ставил в шаблон, и штука вся в том что есть еще один вариант по моему самый простой. Мне не понадобился код который ставится во всех этих трех примерах , я сразу  перешел к строке   </ body> ,  и чуть  выше её ввел такой код:
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><a title="Back to Top" href="#top" style="position: fixed; bottom: 5px; right: 5px;"><img src="URL of Image" /></a></span> <a title="Back в Top" href="#top" style="position: fixed; bottom: 5px; right: 5px;"> <img src="url- своей картинки" /> </a></span>
И все  на этом установка была закончена и гаджет готов, тут в коде есть  2 важных места которые надо знать первое место это ((( right ))) - без скобок.  Меняя значение с этого(( right   на left )) вы будете перемещать ваш гаджет  влево или вправо.Второе место это обязательно не забыть вставить код картинки, вот  в этом коде "url- своей картинки"   а то у вас гаджета не будет не какого.
        Примеры кнопок ниже:



back to top button

  http://1.bp.blogspot.com/--DwxMNp5ts0/UA4lxxLt9FI/AAAAAAAAA-I/FVx5qcl5sos/s1600/back+to+top.png

back_to_top image

 http://1.bp.blogspot.com/-RyaiP14Kt3k/UA4nHmYWp6I/AAAAAAAAA-Q/lnKu_E3MF5U/s1600/back+to+top+button.png


back to top gadget

  http://4.bp.blogspot.com/-Xza7dz2bWvg/UA4rwoFeweI/AAAAAAAAA-4/omOn35nkC8g/s1600/Back_to_top_image.png


back to top classic button

 Image Url : http://4.bp.blogspot.com/-UxYpXwmtvBY/UA4-stkLctI/AAAAAAAAA_U/Vep2EnV7Ykw/s1600/back_to_top.png

back to top


  http://2.bp.blogspot.com/--ZUVhFY9f9M/UA5CyBYErZI/AAAAAAAAA_o/k8J2TBx_1-A/s1600/back+to+top+icon.png


 http://4.bp.blogspot.com/-11KQd74rcvA/UBIaSqLh4PI/AAAAAAAAA_0/VnnW_1-HbI4/s1600/back_to_top_button.png


 http://4.bp.blogspot.com/-_hixmsc0rYg/UCEYEdoaFTI/AAAAAAAABBU/OPdFiGmZVcM/s1600/back+to+top.png


 Image Url : http://2.bp.blogspot.com/-mjXcTioRjJo/UCEexX0-xOI/AAAAAAAABCE/i23WbyMhqUo/s1600/new+back+to+top+button.png
 
back to top For Blogger
http://3.bp.blogspot.com/_JwD5r652h00/SvDAnTlDfDI/AAAAAAAAAQY/y-NAytkDXjI/s1600/bttp-5.png
 
 
back to top For Blogger
http://2.bp.blogspot.com/_JwD5r652h00/SvDAnGbH7qI/AAAAAAAAAQQ/qKtrVmPCBXY/s1600/bttp-4.png
 
 
back to top For Blogger
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmyqvA9I/AAAAAAAAAQI/hACE99TswzU/s1600/bttp-3.png
 
 
back to top For Blogger
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmXE1tvI/AAAAAAAAAP4/pQk69X73NIo/s1600/bttp-1.png
 
 
back to top For Blogger
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmVOZPMI/AAAAAAAAAQA/_Y2Nd0UZVMM/s1600/bttp-2.png
 
 
back to top For Blogger
http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png
 
 
back to top For Blogger
http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI/AAAAAAAAARA/oEpqkKnL0Jw/s400/bttp-10.png
 
 
back to top For Blogger
http://2.bp.blogspot.com/_JwD5r652h00/SvDBBw_U6MI/AAAAAAAAAQ4/KDKaH8OTDO4/s400/bttp-9.png
 
 
back to top For Blogger
http://1.bp.blogspot.com/_JwD5r652h00/SvDBBzoz4II/AAAAAAAAAQw/n9hIomKpQxY/s400/bttp-8.png
 
 
back to top For Blogger
http://3.bp.blogspot.com/_JwD5r652h00/SvDBBlYeFHI/AAAAAAAAAQo/lzY3WpZpwPA/s40
 
 
back to top For Blogger
http://4.bp.blogspot.com/_JwD5r652h00/SvDBWWig4UI/AAAAAAAAARI/28cXbIDOaqk/s400/bttp-11.png
 
 
back to top For Blogger
http://4.bp.blogspot.com/_JwD5r652h00/SvDBWmm_WTI/AAAAAAAAARQ/xfyALfcAbZ4/s400/bttp-12.png
 
 
back to top For Blogger
http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png
 
 
 
back to top For Blogger
http://3.bp.blogspot.com/_JwD5r652h00/SvDBW-al_pI/AAAAAAAAARg/Aoxlzmp3Kw0/s400/bttp-14.png
 
 
  
back to top For Blogger
http://1.bp.blogspot.com/_JwD5r652h00/SvDBXF2WGRI/AAAAAAAAARo/FIPZOwsTTBc/s400/bttp-15.png
 
 
 
back to top For Blogger
http://3.bp.blogspot.com/_JwD5r652h00/SvDBloI2NZI/AAAAAAAAARw/VI-Li7cPUvM/s1600/bttp-16.png
 
 
back to top For Blogger
http://1.bp.blogspot.com/_JwD5r652h00/SvDBl9PLQ7I/AAAAAAAAAR4/5fV05DNfZ9o/s400/bttp-17.png
 
 
back to top For Blogger
http://3.bp.blogspot.com/_JwD5r652h00/SvDBl0UhsvI/AAAAAAAAASA/ge0GmH0HkyE/s400/bttp-19.png
 
 
back to top For Blogger
http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png
 
 

back to top icon
http://4.bp.blogspot.com/-nCql3VTRm2I/T2y4-t_IzeI/AAAAAAAAAT0/RSKd9GGQS_8/s1600/back+to+top.JPG
http://2.bp.blogspot.com/-mfD6OU1Knqk/T5HDgqFOqkI/AAAAAAAAAXQ/B0QudNCkuEo/s1600/back+to+top+1.png

http://1.bp.blogspot.com/-eXIk6DVP_qc/T5HDiV99zcI/AAAAAAAAAXc/i-ZdBbaETgk/s1600/back+to+top+3.png

http://1.bp.blogspot.com/-p8ytl5CRkCQ/T5HDhcOaZ8I/AAAAAAAAAXU/GUmWUheQUnE/s1600/back+to+top+2.png
http://4.bp.blogspot.com/-IL9Q5TpPSk4/T5HDjKpDIrI/AAAAAAAAAXk/FSs6QLcpx58/s1600/back+to+top+4.png
http://1.bp.blogspot.com/-yQH1mRV1pxU/T5HDkej22BI/AAAAAAAAAXs/2xE3Q8ATj78/s1600/back+to+top+5.png

0 коммент. :

© 2012-2017 Cash's from program