Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  воскресенье, марта 25, 2012  

Боковая панель социальных кнопок
Стандартный блок социальных кнопок для "расшаривания" материала блога уже давно и незыблемо является неотъемлемым его атрибутом. Обычно он располагается сразу после статьи и представляет собой подборку иконок соответствующих ресурсов.

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

Об ее установке в блог мы и поговорим далее.

Установка боковой панели социальных кнопок в блог.


Размещаем основной код.


Прежде всего сама разметка виджета с иконками социальных сервисов:
<div class="socbutton">   
<div class="socicon">
<a rel="nofollow" target="_blank" href="http://twitter.com/share?url=" title="Добавь в Twitter"><img src="http://lh5.ggpht.com/_Gh5GNZe4s9Y/TQVmDwS4qWI/AAAAAAAAAeo/5-o_2VfXnfU/s800/twitter.png" /></a><br />
<a rel="nofollow" target="_blank" href="http://www.facebook.com/sharer/sharer.php?u" title="Добавь в Facebook"><img src="http://lh6.ggpht.com/_Gh5GNZe4s9Y/TQVmDSuDccI/AAAAAAAAAeY/VLWR-B6CUwc/s800/facebook.png" /></a><br />
<a rel="nofollow" target="_blank" href="http://vk.com/share.php?url=" title="Добавь в Вконтакте"><img src="http://lh3.ggpht.com/_Gh5GNZe4s9Y/TQVmJZx0GcI/AAAAAAAAAes/60axXHYn6aE/s800/vkontakte.png" /></a><br />
<a rel="nofollow" target="_blank" href="http://connect.mail.ru/share?share_url=" title="Добавь в Мой Мир"><img src="http://lh5.ggpht.com/_Gh5GNZe4s9Y/TQVmD8-4J0I/AAAAAAAAAek/YiSf5-4ahHg/s800/mailru.png" /></a><br />
<a rel="nofollow" target="_blank" href="http://www.livejournal.com/update.bml" title="Добавь в Livejournal"><img src="http://lh6.ggpht.com/_Gh5GNZe4s9Y/TQVmDjhSboI/AAAAAAAAAeg/Nd2x48z_kdQ/s800/livejournal.png" /></a></div>
</div>

Данный код следует разместить в любом месте шаблона, например, с помощью элемента HTML/JavaScript.

Здесь я уже включил основные сервисы наших общительных граждан, такие как TwitterFacebookВКонтактеLiveJournal и Мой мир. Также виджет имеет ссылки на иконки этих ресурсов. При желании вы можете заменить их на свои либо включить в виджет новые сервисы. Проделывается это путем добавлении ссылки вида:
<a rel="nofollow" target="_blank" href="ссылка_на_сервис" title="всплывающая подсказка"><img src="ссылка_на_изображение" /></a>
между тегами <div class="custom_images"> и </div>.

Задаем стили CSS.


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

Можно, не загромождая кнопки посторонними элементами, задать простенькую, но стильную окаймовку:

Боковая панель социальных кнопок

Либо залить цветом, увеличить бордюр и украсить тенью:
Боковая панель социальных кнопок

Проследуйте Шаблон > Изменить HTML.
В поле редактирования шаблона с помощью поиска найдите отрезок ]]></b:skin> и прямо перед ним впишите код CSS в зависимости от выбранной социальной панели.

1 вариант:
.socbutton {
position: fixed;
top: 30%;
left: -5px;
border: 1px solid #ddd;
padding: 5px 5px 4px;
width: 38px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.socbutton .socicon a {
width: 32px;
height: 32px;
cursor: pointer;
}
.socbutton .socicon a img { border: 0; margin: 2px 0; opacity: 0.6; }
.socbutton .socicon a:hover img { margin: 2px 0; opacity: 1.0; }

2 вариант:
.socbutton {
position: fixed;
top: 30%;
left: -10px;
background-color: #bad1e0;
border: 9px solid #fff;
padding: 5px 5px 4px;
width: 40px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
box-shadow:4px 4px 5px #999;
-moz-box-shadow:4px 4px 5px #999;
-webkit-box-shadow: #999 4px 4px 5px;
}
.socbutton .socicon a {
width: 32px;
height: 32px;
cursor: pointer;
}
.socbutton .socicon a img { border: 0; margin: 2px 0; opacity: 0.6; }
.socbutton .socicon a:hover img { margin: 2px 0; opacity: 1.0; }

Немного о значениях кода:
отрезок width:, прописанный на участке .socbutton {} отвечает за ширину панели в пикселях;
top: - регулирует панель по вертикали, значение в процентах;
background-color: - фон панели;
border: - указывает на толщину окаймляющего бордюра в пикселях и его цвет;
width: и height: на участке .socicon {} - задают размеры иконок.

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



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.