Как добавить иконки социальных сетей без плагина?

Автор:
Nurlan Kemelbekov

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

Вариант 1: Добавить иконки социальных сетей без плагина в сайтбар блога.

Как добавить иконки социальных сетей в меню навигации WordPress 

  • Внешний вид >Виджеты> Текст и добавить код.
  • Заменить  ссылки на профили в социальных сетях.

Добавьте этот код в текстовый виджет боковой панели вашего блога

<div id="social-profiles">

<a title="Like us on Facebook" alt="facebook" rel="external nofollow" href="http://ваш профиль">Facebook</a>

<a title="Follow us on Twitter" alt="twitter" rel="external nofollow" href="http://ваш профиль">Следите за нами</a>

<a title="Subscribe to our Feed" alt="feeds" rel="external nofollow" href=" http://ваш прфиль">Подписаться </a>

<a title="Contact Us" alt="contact" rel="external nofollow" href=" http://maks-1.com/o-sajjte /">Связаться с нами </a>

</div>

Вам необходимо отредактировать style.css файл в вашей теме, поэтому рекомендуется сделать резервную копию вашей теме.

Рекомендую прочитать Как сделать резервную копию темы на WordPress?

Добавить следующий код в файл style.css

  • Редактируем стиль тех иконок, которые только что добавили в сайтбар блога.
  •  Внешний вид> Редактор и добавить код CSS к нему.
  • Также рекомендую загрузить иконки, расположенные ниже для использования в этом коде на свой сервер.
/ * Добавьте этот код в файл style.css в папке темы * /

#social-profiles {

float: left;

margin: 5px 0;

}

#social-profiles .social {

background: url("http://ваш сайт.com/maks.png") no-repeat scroll center top transparent;

border: medium none;

float: left;

height: 20px;

padding: 40px 0 0;

text-align: center;

width: 64px;

}

#social-profiles a.social {

color: #666666;

font-family: Arial,Helvetica,Tahoma,sans-serif;

font-size: 11px;

text-shadow: 1px 1px #FFFFFF;

}

#social-profiles .facebook {

background-position: 0 0;

}

#social-profiles .twitter {

background-position: -64px 0;

}

#social-profiles .subscribe {

background-position: -128px 0;

}

#social-profiles .contact {

background-position: -192px 0;

}

Вариант 2: Добавить иконки социальных сетей без плагина в сайтбар блога.

Добавить код виджета в сайтбар

  • Внешний вид >Виджеты> Текст и добавить код.
  • Заменить  ссылки на профили в социальных сетях.

Добавьте этот код в текстовый виджет боковой панели вашего блога:

<ul> <li><a title=»RSS Feed» href=»http://ваш профиль»>RSS feed</a></li> <li><a title=»Twitter» href=»http://ваш профиль»>Twitter</a></li> <li><a title=»Facebook» href=»http://ваш профиль»>Facebook</a></li> <li><a title=»Youtube» href=»http://ваш профиль»>YouTube</a></li> <li><a title=»Google Plus» href=»https://plus.google.com/ваш ID/»>Google </a></li> </ul>

Вам необходимо отредактировать style.css файл в вашей теме.  Рекомендуется сделать резервную копию вашей теме. Социал иконки

  • Теперь самое время добавить некоторые стили для этих иконок.
  •  Внешний вид> Редактор и добавить ниже код CSS к нему.
  •  Можете загрузить эти иконки, используемые в этом коде на свой сервер.

Добавьте этот код в файл style.css в папке темы:

.social {
background: none repeat scroll 0 0 #FFFFFF;
clear: both;
font-family: georgia;
list-style-type: none;
margin-top: 12px;
overflow: hidden;
padding: 0 0;
}

.social li {
float: left;
margin-right: 10px;
text-align: center;
width: 50px;
}

.social li.last {
margin-right: 0;
}
.social li a {
color: #666666;
font-size: 11px;
line-height: 34px;
opacity: 0.7;
padding-top: 42px;
}

.social li a:hover {
color: #000000;
opacity: 1;
text-decoration: none;
}

.social .social-feed {
background: url("http://ВАШ САЙТ/maks1.png") no-repeat scroll 0 0 transparent;
display: block;
}

.social .social-twitter {
background: url("http://ВАШ САЙТ.com/maks1.png") no-repeat scroll 0 -79px transparent;
display: block;
}
.social .social-facebook {
background: url("http://ВАШ САЙТ/maks1.png") no-repeat scroll 0 -158px transparent;
display: block;
}

.social .social-youtube {
background: url("http://ВАШ САЙТ.com/maks1.png") no-repeat scroll 0 -237px transparent;
display: block;
}

.social .social-gplus {
background: url("http://ВАШ САЙТ.com/maks1.png") no-repeat scroll 0 -316px transparent;
display: block;
margin-right: 0;
}

Добавить плавающие кнопки социальных сетей без WordPress плагина

Вы успешно добавили иконки социальных сетей без плагина в сайдбар вашего блога. Надеюсь, что у Вас не возникнет сложностей.



Вам также может понравиться:


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

* Copy This Password *

* Type Or Paste Password Here *

13 − 1 =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!