Google Мой путь к успеху!: Как установить фиксированные кнопки социальных сетей на Blogger

пятница, 11 января 2013 г.

Как установить фиксированные кнопки социальных сетей на Blogger


Сегодня я покажу Вам, как установить фиксированные кнопки социальных сетей на Blogger.


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

Но после я захотела поставить себе кнопки поярче и покрупнее, сразу привлекающие внимание.

Кроме того, мне захотелось поставить эти кнопки так, чтобы они всегда были на глазах, а не убегали при прокрутке страницы.

Вот эти 2 причины и привели меня в поисковую систему Google, чтобы найти сервис с привлекательными кнопками, а уж поставить их так, как мне надо, - не проблема.


Такой сервис я нашла, называется: Pluso.  Кликайте по названию, заходите на него, выбирайте стиль кнопок. Я выбрала 2-й ряд квадратных.

фиксированные кнопки социальных сетей

В дополнительных опциях я выбрала: вертикальные, яркие, крупные, без счетчика, с фоном. Если Вы тоже выберете с фоном, то сразу же сможете выбрать цвет фона на палитре. Ниже есть просмотр, сразу видно, как это будет выглядеть.

Следующим этапом выбирайте сервисы, которые у Вас будут на виду (основные) и скрыты под знаком «+» (дополнительные). Их можно перетаскивать: из дополнительных - в основные и наоборот, а также менять порядок следования. Удалить только нельзя. И что-то добавить, к сожалению, тоже.

Итак, все выбрали, посмотрели предпросмотр: все Вас устраивает? Тогда нажимайте кнопку «КОПИРОВАТЬ» ниже кода для вставки и идите во вкладку «Дизайн» своего блога.

Чтобы лишний раз не залезать в шаблон, я решила вставить этот код в гаджет, причем в тот гаджет, который находится под сообщением.

фиксированные кнопки социальных сетей

Нажимайте Добавить гаджет, выбирайте HTML/JavaScript и вставляйте скопированный код (например, сочетанием горячих клавиш Ctrl+V).  Если Вы хотите, чтобы кнопки у Вас стояли так же, как у меня, то в этот код необходимо сделать небольшую вставку.

фиксированные кнопки социальных сетей

Если Вы выбирали кнопки с фоном, то после кода:

<div class='pluso pluso-theme-bewel pluso-vertical' style="background:#7bb9f9;

(причем набор символов 7bb9f9 у Вас будет другой, потому что цвет фона Вы выбрали свой, а не мой), Вам нужно вставить это:

display:scroll; position:fixed; top:90px; left:50px;

Разделите пробелом то, что было, и Вашу вставку.

В случае, если Вы выбрали кнопки без фона, вставляйте код:

style="display:scroll; position:fixed; top:90px; left:50px;" 

после:

<div class='pluso pluso-theme-bewel pluso-vertical'

Опять же, отделите пробелами вставку.

Еще, возможно, что строка с тегом div будет покороче, например, вот такая:
<div class='pluso' (Все течет, все изменяется, и я не могу предусмотреть всего на всю жизнь).

Сохраните гаджет, сохраните расположение и просмотрите блог. Должно получиться примерно, как у меня. Как бы вы не крутили полосу прокрутки, кнопки должны остаться неподвижными.

фиксированные кнопки социальных сетей


Вам понравилась статья? Поделитесь ссылкой с друзьями:



А чтобы не пропустить новые статьи, подпишитесь на обновления блога:

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

  1. Нина, сегодня, во Всемирный день слова СПАСИБО, я говорю тебе БОЛЬШОЕ СПАСИБО за очередную полезность.

    Ты знаешь, этот ряд кнопок социальных сетей настолько яркий и привлекательный, что он сам по себе УЖЕ удерживает внимание читателя.

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

    ОтветитьУдалить
    Ответы
    1. И тебе, Света, БОЛЬШОЕ СПАСИБО за внимание к моему блогу и интересные комментарии к моим статьям.

      Удалить
  2. Нина, от себя тоже хочу тебя поблагодарить за твои полезные посты; за твою отзывчивость и за то, что когда-то страна "Интернет" свела нас на своих просторах. Кнопочки очень привлекательно смотрятся на блоге)) я думаю, что процесс установки многие возьмут себе на вооружение. Жду следующую полезность. Успехов!!!

    ОтветитьУдалить
    Ответы
    1. И тебе спасибо, Ирочка, за дружбу, за то, что никогда не отказываешь в помощи. Как здорово, что мы встретились в этой стране "Интернет"!

      Удалить
  3. Хорошая альтернатива раскрученному Share42). Яркие, сочные и привлекательные.
    А те, которые с левой стороны сайд-бара - не будешь убирать??

    Я вот думаю, а если бы пару лет назад, ты психонула и ушла из нашей дружной команды, как бы мы разбирались в премудростях Blogger теперь?))

    ОтветитьУдалить
    Ответы
    1. Подумаю еще над кнопками и вообще над дизайном, возможно, что-то поменяю.
      Вот потому и не ушла, что команда уж больно дружная попалась :)

      Удалить
  4. Спасибо за четкое разъяснение, да еще с добавлениями. Попробую, покручу.

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, Александр! Покрутите... :)

      Удалить
  5. Нина спасибо Вам огромное, я недели наверное две пытался найти что нибудь подобное, Ваш блог самый полезный и нужный помощник, успехов Вам!!!

    ОтветитьУдалить
    Ответы
    1. Спасибо и Вам, Сергей! Я стараюсь делать полезный блог. Успехов!

      Удалить
  6. Ваш гаджет не работает СОВСЕМ.

    ОтветитьУдалить
    Ответы
    1. Интересно!!! У всех работает, а у Вас нет... Не значит ли это, что все-таки не все сделали так, как я описывала?

      Удалить
    2. Возможно я Вас разочарую, но НЕТ, я все делала так как написано.

      Удалить
  7. Я сделала все, как вы описывали, но он не появился.

    ОтветитьУдалить
    Ответы
    1. Попробуйте сделать еще раз, повнимательнее

      Удалить
    2. Возможно, я Вас разочарую, но вы - ЕДИНСТВЕННАЯ, у кого не получилось

      Удалить
    3. Код кнопок изменился и данный способ с ним не действует.

      Удалить
    4. В вашей статье просто устаревшая информация. По ней уже не получается настроить виджет.

      Удалить
    5. А то, что люди после Вас уже поставили этот виджет? А то, что я сейчас, буквально за пару минут, поставила такие кнопки на свой тестовый блог? Вот, посмотрите: http://ninazhuperina.blogspot.com.es/
      Да, там код в Pluso изменился, но нам-то что до этого? Мы берем его и вставляем в свой гаджет. Не знаете, куда вставить добавочку? Тогда задайте вопрос, и я с удовольствием на него отвечу. А говорить, что гаджет не работает СОВСЕМ, ну это уж - извините! Только что убедилась, что работает

      Удалить
  8. Спасибо большое!!! Долго мучалась, но справилась с задачей))))

    ОтветитьУдалить
  9. У меня еще вопрос, если можно. У вас очень интересный дизайн кнопок "станем друзьями", подскажите как такое установить у себя?

    ОтветитьУдалить
    Ответы
    1. Да, пожалуй, надо про этот виджет написать. Заказ принят, ждите статью :)

      Удалить
    2. ура-ура-ура!!! ждем

      Удалить
  10. Спасибочки огромное!!!! Все получилось, методом подгона измения цифры top:90px; left:50px на 110/30 и получилось красиво :)

    ОтветитьУдалить
    Ответы
    1. Все правильно, дизайн блога у всех разный и экран компьютера - тоже, поэтому частенько приходится подгонять. Рада, что Вам нравится :)

      Удалить
  11. Спасибо. Благодаря Вашим советам, красиво оформил себе блог.

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, Алексей! Хорошо, когда советы работают. Желаю дальнейших успехов в "дизайнерстве".

      Удалить
  12. После какого кода встаялть этот код? Если Вы выбирали кнопки с фоном, то после кода:

    <div class='pluso pluso-theme-bewel pluso-vertical' style="background:#7bb9f9;

    ОтветитьУдалить
    Ответы
    1. Егор, а статья на этом не закончилась, читайте дальше. После этого кода, который Вы привели, надо вставить тот, который я написала двумя строчками ниже, после слов "Вам нужно вставить это"

      Удалить
  13. Анонимный23 мая 2013 г., 14:12

    здравствуйте, возможно ли поменять ссылки с иконок? допустим в том же контакте не поделится ссылкой а на адрес определенной группы. спасибо

    ОтветитьУдалить
    Ответы
    1. К сожалению, здесь это не получится, потому что используется скрипт самого сервиса "Pluso".

      Удалить
    2. Анонимный24 мая 2013 г., 9:10

      а не подскажите как можно реализовать данную идею. иконки=гиперссылки внутри сообщения это понятно, видимо возможно. а если есть необходимость на весь блог, внизу страниц там где нет сообщений.
      спасибо

      Удалить
    3. Это неважно, где стоят кнопки. Перейдите на главную страницу, а не на страницу конкретного сообщения, тогда все ссылки на кнопках будут вести на главную, то есть на весь блог.

      Удалить
  14. Александр Озеров13 июня 2013 г., 21:51

    Здравствуйте, у меня эти кнопки не работают, раньше работали, а сейчас нет. Не подскажете почему?

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

      Удалить
  15. Здравствуйте, Нина!
    Не перестаю восхищаться вашей щедростью, как легко вы делитесь своими знаниями.
    Все очень нравится, особенно то, что все это можно использовать на платформе блогспот.
    Давно ищу скрипты всплывающего окна и социальный замок. Все, что предлагается в интернете, предназначено для вордпресс(для этого есть плагины).
    Буду очень признательны, если вы подскажете как это осуществить.


    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Галина! К сожалению, в этом помочь не могу. Всплывающие окна вообще не люблю, а социальным замком и в вордпрессе не пользуюсь, хотя даже плагин платный купила. Что-то меня останавливает в его использовании, какая-то нечестность, что ли, по отношению к читателю

      Удалить
  16. Ответы
    1. Прекрасно! Заходите еще, у меня много всяких полезностей :)

      Удалить
  17. Класс! долго искала, как поставить именно такие кнопочки! Спасибо большое!!!

    ОтветитьУдалить
    Ответы
    1. Отлично! Когда долго что-то ищешь - найдешь обязательно :)

      Удалить
  18. Хочу разместить их в правом верхнем углу страницы, но не получается их там нормально зафиксировать. Позиционировал с помощью "Добавить CSS", но при изменении масштаба страницы кнопки разбегаются по сторонам. Не подскажете как решить эту проблему?

    ОтветитьУдалить
    Ответы
    1. Чтобы ответить на Ваш вопрос, мне нужно видеть проблему. А не видя. что у Вас происходит, я ничего сказать не могу

      Удалить
    2. В моем блоге http://hivemed.blogspot.ru/ хочу установить кнопки от плюсо в правом верхнем углу шапки где пустое место. Какие параметры добавить к коду самих кнопок, чтобы они встали именно туда и оставались там независимо от разрешения экрана посетителей.

      Удалить
    3. Если Вы вместо моих top:90px; left:50px поставите top:0px; right:0px, ну или вместо нуля поставите то смещение, которое нужно, то они должны встать как влитые в этом углу.

      Удалить
    4. Попробовал - то же самое. При смене масштаба в браузере (Ctrl++,Ctrl+-) кнопки меняют местоположение.
      Но потом проверил Ваш блог - такая же проблема. Можете проверить здесь http://quirktools.com/screenfly/ При разрешении экрана 1024x768 (весьма популярное айпадовское разрешение) и меньше кнопки "наезжают" на страницу. Так что можете тоже искать решение проблемы.

      Удалить
    5. А, Вы об этом. Так бы сразу и сказали, что наезжают на текст. А Вы написали, что разбегаются по сторонам. Да, есть такое дело. Но в этом случае нельзя использовать fixed, тем более, если Вы кнопки хотите поставить в шапку. Ведь fixed - это фиксированное положение относительно окна браузера, а не блога. Вам нужно найти место в коде шаблона и там вставить код кнопок (без fixed).
      А я эту проблему знаю с тех пор, как поставила эти кнопки. Но я сделала то, что хотела, и по-другому это в блоггере сделать нельзя, разве что писать скрипт, учитывающий ширину экрана пользователя. Но это уже другой этап блоггерства: не начинающий.

      Удалить
  19. Ну не прямо разбегаются, конечно) В зависимости от масштаба они в разные стороны "гуляют" (не обязательно на текст), поэтому так написал. На счет фикса я догадался и это значение убирал. Место в шаблоне я находил под них (получалось где-то между названием и описанием), но тогда они растягивают всю шапку, что тоже не ок.

    ОтветитьУдалить
    Ответы
    1. Знаете, я попробую у себя установить эти кнопки так, как Вы хотите, и тогда уже точно опишу. Сейчас у меня есть кое-какие мысли на этот счёт, но надо их проверить. Установите пока кнопки под статьей, этот вариант не хуже (а может, и лучше), а потом будете двигаться дальше

      Удалить
  20. В любом случае спасибо за старания) А под статьями у меня уже яндксовые стоят.

    ОтветитьУдалить
    Ответы
    1. Да мне уже и самой интересно! Мысль такая, правда, была уже, поставить кнопки в шапку, но на воплощение все времени не хватает. Теперь толчок дан, постараюсь долго не тянуть

      Удалить
    2. Статья готова: nwa-uspech.blogspot.com/2013/10/ustanovka-knopok-v-shapku-bloga-blogger.html

      Удалить
  21. Здравствуйте , Нина! Помогите пожалуйста.При установке кнопок вертикально , также как у Вас , они у меня установились на странице , не зафиксировались,за блогом, а прокручиваются.в чем моя ошибка?

    ОтветитьУдалить
    Ответы
    1. Оля, проверьте еще раз внимательно. Если все сделали так, как написано, они должны встать правильно. За то, чтобы они не прокручивались, отвечает вот это: display:scroll; position:fixed;
      Если не получится снова, тогда ищите меня в скайпе: nina_zh1. Попробуем разобраться

      Удалить