Уважаемые друзья и пользователи сайта ART-UCOZ!
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Блок "Поделится в соц. сетях" для uCoz
Дата добавления: 20.09.2013 - 20:33
Категория: Хаки / Дополнения, Кнопки / иконки
Добавил: Buger
Количество просмотров: 2.6k
Количество комментариев: 0
Размер файла: 76.8 Kb
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Блок "Поделится в соц. сетях". Красиво выполненный скрипт, который
установить себе дело несколько минут. Вообщем скрипт очень удобный, с
легкостью подойдет под любой диз. В архиве содержится: картинки, css,
демо.
HTML
Мы определим секцию и создадим в ней список с нашими кнопками дам им классы наших соц.сетей. Так же 5 кнопка будет выпадающим блоком при наводке для ссылок на страницу материала.
HTML
Мы определим секцию и создадим в ней список с нашими кнопками дам им классы наших соц.сетей. Так же 5 кнопка будет выпадающим блоком при наводке для ссылок на страницу материала.
Код
<section>
<ul class="social">
<li><a href="#" class="google"></a></li>
<li><a href="#" class="facebook"></a></li>
<li><a href="#" class="vk"></a></li>
<li><a href="#" class="twitter"></a></li>
<li>
<a href="#" class="link">
<div class="submenu">
<label for="1">URL:</label>
<input type="text" value='$HOME_PAGE_LINK$' id="1" uzzonclick="select(this);" readonly>
<label for="2">HTML:</label>
<input type="text" value='<a href="$HOME_PAGE_LINK$">$SITE_NAME$</a>' id="2" uzzonclick="select(this);" readonly>
<label for="3">BB code:</label>
<input type="text" value='$SITE_NAME$' id="3" uzzonclick="select(this);" readonly>
</div>
</a>
</li>
</ul>
</section>
CSS
Теперь добавим немного стилей:
Теперь добавим немного стилей:
Код
.social {
position: relative;
}
.social li {
float: left;
}
.social li a{
width: 36px;
height: 30px;
margin: 0 2px;
display: block;
}
.submenu {
position: absolute;
width: 193px;
top: 37px;
left: 3px;
background: rgb(66,67,67);
background: -moz-linear-gradient(top, rgba(66,67,67,1) 0%, rgba(45,45,45,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(66,67,67,1)), color-stop(100%,rgba(45,45,45,1)));
background: -webkit-linear-gradient(top, rgba(66,67,67,1) 0%,rgba(45,45,45,1) 100%);
background: -o-linear-gradient(top, rgba(66,67,67,1) 0%,rgba(45,45,45,1) 100%);
background: -ms-linear-gradient(top, rgba(66,67,67,1) 0%,rgba(45,45,45,1) 100%);
background: linear-gradient(to bottom, rgba(66,67,67,1) 0%,rgba(45,45,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424343', endColorstr='#2d2d2d',GradientType=0 );
padding: 0 10px 10px 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: inset 0 3px 5px rgba(0,0,0,.4), 0 0 3px rgba(0,0,0,.38);
-moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.4), 0 0 3px rgba(0,0,0,.38);
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.4), 0 0 3px rgba(0,0,0,.38);
opacity: 0;
-webkit-transition:opacity .3s ease .2s;
-moz-transition:opacity .3s ease .2s;
-o-transition:opacity .3s ease .2s;
transition:opacity .3s ease .2s;
}
.link:hover > div {
opacity: 1;
}
.submenu:after{
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.submenu:after {
border-bottom-color: rgb(66,67,67);
border-width: 7px;
right: 4%;
margin-left: -7px;
}
.submenu label {
margin-top: 4px;
font: 14px Calibri;
display: block;
color: #7e7e7e;
text-shadow: 1px 0 1px rgba(0,0,0,.44);
}
.submenu input[type="text"] {
width: 100%;
font-family: Tahoma;
color: #fff;
background: #323232;
padding: 5px;
border: 1px solid #1b1b1b;
cursor: text;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: inset 2px 0 9px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
-moz-box-shadow: inset 2px 0 9px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
-webkit-box-shadow: inset 2px 0 9px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
}
.google {
background: url('../img/google.png');
}
.facebook {
background: url('../img/facebook.png');
}
.vk {
background: url('../img/vk.png');
}
.twitter {
background: url('../img/twitter.png');
}
.link {
background: url('../img/link.png');
}
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: