Наш опрос
Каким браузером вы пользуетесь?
Всего ответов: 46
Случайный анекдот
43 На календаре 1 Января. В магазин входит покупатель и разглядывая хлебобулочные изделия спрашивает у продавщицы: - Извините, а у вас хлеб свежий? Продавщица: - Нет… прошлогодний!
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

» Сегодня нас посетили:
» Зарег. на сайте
Всего: 3181
Новых за месяц: 9
Новых за неделю: 2
Новых вчера: 0
Новых сегодня: 0
» Из них
Администраторов: 1
Модераторов: 2
С активностью: 168
Авторизованных: 3010

   Функциональная нижняя панель с соц. закладками



Увидел красивую и функциональную нижнюю панель на сайте мануал.юкоз.нет ну и как обычно рипанул, чтобы поделиться с вами. Что же она из себя представляет?

Взгляните на скрин, слева кнопка "На главную" далее идут пять кнопок социальных закладок таких как: Фейсбук, твиттер, гугл+, вконтакте и одноклассники. Скрипт мониторит и выводит количество нажатий на кнопки "Поделиться".

Далее идет кнопка вывода функционала это: Добавить в закладки, читать на readability.com и поиск по сайту.

Ну и последняя это кнопочка скрыть/развернуть панель.

Установка:
На страницы где хотите видеть панель сохраняем:
Код
<link type="text/css" rel="StyleSheet" href="http://s16.ucoz.net/src/gstoolbar2/css/style.css" />
<link type="text/css" rel="StyleSheet" href="http://s16.ucoz.net/src/gstoolbar2/css/share.css" />
<script type="text/javascript" src="http://s16.ucoz.net/src/gstoolbar2/js/tool.js"></script>
<script type="text/javascript">//------------UCOZ-JS-CODE-----------
document.write("\n<div id=\"utbr8214\" rel=\"s16\"></div>\n<div id=\"utbAllToolbar\" class=\"guest_toolbar_wide navbar-share\"><div class=\"showToolbarButton toolbarBottom\">\n<i id=\"buttonShowToolbar\" data-toggle=\"tooltip\" title=\"Показать Соц-бар\" class=\"toolMenuIcon toolbarBottom\"></i>\n</div>\n<div class=\"container toolbarBottom\" id=\"toolbarMainContainer\">\n<div class=\"navbar\">\n<div class=\"navbar-inner utbToolbarInner\">\n<a id=\"utbTitle\" data-toggle=\"tooltip\" title=\"На главную\" class=\"brand\" href=\"/\"><img width=\"24\" height=\"24\" src=\"http://s16.ucoz.net/img/toolbar_favicon.png?cur_time\" /></a>\n<ul id=\"utbMenuContainer\" class=\"nav\">\n<li class=\"divider-vertical\"></li>\n\n <li class=\"utbMenuItem\">\n <div id=\"fbLike_s\" data-counter=\"http://graph.facebook.com/?id=$HOME_PAGE_LINK$$REQUEST_URI$&callback=?\" data-href=\"https://www.facebook.com/sharer/sharer.php?u=$HOME_PAGE_LINK$$REQUEST_URI$\" class=\"utbWidgetContainer utbShareButtons\">\n <span id=\"btnFacebook\" class=\"toolMenuIcon\"></span>\n <span id=\"fbCounter\" class=\"utbShareCounter\"></span>\n </div>\n </li>\n\n <script>\n $(function(){\n var page_title=$(\"title\").text();\n $(\"#twShare_s\").attr(\'data-href\', $(\"#twShare_s\").attr(\'data-href\')+\"&text=\"+page_title);\n });\n \x3c/script>\n <li class=\"utbMenuItem\">\n <div id=\"twShare_s\" data-counter=\"http://urls.api.twitter.com/1/urls/count.json?url=$HOME_PAGE_LINK$$REQUEST_URI$&callback=?\" data-href=\"https://twitter.com/intent/tweet?source=webclient&url=$HOME_PAGE_LINK$$REQUEST_URI$\" class=\"utbWidgetContainer utbShareButtons\"\">\n <span id=\"btnTwitter\" class=\"toolMenuIcon\"></span>\n <span id=\"twCounter\" class=\"utbShareCounter\"></span>\n </div>\n </li>\n<li class=\"utbMenuItem\">\n <div id=\"gPlus_s\" data-counter=\"/index/98\" data-href=\"https://plus.google.com/share?url=$HOME_PAGE_LINK$$REQUEST_URI$\" class=\"utbWidgetContainer utbShareButtons\">\n <span id=\"btnGoogle\" class=\"toolMenuIcon\"></span>\n <span id=\"gpCounter\" class=\"utbShareCounter\"></span>\n </div>\n </li>\n<li class=\"utbMenuItem\">\n <div id=\"vkLike_s\" data-counter=\"http://vkontakte.ru/share.php?act=count&index=1&url=$HOME_PAGE_LINK$$REQUEST_URI$\" data-href=\"http://vk.com/share.php?url=$HOME_PAGE_LINK$$REQUEST_URI$\" class=\"utbWidgetContainer utbShareButtons\">\n <span id=\"btnVk\" class=\"toolMenuIcon\"></span>\n <span id=\"vkCounter\" class=\"utbShareCounter\"></span>\n </div>\n </li>\n\n <li class=\"utbMenuItem\">\n <div id=\"okLike_s\" data-counter=\"http://www.odnoklassniki.ru/dk?st.cmd=shareData&ref=$HOME_PAGE_LINK$$REQUEST_URI$&cb=?\" data-href=\"http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=$HOME_PAGE_LINK$$REQUEST_URI$\" class=\"utbWidgetContainer utbShareButtons\">\n <span id=\"btnOk\" class=\"toolMenuIcon\"></span>\n <span id=\"okCounter\" class=\"utbShareCounter\"></span>\n </div>\n </li>\n\n\n\n</ul>\n<ul id=\"utbToolsContainer\" class=\"nav\">\n\n<li class=\"divider-vertical\"></li>\n<li id=\"itemSearch\" class=\"utbMenuItem toolbarWidget\">\n<a class=\"toolMenuLink\" role=\"button\">\n<i id=\"btnSearch\" data-toggle=\"tooltip\" title=\"Поиск\" class=\"utbButtons toolMenuIcon pull-right\"></i>\n</a>\n\n<div class=\"utbWidgetContainer\">\n<input id=\"utbSearchField\" type=\"text\" class=\"navbar-search span2 utbSearchQuery searchField\" placeholder=\"Поиск\">\n<span id=\"utbSearchIndicator\"></span>\n <div class=\"searchRes bottom\" id=\"utbSearchResult\"><div class=\"arrow\"></div><h3 class=\"searchRes-title\">Вы искали: <span id=\"searchTerm\"></span></h3><div class=\"searchRes-content\"><ul id=\"utbSearchCnt\"></ul></div>\n </div>\n</div>\n</li>\n\n<li class=\"divider-vertical\"></li>\n<li class=\"utbMenuItem \">\n<span class=\"rdbWrapper\" style=\"display: none;\"></span>\n<a class=\"toolMenuLink\">\n<i id=\"btnReadNow\" data-toggle=\"tooltip\" title=\"Читать\" class=\"utbButtons toolMenuIcon\"></i>\n</a>\n</li>\n\n<li class=\"utbMenuItem\">\n<span id=\"readLater\" style=\"display: none;\"></span>\n<a class=\"toolMenuLink\">\n<i id=\"btnReadLater\" data-toggle=\"tooltip\" title=\"Добавить в закладки\" class=\"utbButtons toolMenuIcon\"></i>\n</a>\n</li><li class=\"divider-vertical\"></li>\n</ul>\n<ul class=\"nav pull-right\">\n<li class=\"utbMenuItem\">\n<a class=\"toolMenuLink\">\n<i id=\"utbScroll\" class=\"rScroll utbButtons toolMenuIcon pull-right\"></i>\n</a>\n</li>\n<li class=\"utbMenuItem\">\n<a class=\"toolMenuLink\">\n<i id=\"btnSlideOut\" data-toggle=\"tooltip\" title=\"Спрятать Соц-бар\" class=\"utbButtons toolMenuIcon pull-right toolbarBottom\"></i>\n</a>\n</li>\n</ul>\n</div>\n</div>\n</div>\n</div>\n")
window.shareBar = true;
$(document).ready(function () {var toolbarController = new tController('toolbarMainContainer');
toolbarController.control();

});
tsigns = {
nores: "Ничего не найдено... Попробуйте поискать в",
allRes: "Все результаты",
searchya: "yandex.ru"
}
//------------UCOZ-JS-END-----------
</script>  
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?47"></script>

<script type="text/javascript">VK.init({apiId: 2759376, onlyWidgets: true});</script>
<div id="fb-root"></div>


Html редактор
Автор: Prosvetekvator
Просмотров: 2524
11.11.2013


Другие статьи почитайка;)
Поделись ссылкой на форумах
Ссылка:
BB-code:
HTML:


« Пред. Функциональная нижняя панель с соц. закладками След. »


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа

Мини-чат
Топ пользователей
Новое на форуме








Комментарии