Плавающая панель социальной сети Google




Здравствуйте всем, кто заскочил на огонек. В этом посте информация еще об одной кнопочке всеми нами любимой социальной сети Google+. Блоги наши на платформе blogspot, поэтому наличие кнопки на страницах блога я считаю просто необходимым.

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


А ниже можно скопировать код такой кнопочки и установить на страницы своего блога обычным способом-дизайн-добавить гаджет

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("http://4.bp.blogspot.com/-okzPzWuiDGg/UMOGvgAcgAI/AAAAAAAABpQ/8Q8oTKkyA6Q/s400/g%252B%2Bsoftglad.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 275px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
.gplusbox div{
padding: 8px;
background: white;
border: 2px solid #D64937;
border-radius: 15px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/+OlgaProtasova/posts" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">

      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
</div></div>





Выделенное оранжевым измените на свой адрес аккаунта в социальной сети Google+ или можно вписать адрес своей странички Google+; выделенное фиолетовым-расположение кнопки на странице верх-низ; background: white;-цвет кнопки; border: 2px solid #D64937;-цвет и размер окантовки кнопки; border-radius: 15px;-радиус закругленных углов кнопки. 

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




Автор статьи ✎ Olga Protasova Выпуск ✹ 5/02/2014 Ярлыки ►


Открыть комментарии →

5 коммент. :

  1. Почему то не особо двигается вверх-вниз... Подскажите как сделать ?
    Перед этим установил плавающую панель Фейсбук,так виджет Гугла скрывается за ней.Пиксели меня,толку нет...

    ОтветитьУдалить
    Ответы
    1. Павел, в коде top:20%; измените к примеру на 60. Чем больше значение, тем ниже панель и наоборот.

      Удалить
    2. Всё получилось !!! Спасибо !!!

      Удалить
  2. К сожалению конфликтует со слайдером на главной странице ((,устанавливаешь виджет и неработает слайдер...

    ОтветитьУдалить
    Ответы
    1. Павел, здесь я уже Вам ничем не помогу. Скрипты конфликтуют друг с другом, надо искать оптимальный вариант. То ли от шаблона зависит, то ли еще от чего то. Если найдете инфу в инете, почему так происходит, напишите.

      Удалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *