Как поставить в сайдбар красивые социальные кнопки «Следуй за мной!» без плагина







Доброе время суток уважаемый читатель! Вчера я  написала пост о том как поставить красивые социальные кнопки «Следуй за мной» с плагином. Кнопки и вправду красивые надо сказать и выбор просто потрясающий. Если не верите, смотрите, на главной картинке изображено несколько вариантов, а их намного больше.

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

Этот вариант подходит для тех кто не хочет нагружать свой блог лишними плагинами. Если умеете делать кнопочки, то лучше это сделать самим. Если нет, то скачать их в интернете не проблема.Времени на это уйдёт не больше, чем на установку плагина.

Итак ставим социальные кнопки «Следуй за мной»

Сначала загружаем нужную картинку в библиотеку файлов. Идём в админку, в раздел Виджеты и ставим на Основную область виджет Текст (Произвольный текст или HTML-код). В этот виждет помещаем код такого вида. Пусть это будет значок фида (всё что выделено цветом нужно заменить!)

 <a href="http://feeds.feedburner.com/ваш фид"rel="nofollow" target="_blank">
<img src="Полный адрес картинки "width="Ширина" height="Длина"></a>





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

Адрес фида Вы берёте на сервисе Фидбёрнер , а адрес картинки в Библиотеке файлов. Ставим в сайдбар и проверяем как работает, при клике на неё мы должны попадать на сервис подписки для нашего фида. Дальше, ставим например иконку Твиттера.

Значит копируем верхний код и вставляем вместо адреса фида, адрес нашего твиттер аккаунта. Вот например мой адрес твиттер аккаунта https://twitter.com/#!/tattyyy777 , а вместо адреса иконки на RSS ставим адрес иконки на Твиттер.

<a href="https://twitter.com/#!/tattyyy777"rel="nofollow" target="_blank">
<img src="Полный адрес картинки на Твиттер "width="Ширина" height="Длина"></a>

И так далее.

Коды ставьте в обычно порядке друг за другом. Вот как это выглядит в моём виджете. Красным подчёркнута та часть кода, которая отвечает за то чтобы при клике на картинку можно было попасть на указанный ресурс. Синим часть кода, которая отвечает за то чтобы картинка показывалась на сайте

социальные кнопки

 

А если Вы хотите чтобы они встали в столбик, то ставьте после каждого кода тэг <br>. Но бывает что картинки не становятся в ряд, а начинают съезжать, одна или несколько картинок.  И выглядит это не очень то красиво

социальные кнопки

Это значит что каринки большие для Вашего сайдбара и их надо уменьшить. Можно это сделать в фотошопе, в программе Paint.net (здесь видеоролик как это сделать). А если Вам некогда, то можно  уменьшить их прямо в сайдбаре. Чем мы с Вами сейчас и займёмся. Берём код, нам нужны размеры.

И начинаем уменьшать их очень осторожно, хотя ничего страшного, Вы всегда сможете заменить url картинки и само изображение соответствено. А следовательно поменяется и сама картинка. Меняем «Ширину» и «Длину» и смотрим что стало с картинками, конечно соблюдаем при этом пропорции. Например вот так

<a href="https://twitter.com/#!/tattyyy777"rel="nofollow" target="_blank">
<img src="Полный адрес картинки на Твиттер "width="28" height="35"></a>

Есть ещё вариант увеличить картинки, чтобы они разместились вот так

социальные кнопки

 

Этот вариант «Научного тыка» мне нравится. Тем более что когда Вы придёте к нужному результату, Вы сможете уже их  уменьшить, учитывая полученные размеры,  и перезалить на блог. При этом соответственно нужно будет заново залить иземённые изображения на блог и поменять url картинки в коде, который отвечает за изображение.

Итак, я рассказала вам Как поставить в сайдбар социальные кнопки Следуй за мной без плагина

Вы можете прочитать другие  статьи,
для этого воспользуйтесь Картой сайта.
А также получать новые статьи прямо на Ваш почтовый ящик.
Введите свой E-mаil:

 


С Уважением, Татьяна Чиронова   






  

Сохраните пост к себе на стенку в соцсети



 


А здесь можно публиковать анонсы постов по теме:  


 










На ту же тему
Обсуждение: 14 комментариев
  1. Евгений Родин:

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

  2. Евгений Родин:

    Спасибо огромное, Татьяна! У меня все получилось!
    Думаю еще четкий по времени призыв к действию не помешает, например, «Следуй за мной сейчас»

  3. Юлия:

    Сейчас буду все ставить. Спасибо.

  4. Это оказывается так просто, вот спасибо, везде пишут, что в код лезть нужно, а Вы все так легко преподнесли! :razz:

  5. Кнопки соц сетей это хорошо или плохо для мала раскрученного сайта? Какой толк от ссылок в соц сетях они же не индексируются.

    • Татьяна Чиронова:

      Это очень хорошо, во первых по этим ссылкам переходят люди из соцсетей.
      А во вторых, кто Вам сказал что они не индексируются?

  6. Зинаида .:

    Таня,какое хорошее решение.Завтра займусь установкой,а то у меня нет никаких.Спасибо за урок.

  7. Татьяна Чиронова:

    Спасибо за комментарии.
    Марина, это же плагин WP-CopyProtect.

  8. Марина:

    Ой как интересно! Я тоже поставлю себе такие кнопочки. Танечка, а как сделать так, как у тебя, чтобы нельзя было скопировать на блоге?

  9. Алексей:

    Простенький и доступный вариант размещения соц кнопок.
    Я его использую для создания различных рекламных баннеров.

  10. Юлия Ратушная:

    Классно, я тоже хочу себе такие кнопочки, и они места занимают мало.

Поделитесь своим мнением
Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Свежие записи
Как снизить нагрузку на CPU хостинга cайта вордпресс
Как снизить нагрузку на CPU хостинга cайта вордпресс
Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.
Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.
Как настроить YouTube для удобного просмотра видео и отключить рекламу. Плагин для хрома Magic Actions for YouTube™
Как настроить YouTube для удобного просмотра видео и отключить рекламу. Плагин для хрома Magic Actions for YouTube™
Free Traffic Club — бесплатная реклама в Фейсбук
Free Traffic Club — бесплатная реклама в Фейсбук
Как правильно установить Savefrom net для Google Chrome
Как правильно установить Savefrom net для Google Chrome
≡ 
 А вам подарок
смартреспондер
Дешевый хостинг
Интернет технологии для вас © 2016 ·   Войти Наверх