Главные темы. Последние записи с тегом «соц». Страница 41

Сегодня 26 декабря, четверг

Какой рейтинг вас больше интересует?

получить код

Главная /

Главные темы

Тэг «соц»

Засновник Facebook Марк Цукерберг не підтримував активістів Євромайдану

2014-01-28 18:29:37
... якій засновник соціальної мережі Facebook ...
+ развернуть текст сохранённая копия

Тэги: ?вромайдан, facebook, марк, мереж?, новини, соц?альн?, цукерберг

Сервис создания одностраничников с бесплатным тестовым периодом

2014-01-25 21:10:36
О проекте “Генератор целевых страниц” Все с большей и большей популярностью пользуются ...
+ развернуть текст сохранённая копия

Тэги: 2014, бесплатно, бизнес, деньги, доход, заработок, инфопродукт, обзор, обзоры, раскрутка, сайт, сервис, сети, соц, старт, финансы

Facebook поширюється, як хвороба

2014-01-25 15:04:05
Коли ви заходите на Facebook в дев’ятий раз за 15 хвилин, то, напевно, вам в голову приходить, ...
+ развернуть текст сохранённая копия

Тэги: facebook, sir, social, блог, блогг?нг, блогосфера, досл?дження, мереж?, психолог?я, соц?альн?, сп?лкування

Красивый виджет социальных кнопок для блога на Blogspot

2014-01-23 06:38:00

Блок социальных кнопок для Вашего блога

Всем привет или доброго времени суток. Сегодня у нас есть возможность полюбоваться красивым блоком социальных кнопок в своем блоге. Код нашла на одном из зарубежных блогов, пока разобралась, что к чему, и вот решила поделиться с Вами. У меня в блоге уже написаны посты о разных кнопках социальных сетей, но этот блок мне очень нравится, думаю, что и Вам будет интересен. Перейдем сразу к делу. Вам надо скопировать код ниже, и в черновике blogger-дизайн-добавить гаджет-Html/JavaScript-вставить-сохранить. Установите в удобном для Вас макете блога. Вот этот код:

<div class="container"> <ul class="action-bar clearfix"> <li> <a href="http://twitter.com/xxxxx" class="like"> <span class="zocial-twitter"></span> <span class="tooltip">Follow</span> </a> </li> <li> <a href="https://plus.google.com/xxxxxxxx" class="favourite"> <span class="zocial-googleplus"></span> <span class="tooltip">Circle us</span> </a> </li> <li> <a href="https://www.facebook.com/xxx" class="comment"> <span class="zocial-facebook"></span> <span class="tooltip">Like us</span> </a> </li> <li> <a href="http://xxxxxxx/feeds/posts/default" class="share"> <span class="zocial-rss"></span> <span class="tooltip">Subscribe</span> </a> </li> </ul> </div> <style> @charset "utf-8"; @import url(http://weloveiconfonts.com/api/?family=zocial); /* zocial */ [class*="zocial-"]:before { font-family: 'zocial', sans-serif; } /* ---------- GENERAL ---------- */ a { text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .container { display: block; height: 54px; position: relative; width: 356px; } /* ---------- Action Bar ---------- */ .action-bar li { float: left; } .action-bar a { -webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5); box-shadow: inset 0 -2px rgba(0, 0, 0, .5); color: #e7e7e7; display: block; font-size: 32px; height: 54px; line-height: 54px; position: relative; text-align: center; -webkit-transition: background .3s; -moz-transition: background .3s; -ms-transition: background .3s; -o-transition: background .3s; transition: background .3s; width: 54px; } .action-bar a:hover .tooltip { margin-top: 16px; opacity: 1; } .tooltip { border-radius: 3px; font-size: 14px; height: 18px; left: 50%; line-height: 18px; margin: 0 0 0 -50px; opacity: 0; position: absolute; top: 100%; -webkit-transition: margin-top .3s, opacity .3s; -moz-transition: margin-top .3s, opacity .3s; -ms-transition: margin-top .3s, opacity .3s; -o-transition: margin-top .3s, opacity .3s; transition: margin-top .3s, opacity .3s; width: 100px; } .tooltip:before { content: ""; height: 8px; left: 50%; margin: -4px 0 0 -4px; position: absolute; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 8px; } .like, .like .tooltip, .like .tooltip:before { background: #65B1F8; } .like:hover { background: #65B1F8; } .favourite, .favourite .tooltip, .favourite .tooltip:before { background: #c93037; } .favourite:hover { background: #b02b32; } .comment, .comment .tooltip, .comment .tooltip:before { background: #43438e; } .comment:hover { background: #393978; } .share, .share .tooltip, .share .tooltip:before { background: #FF8000; } .share:hover { background: #FF8000; } </style>

Теперь давайте немного разберемся с кодом:

twitter.com/xxxxx - ваш адрес аккаунта Twitter; plus.google.com/xxxxxxxx - адрес страницы Google; www.facebook.com/xxx - адрес в Facebook; xxxxxxx - URL адрес Feedburner.

54px - это размеры кнопок; width: 356px; - размер виджета кнопок по горизонтали; если укажете 156 рх; - кнопки будут по вертикали; и если проставите значение 200 рх; - кнопки будут в два ряда; С фоном кнопок не разбиралась, по моему и так красивые. Если захотите поменять, то background: #65B1F8;-все относится к фону. Будет желание, экспериментируйте. Вот и все. Пишите, комментируйте, делитесь с друзьями. Всего доброго.

Тэги: кнопки, сетей, соц