Блок "Поделиться в соц сетях"

3409
9.4 из 10
Проголосовало: 15






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

Установка:

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='http://webo4ka.ru/' id="1" onclick="select(this);" readonly>  
  <label for="2">HTML:</label>  
  <input type="text" value='<a href="http://webo4ka.ru/">webo4ka.ru</a>' id="2" onclick="select(this);" readonly>  
  <label for="3">BB code:</label>  
  <input type="text" value='webo4ka.ru' id="3" onclick="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('http://webo4ka.ru/Ucoz7/podpicatci/google.png');  
}  

.facebook {  
  background: url('http://webo4ka.ru/Ucoz7/podpicatci/facebook.png');  
}  

.vk {  
  background: url('http://webo4ka.ru/Ucoz7/podpicatci/vk.png');  
}  

.twitter {  
  background: url('http://webo4ka.ru/Ucoz7/podpicatci/twitter.png');  
}  

.link {  
  background: url('http://webo4ka.ru/Ucoz7/podpicatci/link.png');  
}


Все готово!

Примечание! При создании был использован CSS - Normalize(Reset), поэтому при добавлении на свой сайт без этих стилей, вам нужно будет подстроить стили под себя!
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://get-element.3dn.ru/
  • Всего комментариев: 1

AdminSite
0
AdminSite написал: Написано 14 Июня 2013 в 10:19
Комментарий №1
[code]nj[/code]

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2124
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • ЯдеR написал:
  • ставлю CSS стили и слетает стиль шапки и статистика ни как не меняется на такую, как у вас в примере
  • ЯдеR написал:
  • не работает(
  • BLAzER написал:
  • 404 sad
  • Site_Test написал:
  • вместо
    Код
    <script type="text/javascript">  
    <!-- Progess bar - NEW uCoz "By Lekus" 2017. uFace -->  
    <!--  
    document.write(unescape('%3C%6C%69%6E%6B%20%74%79%70%65%3D%22%74%65%78%74%2F%63%73%73%22%20%72%65%6C%3D%22%53%74%79%6C%65%53%68%65%65%74%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%75%66%61%63%65%2E%61%74%2E%75%61%2F%64%65%6D%6F%2F%50%72%6F%67%65%73%73%5F%62%61%72%4E%45%57%2F%73%74%79%6C%65%2E%63%73%73%22%20%2F%3E'));
    //-->  
    </script>


    пишем просто
    Код
    <link type="text/css" rel="StyleSheet" href="http://uface.at.ua/demo/Progess_barNEW/style.css" />
    в страница добавления/редактирования материала отображается следуещее ,success:function(a){var a=$(a);!a.text().match('myWinError')? plusrep(a) : _uWnd.content('addEnt',a.text().match(/<div[^<>]*>(.+)<\/div>/i)[0])||$('input.manFlSbm').attr('disabled',0)}

    и не работает ничего(, что делать?
    Последние темы
    Опрос
    502
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: