Социальная сеть Google+, даже находясь в стадии бета-тестирования, ураганом ворвалась в жизнь продвинутых пользователей, поэтому не стоит удивляться тому интересу который данная социальная сеть вызывает, в том числе и у веб-дизайнеров, разработчиков и seo оптимизаторов. Этот интерес достаточно велик и постоянно “подогревается” разработчиками Google, которые постоянно усовершенствуют проект и добавляют интеграцию с другим своими сервисами. Так, например, среди сеошников популярностью пользуются кнопки и иконки Google+ которые позволяют добавлять “+1″ для вашего сайта или страницы.

Но не “+1″ единым, в последний год внешний вид Google+ диктовал моду и другим сервисам компании Google, которые  подверглись изменению дизайна и стиля оформления. Общим элементом для многих проектов можно выделить стильное меню вверху страницы, похожие иконки, кнопки управления да и вообще много разных элементов, что можно найти во всех проектах – от почты Gmail до Google Reader. Cегодня представляю вашему внимаю интересный набор кнопок в стиле Google+, найденные на сайте shrapp.nl. Набор этот является не просто иконками социальной сети Google+, а скорее целым фреймворком позволяющим добавить кнопки из интерфейса Google+ на свой сайт.

Посмотреть демо как работают кнопки Google+, скачать эти иконки и почитать документацию по их установке можете на этой странице. Во-первых, вы, конечно. можете просто сказать эти симпатичные минималистические иконки для разных действий, ситуаций и т.п. дабы использовать в своем дизайне или сайте. Более продвинутый вариант – это подключение фреймворка (скриптов) для применения иконок через css cтили легко и быстро.

Установка кнопок Google+

Полная и более детальная инструкция может быть найдена по ссылке, указанной выше – там есть разные варианты и примеры использования. Я лишь рассмотрю процесс установки + один из вариантов применения кнопок после того как вы скачали соответствующий архив.

Итак, порядок установки:

1. Поместите файл css и изображения в корневую директорию сайта, ну или туда где у вас располагаются стили для шаблона.

2. «Подключите» таблицу стилей для этого добавьте в код ссылку вида (добавляется где угодно между и ):

<</span>link rel="stylesheet" href="css/css3-buttons.css" type="text/css" media="screen"<span style="color: #339933;">>

3. Далее подключим jQuery TipTip плагин и соответствующую таблицу стилей (добавляется где угодно между и ):

<</span>link rel="stylesheet" href="tiptip.css" type="text/css"  media="screen"<span style="color: #339933;">>
<</span>script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"<span style="color: #339933;">></script<span style="color: #339933;">>
<</span>script src="jquery.tiptip.js"<span style="color: #339933;">></script<span style="color: #339933;">>
<</span>script<span style="color: #339933;">>
$(document).ready(function() {
// Launch TipTip tooltip
$('.tiptip a.button, .tiptip button').tipTip();
});

4. Если вам нужны dropdown (выпадающее) меню, добавляем также:

<</span>script<span style="color: #339933;">>
$(document).ready(function() {
// Toggle the dropdown menu's
$(".dropdown .button, .dropdown button").click(function () {
$(this).parent().find('.dropdown-slider').slideToggle('fast');
$(this).find('span.toggle').toggleClass('active');
return false;
});
}); // END document.ready
// Close open dropdown slider/s by clicking elsewhwere on page
$(document).bind('click', function (e) {
if (e.target.id != $('.dropdown').attr('class')) {
$('.dropdown-slider').slideUp();
$('span.toggle').removeClass('active');
}
}); // END document.bind

На этом установку можно считать законченной. Теперь чтобы, например, вывести вот такие кнопки:

… добавляете код:

Left
Middle
Right

То есть за счет фреймворка все кнопки Google+ можно отображать через css и html путем несложных действий. Другие примеры использования кнопок в стиле Google+ можете найти в документации, на которую я ссылался ранее. В принципе нет ничего сложного, а получается весьма симпатично и стильно – особенно это, думаю, актуально будет для разработок каких-то внутрикопроративных сайтов, где кнопки будут использоваться для интерфейса системы.

P.S. Заказать книги в интернете теперь стало еще проще, специальный книжный интернет магазин имеет весьма широкий ассортимент и услугу доставки книг.

Для очищения организма от вредных элементов и шлаков помогают постные блюда рецепты которых в большом количестве вы сможете найти на нашем сайте.

Иногда для подъемов грузов заказывают специальную услугу наладка подъемников причем разных типов – от шахтных до кухонных и различных подъемных столов.

Теги: CSS Верстка, style=