Меню Закрыть

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

Share42.Com установка на uCoz

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

Видео-урок Share42

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

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

Share42.Com установка на uCoz оптимизированного CSS

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

#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}

Кроме того вы можете самостоятельно модифицировать данный код и добиться необходимого вам вида панели на вашем сайте. Чтобы не напортачить не забудьте изучить бесплатные курсы по html и css от моих коллег. Ну а остальные видеоуроки по ucoz вы найдете на странице курса.

Похожие записи

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

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

Этот сайт защищен reCAPTCHA и применяются Политика конфиденциальности и Условия обслуживания Google.