Главная » 2012 » Май » 10

Установка панели социальных закладок от Share42.Com [видеоурок]

Тэги: раскрутка, UCOZ, социальные закладки, html, css Категория: uCoz
10.05.2012
Комментариев: 0| Просмотров: 5699
uCoz: Установка панели социальных закладок от Share42.Com [видеоурок] | showmehow.ru


В сегодняшнем коротком видеоуроке выполняю давнюю просьбу от одного из читателей блога, а именно выкладываю короткое и простое видео о том как установить панель социальных закладок (включая социальные сети вконтакте, facebook, twitter, одноклассники и т.п.) от сайта Share42.com. Панель эта выделяется из общей массы своим оригинальным дизайном и "плавающей" позицией на экране: в какой части страницы не находился бы пользователь - панель всегда перед глазами! Это удобно и не перекрывает основного содержимого страницы.


В этом видеоуроке мы рассмотрим как сгенерировать скрипт на сайте share42.com и как установить его на сайт созданный в uCoz. Скрипт состоит из 3-х основных частей:

  • Файлов скрипта и иконок
  • Кода скрипта в html коде странице
  • Код оформления в виде CSS

Последняя часть отвечает за то как панель с кнопками будет выглядеть на сайте. Вариант предлагаемый сайтом share42.com по умолчанию не совсем подходит для мониторов с маленьким разрешением 1024 и ниже. Во всяком случае на данном сайте панель при таком разрешении уползает за левый край и становится недоступна. Однако на самом сайте Share42.Com панель имеет отличный от предлагаемого по умолчанию вид - прижатый к левому краю экрана, что прекрасно смотрится на любом разрешении. Для достижения такого вида вам понадобится заменить код CSS предлагаемый по умолчанию на следующий:
Code

#share42 {
  position: fixed;
  top: 50% !important;
  left: 0;
  margin-top: -130px;
  opacity: 0.55;
  background: #F3F8FC;
  padding: 6px 6px 0;
  border: 1px solid #CFDEEF;
  border-left: none;
  border-radius: 0 5px 5px 0;
  box-shadow: inset -1px 1px 0 #FFF, inset 0 -1px 0 #FFF
}

#share42:hover {
  background: #F6F6F6;
  box-shadow: 0 0 5px #DDD;
  opacity: 1;
}
#share42 a {opacity: 0.5}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}

Кроме того вы можете самостоятельно модифицировать данный код и добиться необходимого вам вида панели на вашем сайте.
Посмотреть видеоурок (откроется в новом окне)


Предлагаю вам так же ознакомится: с моим бесплатным видео-курсом по uCoz


Оцените статью Комментариев: 0

При полном или частичном копировании материалов сайта, установка ссылки на сайт источник: http://www.showmehow.ru обязательна!