uma-sovsem.net

блог нерадивого бухгалтера — ищу себя в интернете

Icon Icon Icon

Наверх Вниз

Как установить красивые кнопки соц.сетей на сайт

кнопки соц.сетей на сайтПосле того, как я установила новые вращающиеся кнопки соц. сетей, которые Вы можете лицезреть у меня, многие спрашивают, как я это сделала. И вот настало время поделиться этой информацией. Все элементарно.

Необходимо скопировать специальный код, в то место, где наши кнопочки будут жить и радовать глаз читателей. В моем случае я вставляла код в шапку (header.php). Если Вы хотите установить их в боковую колонку, выберите sidebar.php.

Кнопки соц.сетейА вот и сам код (элементы <pre> — вставлять не нужно) .

</pre>
<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="ССЫЛКА НА ВАШ RRS ПРОФИЛЬ" rel="nofollow" target="_blank"><img border="0" src="http://uma-sovsem.net/3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon" /></a> <!--End Rss Icon-->  <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href=" ССЫЛКА НА ВАШ ПРОФИЛЬ в фейсбук"  " target="_blank"><img border="0" src="http://uma-sovsem.net/4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon" /></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="ССЫЛКА НА ВАШ ПРОФИЛЬ в твиттер" " target="_blank"><img border="0" src="http://uma-sovsem.net/3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon" /></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href=" ССЫЛКА НА ВАШ ПРОФИЛЬ в гугл+"  " target="_blank"><img style="margin-right:1px;" src="http://uma-sovsem.net/2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png" /></a> <!--End Google+ Icon-->  </div><br/>  </center>
<pre>

В коде необходимо прописать ссылки на Ваш профиль в той или иной соц.сети, для этого заменим слова:
«ССЫЛКА НА ВАШ RRS ПРОФИЛЬ»
«ССЫЛКА НА ВАШ ПРОФИЛЬ в фейсбук»
«ССЫЛКА НА ВАШ ПРОФИЛЬ в твиттер»
«ССЫЛКА НА ВАШ ПРОФИЛЬ в гугл+»
на нужные ссылки.
И вот результат на лицо, ой на блог!)

Icon Icon Icon

Как Вам кнопочки? Мне очень нравятся.

Если заменить в коде часть «title=Follow Our Updates On Twitter» на title=»Следите за мной в  Twittere», то всплывающая подсказка при наведении на кнопку Твиттера будет не на английском, а на русском языке. Аналогично можно сделать и для остальных кнопок, хотя в принципе по их внешнему виду и так все понятно.
Между прочим красивые кнопки соц.сетей помогут не только продвинуть Вас и Ваш блог, но даже помогут улучшить поведенческие факторы, в частности увеличивается время, проведенное читателями на блоге (это я по собственному опыту говорю). Иногда смотрю в вебизор (это сервис, предоставляемый Яндекс Метрикой, позволяющий шпионить за посетителями) и вижу, как посетители ни сидят и крутят эти кнопочки. =)

Потыкайте по кнопочкам

0
Загрузка...

 

Вы можете оставить комментарий, или трекбэк с Вашего сайта.

комментариев 80 к “Как установить красивые кнопки соц.сетей на сайт”

  1. Пошел ставить к себе на сайт!
    Спасибо, Бух!

  2. Круто! Давно мечтала узнать, как ты их сделала 🙂 Но вот теперь я в полном замешательстве — поставлю к себе, а наши общие читатели скажут, что сперла у тебя)))

  3. Если заменить участок кода …title=»Follow Our Updates On Twitter»… на …title=»Следите за нашими обновлениями на Twitter»… , то всплывающая подсказка возле кнопки Твиттера будет не на англ., а на русском языке. Аналогично можно сделать и для остальных кнопок.

  4. Toriani:

    Бух, спасибо за замечательную идейку! Правда, негоже у тебя тырить кнопочки, пойду поищу что-то на подобии))

  5. Эти кнопочки для меня слишком красивые.)
    А я люблю флэш-облако крутить. Я от него впадаю в транс.)))

  6. Вот, наконец, дождались давно обещанную статью.:)

  7. Vika:

    А я уже стырила и установила у себя!
    Классные такие кнопки, вертлявые )))Спасибо!!!

  8. А у меня кнопочки шли приятным дополнением к теме. Но я свои поставила. В любом случае, код — это полезная штука!

    • нерадивый бухгалтер:

      Зашла посмотрела, у Вас прикольные кнопочки наверху, правда я бы их немного поярче сделала)

      • Бух, мы же вроде на «ты» перешли. 😉 Всё равно они у меня надолго не задержались, люблю часто обновлять дизайн. 🙂

        • нерадивый бухгалтер:

          У меня на автомате, блин, я буду исправляться, дай мне время =))
          Мне кажется обновления дизайна — не очень хорошо для блога. И говорят ПС это плохо воспринимают…Да и посетители запоминают по дизайну блоги. Наверное, когда ты найдешь свой вариант, ты остановишься)

          • ОК, а то я себя старушенцией ощущаю. 🙂
            Я имею в виду фон и кнопочки, обычно это сезонные обновления, и если что-то прям интересное встречаю. А от всяких раздражителей, типа птичек летающих и поющих по поводу и без, еще на предыдущем блоге отказалась, а то посетители пугались. 🙂

          • Я тоже не люблю всяких летающих, прыгающих зверушек на блоге — отвлекают здорово!

  9. Кнопочки класснючие. Я давно на них внимание свое обратила! Но не буду, наверное, я их к себе забирать — не впишутся в дизайн.
    Но они у тебя нереально забавные!

  10. allemiko:

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

    • нерадивый бухгалтер:

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

  11. allemiko:

    Пошел искать другую фишку 🙂

  12. allemiko:

    фишек пока нет, за то он пошее получит по полной))

    • Что там у тебя за дела были с роботом? Уже перевоспитал?
      А то я собираюсь к тебе на рюмочку чая, и вот теперь опасения появились — робот-то того, сам в атаку не бежит сразу?

  13. Я такие установила давно, но в сайдбар в форме виджета, и в редактор лазить не пришлось. Но это на любителя, конечно. Я просто очень обновлений шаблона своего опасаюсь, ведь все изменения в редакторе прахом пойдут…

  14. Поставил кнопки на сайт. Фейсбук что-то не открывает всю страницу. Непонятно почему так.

    • нерадивый бухгалтер:

      Я зашла по ссылке на ФС, открылась Ваша страница, но т.к. меня там нет, я даже не пойму вся она или нет, проблема решилась?

      • На основном браузере у меня сразу заходит на мою страницу, а на других браузерах на ту страницу, где я есть, но там еще какие-то кнопки для какой-то регистрации. А сразу, чтобы зайти на основную страницу в Facebook, так не получается.

        • нерадивый бухгалтер:

          Это наверное, потому что на основной страничке у Вас данные сохранены и вы сразу можете войти в свой профиль, а на других браузерах предлагают войти в ФС, нет?

  15. Перефразирую Чехова: В блоге всё должно быть прекрасно: и текст, и оформление, и социальные кнопки. ))

  16. Отлично смотрится 🙂 У меня к счастью все это дело уже встроено в шаблон, а то я не люблю лазить в коде 🙂

  17. Не буду я как все! Счас все нарядимся в одинаковые кнопочки…
    Буду безкнопочной!

  18. Я тоже так думала, когда прочитала, что если всем надо, значит, мне необязательно,а то неинтересно.

  19. А чё, интересно вполне 🙂 На новый проект поставлю их 🙂

  20. Гуглекс:

    М.. А я что-то не понял. Это с картинки надо код переписать, чтобы такие кнопки получить?

  21. Кнопочки классные. Вот только бы еще для «Вконтакте» такую завести

  22. Как раз выполняю заказ, создаю блог, вот туда и поставлю их. Бух, ты же не против? 🙂

    • нерадивый бухгалтер:

      Я «за», рада, что пост многим пригодился!) Ты тоже блоги на заказ делаешь, молодцы Вы)

  23. Первый мой блог на заказ, делаю по новогодней скидке очень дешево 🙂 За кнопки спасибо!

  24. Анна:

    Классные кнопочки! А почему кнопка Facebook отправляет на страницу Вконтакте?

    • нерадивый бухгалтер:

      Я люблю путать людей!) И у меня все не как у них) У людей тобиж) Но Вы можете настроить все как надо! =)

  25. Кнопочки и правда, симпатяшные.
    Но я не поняла ,Бух, ты ими что ли не пользуешься? Под статьёй у тебя простые стоят.

  26. кнопочки классные, надо будет и себе как-нибудь такие сделать

  27. Я тут после смены шаблона думала такие кнопки вставить, но когда дочитала до места, что надо ссылки вставлять, сразу поняла, что мне лень.
    Может, пора мне начать бить себя в лоб? Вдруг поможет.

  28. А я эти красивые кнопочки где-то у другом месте «стырил».
    У жи не помню где. и у кого 🙁
    Но помню точно, что поблагодарил за предоставленное удовольствие 😉

  29. Что-то у меня сегодня с пунктуацией не всё в порядке. Исправляю, а то могут не о том подумать :
    «А я эти красивые кнопочки где-то в другом месте «стырил».
    Уж и не помню где, и у кого «

  30. allemiko:

    Наконец то я намучался, поставил все такие же кнопочки себе на блог (упрямый блин), только картинки поменял 🙂 Сижу теперь кручу верчу как дурачек, заходите посмотрите 🙂 Вместе покрутим.

  31. Egor:

    Отличное решение. Жаль только, что в IE не работает 🙁

  32. Интересная фича, пойду-ка и я такие кнопочки себе на сайте попробую забабахать

  33. Спасибо, очень красиво, у себя реализовал.

  34. Мне очень понравилось, благодарю вас, однозначно в закладки.

Оставить отзыв