Как сделать простую панель социальных закладок для сайта с помощью CSS и HTML

Разместил / Просмотров: 4 531 / комментарий 21

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

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

В общем, если она Вам понравилась, давайте приступать к работе. Делать мы её будем только с помощью CSS.

Простая панель социальных закладок для сайта.

Изображения

И так, для начала на нужны сами иконки и не сложное изображение с надписью «Мы на связи», которое я подготовил в Фотошопе. Все исходники Вы сможете скачать вот по этой ссылке. И конечно же за классные иконки хочется сказать огромное спасибо сайту veodesign.com.

Пример

Демо Вы можете посмотреть в премиум шаблоне Nabig в сайтбаре

Скачали? Поздравляю :-) Теперь давайте зададим не много CSS стилей для иконок и надписи.

CSS

Для начала нужно задать стили надписи «Мы на связи», которая находится над иконками, так как эта надпись картинка, соответственно и стили будут не сложные.

.sharesv {

 width: 202px;
 height: 36px;
 margin-left: 47px;
 background: url(images/yansv.png) 0 center no-repeat;

}

Как видите мы задали класс .sharesv, который далее будем использовать в HTML. Отступ стоит margin-left: 47px;  это пример из шаблона, в Вашем случае возможно нужно будет изменить эти значения.

Сейчас будем задавать отступы для самих иконок закладок:

.share-new {
 margin: 10px 0 10px 25px;
 }

Опять же повторюсь, что данные отступы взяты из шаблона Nabig, возможно данные отступы Вам нужно будет изменить под свой сайт.

Ну а теперь давайте уже задавать стили CSS для расположения закладок, вот как это выглядит:

.share-new a {
 display:inline-block;
 width: 32px;
 height: 32px;
 margin: 0 7px 0 0;
 opacity: 0.6;
 -moz-transition: all 0.2s 0.01s ease-in;
 -o-transition: all 0.2s 0.01s ease-in;
 -webkit-transition: all 0.2s 0.01s ease-in;}

.share-new a:hover {
 opacity: 1.0;
 }

 .share-new .icon-facebook {

background: url(images/facebook-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 0px;
 font-size:17px;

}
 .share-new .icon-twitter {
 background: url(images/twitter-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 0px;
 font-size:17px;

}

.share-new .icon-Google {
 background: url(images/gplus-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 0px;
 font-size:17px;

}

.share-new .icon-rss {
 background: url(images/rss-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 0px;
 font-size:17px;

}

.share-new .icon-vk {
 background: url(images/vk-icon.png) 0 center no-repeat;
 padding:4px 0px 0px 0px;
 font-size:17px;

}

.share-new .icon-mail {
 background: url(images/email-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 0px;
 font-size:17px;

}

Как видите, что отдельная иконка задана ссылкой, соответственно мы задали вот этот класс .share-new a. Ещё, как Вы заметили мы добавили transition: и opacity:, которые придадут красивый и плавный эффект при наведении на иконки.

Затем мы задали не сложные стили для каждой иконки, и задали им соответствующие классы, например, если это иконка от вКонтакте, то класс будет .icon-vk и т.д.

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

Ну а сейчас давайте посмотрим как будет выглядеть общая картина с стилями:

/*----------------------------
 Подписка
------------------------------*/

.sharesv {

 width: 202px;
 height: 36px;
 margin-left: 47px;
 background: url(images/yansv.png) 0 center no-repeat;

}

.share-new {
 margin: 10px 0 10px 25px;
 }
.share-new a {
 display:inline-block;
 width: 32px;
 height: 32px;
 margin: 0 7px 0 0;
 opacity: 0.6;
 -moz-transition: all 0.2s 0.01s ease-in;
 -o-transition: all 0.2s 0.01s ease-in;
 -webkit-transition: all 0.2s 0.01s ease-in;}

.share-new a:hover {
 opacity: 1.0;
 }

 .share-new .icon-facebook {

background: url(images/facebook-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 0px;
 font-size:17px;

}
 .share-new .icon-twitter {
 background: url(images/twitter-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 0px;
 font-size:17px;

}

.share-new .icon-Google {
 background: url(images/gplus-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 0px;
 font-size:17px;

}

.share-new .icon-rss {
 background: url(images/rss-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 0px;
 font-size:17px;

}

.share-new .icon-vk {
 background: url(images/vk-icon.png) 0 center no-repeat;
 padding:4px 0px 0px 0px;
 font-size:17px;

}

.share-new .icon-mail {
 background: url(images/email-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 0px;
 font-size:17px;

}

А сейчас перейдём к коду на HTML:

HTML

Тут соверженно ничего сложного, просто поместите вот этот код в желаемое место на сайте:

<div class="sharesv "></div>

<div class="share-new">

<a class="icon-twitter" href="#" title="Следить в Twitter!" target="_blank"></a>
<a class="icon-facebook" href="#" title="Я на facebook" target="_blank"></a>
<a class="icon-Google" href="#" title="Я в Google+" target="_blank"></a>
<a class="icon-rss" href="#" title="Подписаться на rss" target="_blank"></a>
<a class="icon-vk" href="#" title="Я вКонтакте" target="_blank"></a>
<a class="icon-mail " href="#" title="Я вКонтакте" target="_blank"></a>
</div>

Как, видите, что для каждой ссылки присвоен класс соответствующей иконки, например, для ссылки на страницу вконтакте, присвоен класс icon-vk. Главное в место знака # поставьте ссылки на свои страницы в социальных медиа. :-)

Вот и всё друзья, пользуйтесь на здоровье. До скорых встреч.

  • Спасибо за то что сдержали слово и за прекрасное руководство!! давно хотел себе такие кнопочки, наконец поставлю!)))

  • кстати, еще вопрос по поводу все того же шаблона, в его сайдбаре «свежие записи» и «популярные записи» с картинками, это миниатюры или берется первая картинка в статье?

  • 2bota.ru, рад, что Вам понравилось :-)

  • Не совсем так, эта миниатюра поста, которая задаётся в админке под каждую статью. Вот прочитайте, там найдёте все ответы по этому поводу http://beloweb.ru/wp/kak-vyivesti-spisok-populyarnyih-zapisey-na-bloge-wordpress-s-miniatyurami-i-bez-plaginov.html

  • спасибо.вот облом. я к тому что в основном все такие виджеты(«последние посты») используют в качестве картинок миниатюры, а я на своем блоге все картинки гружу в гугл-пикасу, а посту нельзя задать миниатюру с другого сервиса, только если грузить изображения на свой хост=( вот такая у меня пИчаль

  • Да, жалко конечно, а почему на хостинг не загружаете?

  • хостинг план 1 сайт — 500 мб.
    500 мб — слишком мало для постоянных апдейтов=(

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

  • попытался поставить на сайт, не вышло. Блок абсолютно прозрачный и заголовок и кнопочки, т.е. его не видно(они как-бы есть и как бы нет, всё белое, но место отвелось). на папку с файлам поставил права 777, никакого эффекта, не знаю в чем дело.
    кстати, у вас в хтмл коде один лишний закрывающий див.

  • Да, извиняюсь, уже убрал. Это всё моя невнимательность :-)

  • )) не знаете в чем может быть проблема, у меня не отображаются ни кнопки ни заглавная картинка с надписью, но они есть, я наводу курсор и мне пишет, к примеру»я вКонтакте» ?

  • Ссылки на картинки в стилях CSS не правильные.

  • Это был неправильный chmod =(
    Теперь все ништячок! спасибо за красивый виджет!

  • Подскажите почему у меня не показываются кнопочки?Только я их и вижу в хроме когда в админке вход выполнен

  • Алексей, Вы используете плагин для кеша?

  • Да,использую, разобрался вроде бы, теперь с кнопками которые у вас в футере занимаюсь))) снизу не смог поставить,, сбоку прилепил.Буду пробовать их вниз сместить в футер но всякий

  • не дописал,всякий раз то текст уезжает,то блоки . незнаю какие размеры надо

  • Просто нужно кеш после изменений чистить, и всё :-)

  • Попробуйте подобрать, на каждом сайте разные размеры.

  • Попробую,спасибо за сайт!!! Очень много полезного нашёл на доступном языке написанны статьи

  • Алексей, это Вам огромное спасибо :-)