В сегодняшнем коротком видео-уроке выполняю давнюю просьбу от одного из читателей блога, а именно выкладываю короткое и простое видео про сервис Share42.Com установка на uCoz панель социальных закладок (включая социальные сети вконтакте, facebook, twitter, одноклассники и т.п.). Панель эта выделяется из общей массы своим оригинальным дизайном и «плавающей» позицией на экране: в какой части страницы не находился бы пользователь — панель всегда перед глазами! Это удобно и не перекрывает основного содержимого страницы.
Видео-урок Share42
В этом видеоуроке мы рассмотрим как сгенерировать скрипт на сайте share42.com и как установить его на сайт созданный в uCoz. Скрипт состоит из 3-х основных частей:
- Файлов скрипта и иконок;
- Кода скрипта в html коде странице;
- Код оформления в виде CSS.
Подпишись на наш канал в Telegram или VK - первым узнавай о бесплатных вебинарах и курсах, а так же скидках на платное обучение.
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 вы найдете на странице курса.