Как добавить на свой сайт блок с кнопками, ведущими на ваши страницы или группы в социальных сетях.
JA Uber - шаблон joomla Новости

Здравствуйте, многоуважаемый  посетитель блога http://webline22.ru.

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

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

образование бизнес-листа в facebook

образование брендового  листа в гугл +

добавление своей группы во ВКонтакте

запись и вход в твиттер.

А также я посчитал уместным добавить клавишу знакомства на rss ленту и клавишу feedburner для знакомства с новинками сайта по емайлу.

Создаем спрайт из клавиш и вставляем html заключающий их на вебсайте.

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

Но это не наилучший вариант.  Отчего? Ну, потому что для подгрузки любой карты сети будет реализовываться единичная просьба к вашему серверу. Будет у вас десяток иконок — следовательно десять просьб, какие по-всякому будут производить вспомогательную загрузку сервера  и уменьшать быстроту нагрузки листов. Нам подобная расточительность не нужна, тем лучше, что давно изобрели css спрайты.

Я решил не создавать велосипед, а применял тот, что создает конструктор шаре42.  Возможно выбрать те сети, иконки каких вам будут востребуемы, и вместе с адресом вы унаследуете css спрайт, т. е. физиологически единственную графическую обложку, на какой будут размещены все требуемые вам иконки сетей и знакомства на rss и емайл, ежели понадобится.

Я выбрал четыре основных сети и две иконки для знакомства, с размером иконок 24 на 24пиксела, потому выше- спрайт выглядит так:

сейчас у нас есть все ингредиенты — замечания на группы либо лист соцсетей и иконки для их представления на вебсайте. Осталось все это лишь обработать, т. е. сверстать. Выше - блог делаем на wordpress, потому код с клавишами я буду вставлять в единственный из образцов, что  включает используемая мной тема спецоформление. В данной ситуации он зовётся sidebar. php. html код при этом удаётся чрезвычайно обыкновенный:

<a rel="nofollow " class ="rsskt " href ="http: //feeds. feedburner. com/ktonanovenkogoru " title ="rss вебсайт ktonanovenkogo. ru" target ="_blank "></ a>

<a rel="nofollow " class ="emailkt " href ="http: //feedburner. google. com/fb/a/mailverify? uri=ktonanovenkogoru " title ="подписаться по e-mail " target ="_blank "></ a>

На всякий ситуация я добавил rel="nofollow ", чтоб данные гиперссылки не принимали  во внимание поисковики при расположении весов на вебсайт. Атрибут title в теге гиперссылки A работает для представления заключенной в ней формулировки при положении курсора мыши на иконке. Я не стал  их  игнорировать, так как не для всех пользователей  вебсайта иконки может обнаруживать подробные данные. Выглядеть это будет приблизительно так:

связываем спрайт с html кодом и оформляем клавиши в CSS

однако для отображённого выше кода можно еще много линий в обложке вкусов добавить (у меня он зовётся style. css и живет в папке с используемой мной темой оформления — читайте о них по приведенному выше коду ). У меня вышло приблизительно так:

. face {display: inline -block; vertical -align: bottom; width: 24px; height: 24px; margin: 0 20px 0px 0; padding: 0; outline: none; background: url(дорога до обложки со спрайтом /icons. png) -48px 0 no-repeat }

. goog {display: inline -block; vertical -align: bottom; width: 24px; height: 24px; margin: 0 20px 0px 0; padding: 0; outline: none; background: url(дорога до обложки со спрайтом /icons. png) -96px 0 no-repeat }

. rsskt {display: inline -block; vertical -align: bottom; width: 24px; height: 24px; margin: 0 20px 0px 55px; padding: 0; outline: none; background: url(дорога до обложки со спрайтом /icons. png) -120px 0 no-repeat }

. emailkt {display: inline -block; vertical -align: bottom; width: 24px; height: 24px; margin: 0 20px 0px 0; padding: 0; outline: none; background: url(дорога до обложки со спрайтом /icons. png) -144px 0 no-repeat }

css атрибут display: inline -block допускает прибавить тегу гиперссылки A одновременные свойства строчного и блочного компонента. По взаимоотношению к внешним и ближайшим тэгам он будет вести себя как маленький (т. е. близко с ним может находиться и иные маленький компоненты), а вот по взаимоотношению к вложенным в него тегам он будет вести себя как блочный (т. е. возможно будет задавать его размеры как по широте, так и по высоте, а снова задавать абзацы с поддержкой марджинов и педдингов).

css свойство vertical -align: bottom задает выравнивание по вертикали, что наверно разборчиво из его имени.  Также для всех компонентов в html коде оно значит выравнивание промеж собою маленьких компонентов с формулировкой соответствующей их базовому контуру.  Элементарно  поэкспериментируйте и поймете его задачу.С использованием  width и height мы задаем размеры отображаемого блока, какой обязан быть одинаковым для размеров иконок соцсети. Свойство outline: none применяется, чтоб в некоторых браузерах при нажатии на код вокруг нее не являлась рамка. С пощью margin я задал отступы от верха и от ближайших иконок, ежели не сглупить (год делал, если css усваивал ).

Ну, и самое занимательное. С помощью монтажного правила background мы предопределяем,  который район выше спрайта будет изображаться на данной точке в типе окружения  (в ситуации выше это окружение  подкладывается под гиперссылку ). Изъяснять как так удаётся весьма  продолжительно, потому читайте приведенный по коду пункт и все статьи разборчиво. Если нехочется, то поэкспериментируйте с циферками, какие, как вы обнаружили, не даром кратны 24.

Обложку спрайта залейте по фтп на собственный веб-сайт и укажите в background до него дорогу (в соответственном либо абсолютном типе ). Вот и все. ежели не вышло, читайте внимательнее статьи по приведенным выше ссылкам, ну, а если совсем уже ничего не получится, то описывайте вашу ситуацию в комментариях.

 

Удачи вам! До скорых встреч на страницах блога.


BLOG COMMENTS POWERED BY DISQUS
Home Page


Рейтинг@Mail.ru