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




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


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

У меня в блоге уже написаны посты о разных кнопках социальных сетей, но этот блок мне очень нравится, думаю, что и Вам будет интересен. Перейдем сразу к делу. Вам надо скопировать код ниже, и в черновике 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" 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; http://xxxxxxx - URL адрес Feedburner.

54px - это размеры кнопок; width: 356px; - размер виджета кнопок по горизонтали; если укажете 156 рх; - кнопки будут по вертикали; и если проставите значение 200 рх; - кнопки будут в два ряда; У меня в блогах при таких размерах изменяется положение кнопок, у Вас может быть по другому

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


Автор статьи ✎ Olga Protasova Выпуск ✹ 1/23/2014 Ярлыки ►


Открыть комментарии →

2 коммент. :

  1. Как всегда, спасибо, Ольга. Чем подкупает данный проект, можно менять размеры и расположение на ресурсе.

    ОтветитьУдалить
    Ответы
    1. Добрый вечер Сергей, мне тоже нравится, что можно расположить и вертикально, и горизонтально, и компактно. Только вот в моем блоге не найду места для виджета, во всяком случае пока.

      Удалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *