Кнопка вверх примеры для сайта Blogspot, Blogger

Здравствуйте дорогие читатели моего Blogga. Сегодня я хочу с вами поделится с примерами: кнопка вверх для сайта blogger, здесь вы найдете примеры кнопки бабочки, анимационные кнопки вверх, кнопки с пальцем вверх и много интересных и уникальных кнопок для вашего сайта Blogspot - Blogger.




 Добавить кнопку и сделать свой Блогер Более удобным для читателей.

Как добавить кнопку вверх на сайт blogger

Дальше читайте простую инструкцию для добавления кнопки на ваш сайт.

1. Кнопки вверх можно вставить в виджет Javascript.
2. Для этого вам нужно заходить на ваш сайт в Blogger.
3. Выбрать раздел дизайн
4. В дизайне нажать добавить гаджет
5. Выбрать Javascript и добавить один из примеров
6. Далее нажмите сохранить шаблон ю вас на сайте будет кнопка.

Выбирайте самые удобные коды для кнопки вверх и дате в javascript.


Примеры кнопки вверх для сайта Blogger

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-c2sAg2PlJLc/V1au1gTlKhI/AAAAAAAAAdw/_0qtxqYP-OEEpGCvwwvaxxMCPTG-sTKfQCLcB/h120/46358192_BABOCHKA.gif)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div> 

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-1uG1lqciGho/V1au00Ck8XI/AAAAAAAAAdg/VzPFAo5P6MkJr-xpeidRpa7ugZb9HXTwwCLcB/h120/129217876_2835299_.gif)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>

Кнопка бабочка для сайта с белым фоном.

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-FPGRKPbHfrM/V1au1Q35pPI/AAAAAAAAAds/JrNzuOTTyZwiVz9M5w3n9YZxSdbvofPKgCLcB/h120/435509435.gif)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>   

Красивая бабочка для blogger.

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-ymay2Qig5q0/V1au2Lg-kII/AAAAAAAAAd8/zZZ4r-_mH50RPnzXvI7U8EP_wwXYgRk_gCLcB/h120/993943505.jpg)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>

Бабочка верх

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-BwgSu5etfsQ/V1bKtTX3ilI/AAAAAAAAAgg/pXQGP-Fs9zQ8n_Hr2nO5atlXGUgNX7aewCLcB/h120/c701ebd202c1.gif)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-GJMpcuZZ6cY/V1au2dGJvLI/AAAAAAAAAeQ/Ar3xN48puKEqXaLmFsT1_r6lP9KCyEP8gCLcB/h120/avatar247835_1.gif)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>

TOP 11 примеров кнопки вверх для сайта Blogspot, Blogger, Это простые и удобные 11 кнопки вверх.

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/--9hpSvP0Wng/V1au25p_aII/AAAAAAAAAeg/pAmw-qDuxYoDy9NzTVTUx0GMfETCjb7hQCLcB/h120/knopka%2Bverh.png)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-jmTp3oBzz0Q/V1au3LiyubI/AAAAAAAAAew/HPbHCVQlH50NlCveCvoXxqk9tW3QGfstQCLcB/h120/up10.png)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>  

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-3b-TyoZfTgU/V1au3XM48BI/AAAAAAAAAe0/sang2GWk-_QvH0D0Qzz0uMI5Cx1VxvkPQCLcB/h120/z0bAP.png)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div> 

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-7FfTohzyoEM/V1au3W95ovI/AAAAAAAAAe4/XMDKxWFa4aQKyGLynxuDd97NHqsQg0u1QCLcB/h120/%25D0%25BA%25D0%25BD%25D0%25BE%25D0%25BF%25D0%25BA%25D0%25B0%2B%25D0%25B2%25D0%25B2%25D0%25B5%25D1%2580%25D1%2585%2B2.jpg)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-IsWTMPf25Kw/V1bBUlOkI3I/AAAAAAAAAfM/x_vqxRAK3jIoIXroaVX8Jx63CjBphynzACLcB/h120/dynamic_blue_up_left.png)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-ZwhNDji_10Y/V1bBUzQFQsI/AAAAAAAAAfU/M0va7c8YI4QGlcwmwUMPqSv_o24Sd4X3wCLcB/h120/str_15.gif)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>

 <style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-Cd69AZa6Jns/V1bBU4-UAuI/AAAAAAAAAfQ/7wSHcJswpt0vXDV9rtg5gaBXwAEOUABvACLcB/h120/up.png)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-BdP7uZB-3hY/V1bG4VRAjYI/AAAAAAAAAfo/XchipNJv9_UcSRke4syPCqZve8fhDssKACLcB/h120/3_2.png)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-XNR0460bP-U/V1bG5BdPc9I/AAAAAAAAAgA/XVL0KQEkmmE7IAr2wzuQgl-Byb9x3TSugCLcB/h120/toTop.png)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-0AmU8dzxmRo/V1bG4yHOcTI/AAAAAAAAAgE/wJvXXakq4cw-U5c3MWbHocURW534VcY4gCLcB/h120/Upload-icon.png)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-sy2lIuNSP-w/V1bG5VK77rI/AAAAAAAAAgI/l_S-DGO4kHUI8frQa8_yImJxyZiTgjvTgCLcB/h120/vverh.png)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>

Пример кнопки вверх в виде руки, для blogger.

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-sxBLpIAdPWA/V1bG4oEDhgI/AAAAAAAAAfw/1xTyrDj1YjkJ_H6z09n8QLSmpt9DZtB5QCLcB/h120/120.png)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 450) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>

<style>.b-top
 
{z-index:2600;position:fixed;left:0;bottom:50px;width:34%;margin-left:45%;opacity:
 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:140px 12px 4px;
color:black;background:
 
url(https://lh3.googleusercontent.com/-vH94Ux_vw8U/V1bIzHI7PKI/AAAAAAAAAgU/sos9mt_8sggzES00_nSUxgzrvgP1Md3ggCLcB/h120/top_9.png)
 no-repeat 50% 11px;border-radius:7px;}</style><script 
type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 300) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div> 

Кнопка вверх в виде ракетки для сайта blogger находится по этому адресу.


Это были все примеры кнопки вверх. Удачи вам во всех ваших делах.

 551303