Выскакивающие кнопки социальных сетей.

Доброго времени суток, друзья, читатели и гости блога. Предлагаю вашему вниманию необычные, выпрыгивающие кнопки социальных сетей. Каких только кнопочек не увидишь на сайтах. В данном случае мы просто сделаем одну кнопку, при нажатии на которую появятся другие. Эффект сам по себе прикольный и для оформления дизайна блога
, может, кому-то из вас и пригодится. Вот как - то так они выглядят.

Рабочий вариант можно посмотреть здесь. Установка в Блоггере очень простая. Приведённый ниже код, Устанавливается в гаджет HTML/JavaScript в лбом месте раздела дизайн.

Код.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#VB-circle-mod {
bottom: 0 !important;
left: 5px;
position: fixed;
}
#VB-container-circle {
position:relative;
height:100px;
width:100px
}
#VB-base-button {background:-moz-linear-gradient(top,#2a83cc 0,#155596 100%) #155596;background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#2a83cc),color-stop(100%,#155596));background:-webkit-linear-gradient(top,#2a83cc 0,#155596 100%);background:-o-linear-gradient(top,#2a83cc 0,#155596 100%);background:-ms-linear-gradient(top,#2a83cc 0,#155596 100%);background:linear-gradient(top,#2a83cc 0,#155596 100%);
border:4px solid #fff;
text-decoration: none;
z-index:9999;
cursor:pointer;
border-radius:50px 50px 50px 50px;
box-shadow:0 1px 3px rgba(0,0,0,0.5);
color:#fff;
font:68px Arial;
height:80px;
left:0;
padding:0;
position:absolute;
text-align:center;
top:0;
width:80px
}
.VB-btn {
position:absolute;
height:50px;
width:50px;
border-radius:25px;
top:15px;
left:15px;
-webkit-transition:all 250ms;
-moz-transition:all 250ms;
-o-transition:all 250ms;
-ms-transition:all 250ms;
transition:all 250ms;
box-shadow:0 1px 3px rgba(0,0,0,.5)
}
#VB-fb.open {
top:-125px;
left:25px
}
#VB-fb.open.clicked {
top:-135px;
left:15px
}
#VB-tw.open {
top:-105px;
left:80px
}
#VB-gplus.open {
top:-75px;
left:125px
}
#VB-rss.open {
top:-30px;
left:160px
}

.plus {
-moz-user-select: none;
-moz-transition:all 200ms ease-in 0s;
-webkit-transition:all 200ms ease-in;
-o-transition:all 200ms ease-in
}
.rot {
-moz-transform:rotate(137deg);
-o-transform:rotate(137deg);
-webkit-transform:rotate(137deg);
transform:rotate(137deg)
}
</style>
<script type="text/javascript">var delay=40,delayTime;$(function(){btns=$(".VB-btn");$("#VB-base-button").toggle(function(){$("span.plus").addClass("rot");btns.each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.addClass("open")},delayTime)})},function(){$("span.plus").removeClass("rot");$($(btns).get().reverse()).each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.removeClass("open")},delayTime)})})});</script><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuJ4paz14K7OnHg4ZixDWnC_v9T6omduCirL6LwlhHXg_b3DYLp-RmPCaqWaLqC92F-19V7ALekjvPUL5cm3nL91MT9C85-VvgweyAo81LSKhje4EVkApG8JFN9_OfNrK9bCqaZ8M5u0k/s1600/1x1juice.png" />
<div id="VB-circle-mod"><div id="VB-container-circle"><a id="VB-fb" class="VB-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBdIdj_X8nhFXu3Dh6Qda4KA8tzkoBbygEcmsxKDQ6943ZKygj8ubTtA_onMtkP1DrxS4Wr0cJJL4-FWLFsUftBFlGns5LW7eJILNEj7tR98GNDwvMPD1XKJqK5PzkqT2mU4dB7DqDANto/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -1px 0" href="https://www.facebook.com/viktoria.barad" rel="nofollow" target="_blank"></a><a id="VB-tw" class="VB-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBdIdj_X8nhFXu3Dh6Qda4KA8tzkoBbygEcmsxKDQ6943ZKygj8ubTtA_onMtkP1DrxS4Wr0cJJL4-FWLFsUftBFlGns5LW7eJILNEj7tR98GNDwvMPD1XKJqK5PzkqT2mU4dB7DqDANto/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -52px 0" href="https://twitter.com/VikserV" rel="nofollow" target="_blank"></a><a id="VB-gplus" class="VB-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBdIdj_X8nhFXu3Dh6Qda4KA8tzkoBbygEcmsxKDQ6943ZKygj8ubTtA_onMtkP1DrxS4Wr0cJJL4-FWLFsUftBFlGns5LW7eJILNEj7tR98GNDwvMPD1XKJqK5PzkqT2mU4dB7DqDANto/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -157px 0" href="https://plus.google.com/u/0/+%D0%92%D0%B8%D0%BA%D0%B0%D0%91%D0%B0%D1%80%D0%B0%D0%B4/posts" rel="nofollow" target="_blank"></a><a id="VB-rss" class="VB-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBdIdj_X8nhFXu3Dh6Qda4KA8tzkoBbygEcmsxKDQ6943ZKygj8ubTtA_onMtkP1DrxS4Wr0cJJL4-FWLFsUftBFlGns5LW7eJILNEj7tR98GNDwvMPD1XKJqK5PzkqT2mU4dB7DqDANto/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -105px 0" href="http://feeds.feedburner.com/shpargalochkiru" rel="nofollow" target="_blank"></a><a id="VB-base-button"><span class="plus">+</span></a></div></div>

Обратите внимание на участок кода, который я отметила красным цветом. Это скрипт библиотеки jquery. Скорее всего, она у вас уже установлена и тогда нужно убрать эти строчки из кода.

Вместо моих адресов аккаунтов в социальных сетях, вставьте свои, соответственно - Фейсбук, Твиттер, Гугл+ и адрес фида.

Вот такие озорные кнопки социальных сетей можно установить всего за несколько минут.

И у меня сегодня всё. Спасибо, что читаете мои шпаргалки и до новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email