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

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


Рабочий вариант можно посмотреть здесь. Установка в Блоггере очень простая. Приведённый ниже код, Устанавливается в гаджет 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="http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png" />
<div id="VB-circle-mod"><div id="VB-container-circle"><a id="VB-fb" class="VB-btn" style="background:url(http://4.bp.blogspot.com/-KQgxd-K3Yto/T7DCLsXECJI/AAAAAAAADL0/5dEl8jrWm3k/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(http://4.bp.blogspot.com/-KQgxd-K3Yto/T7DCLsXECJI/AAAAAAAADL0/5dEl8jrWm3k/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(http://4.bp.blogspot.com/-KQgxd-K3Yto/T7DCLsXECJI/AAAAAAAADL0/5dEl8jrWm3k/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(http://4.bp.blogspot.com/-KQgxd-K3Yto/T7DCLsXECJI/AAAAAAAADL0/5dEl8jrWm3k/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


9 комментариев:

  1. Симпатичные кнопочки )

    ОтветитьУдалить
  2. Спасибо, девочки.

    ОтветитьУдалить
  3. Виктория, а кнопку новой соц. сети "ГАЛАКТИККА" ещё никто не создал? Хотелось бы и её установить на блог!

    ОтветитьУдалить
  4. Ирина, у них пока такой кнопки вообще нет, но обещают.

    ОтветитьУдалить
  5. Виктория, здравствуйте :) Я вместо фейсбука поставила вконтакте, как изменить картинку? Мучаюсь, помогите)

    ОтветитьУдалить
  6. А вот же строчка ведущая на картинку фейса http://4.bp.blogspot.com/-KQgxd-K3Yto/T7DCLsXECJI/AAAAAAAADL0/5dEl8jrWm3k/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png

    ОтветитьУдалить
  7. Real_LilyG Я так поняла, что Вам нужна картинка в Контакте. Поищите в интернете подходящую картинку В Контакте в формате png и вместо картинки ФБ установите её вместо адреса, что я указала вам в предыдущем ответе.

    ОтветитьУдалить

Пользовательский поиск
Foto Saya
My Photo