Янв
9
2011
SEO // Новости

Кнопки социальных сетей

Автор Автор s-m-s    Комментарии 9 коммент. »

Кнопки социальных сетей на каждом блоге свои, в плане оформления, дизайна, расположения. Кто-то создаёт их в низу поста, как у меня, кто-то делает плавающую панель.
Лично моё мнение, что после поста — это как-то правильнее.

Так вот, периодически пользователи спрашивают, как сделать такие же кнопки для добавления в социальные сети как на моём блоге и чтобы не отвечать каждому в отдельности, я решил написать этот пост.

1. Первым делом скачиваем архив, в котором лежат сами иконки кнопок по следующей ссылке:
Архив с кнопками социальных сетей

2. Устанавливаем код кнопок в single.php (одиночная запись).

Код кнопок социальных сетей для добавления понравившихся статей:

<!— Кнопки добавления статьи в социальные сети —>

<div class=»buttons»>

Понравился пост, делимся с другими:<br /><br />

Внимательно проверьте адрес до иконок кнопок!!!

3. Оформляем кнопки стилями.

Добавляем стили кнопок социальных сетей в таблицу CSS

.buttons{
color:#000000;
font-family:Helvetica, Arial, sans-serif;
font-size: 18px; /* размер шрифта */
font-weight:normal; /* стиль текста: жирный */
padding:15px; /* отступ от границ */
border:2px solid #1D5770; /* толщина и цвет рамки */
background: #9ACEE4; /* фоновый цвет */
}

.buttons a img{
border: none;
opacity:1.0; /* непрозрачность: 100% */
}

.buttons a:hover img{
border: none;
opacity:0.7; /* непрозрачность: 70% */
}

Как вы уже заметили, в одном обрамлении (в одной рамке), на моём блоге, находятся и сами кнопки социальных сетей и форма подписки. Код формы берёте из своего аккаунта в feedburner и вставляете в один DIV-слой с кнопками.

Вы предпочитаете платить за видео клипы или клипы онлайн смотреть бесплатно? Уверен, что второе. Тогда смотрим.

© 2011, Деньги-SEO-Деньги. Уважайте чужой труд! При копирование материала делайте ссылку на блог автора.

Метки:

Об авторе:

Занимаюсь саморазвитием в области seo-оптимизации и сайто-монетизации. http://sharemant.ru/ - мой блог | деньги-seo-деньги - название моего блога Заработай на своём блоге. Лучший заработок на кинотрафике!

Есть 9 коммент. + Добавить

  • incomewm 11 Январь 2011 в 17:21

    Извините, что не в тему, скажите пожалуйста название вашего шаблона сайта

    Ответить
  • Prince 11 Январь 2011 в 21:27

    Спасибо. все получилось, правда, из-за особенностей шаблона мне пришлось реализовать эту фишку несколько иначе (коды кнопок у меня прописаны в theme-function.php). Кроме того я решил добавить еще одну кнопу — Blogger (Blogpost). По моему мнению она не будет лишней. Вот код, кому интересно:
    <a target="_blank" rel="nofollow" href="http://www.blogger.com/blog_this.pyra?t&u=&n=&a=ADD_SERVICE_FLAG&passive=true&alinsu=0&aplinsu=0&alwf=true&hl=ru&skipvpage=true&rm=false&showra=1&fpui=2&naui=8«><img src="/images/blogger.png» title=»Добавить в свой блог на Blogger.com»>

    Ответить
    • s-m-s 11 Январь 2011 в 21:42

      Сенк и ю, воспользуюсь обязательно.

      Ответить
  • Prince 11 Январь 2011 в 22:12

    Кнопочку кому надо для Blogger’а можете взять эту, вроде более-менее похоже получилось:

    s014.radikal.ru/i328/1101/f8/8ac7fce34120.png

    Ответить
  • Ready 8 Июнь 2011 в 11:28

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

    Домен рфный.

    Ответить
  • Andreika85 4 Октябрь 2012 в 16:30

    Влеплю и себе такое. Спасибо

    Ответить
  • Екатерина 22 Ноябрь 2012 в 22:29

    Только вот при скачивании архива пишет, что такая страница не найдена((

    Ответить
    • s-m-s 23 Ноябрь 2012 в 2:59

      да, к сожалению папка удалена с сервера, но Вы можете прямо из моей формы скачать кнопки, то есть наводите на изображение и жмите «Сохранить изображение как…»

      Ответить

Оставить комментарий