Социальные закладки с эффектом для сайта
 | |
| Красиво исполнены закладки виде круглых кнопок социальные закладки, где присутствует стильный эффект при наведение на одну их них. Трудно представить интернет ресурс где бы такой функций не было. Для этого специально есть сервис, где можно собрать стандартную подборку. Здесь же уже все подобрано на самые популярные порталы, плюс вы сами можете поставить под закладку, где уже по умолчанию прописана. Палитра светло синее, что на любом фоне прекрасная видимость. Безусловно пользы от них большая, так как если интересный материал, гости и пользователи раскидывают по своим аккаунтам. Но здесь отличие от простых, как уже говорилось их функциональность. Где происходит увеличение. И можно поставить как в блок контейнера, так как под сам материал или на одну их категорий. Ведь изначально место они мало занимают, но виртуальность у них хорошая и на темном или светлом они визуально просматривается. Проверка на тестовой площадке: Так они установлены при настройке;  Это уже в рабочем виде;  HTML Код <link href="http://zornet.ru/Aben/ABGDA/dock.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://zornet.ru/Aben/ABGDA/interface.js"></script> <div class="dock" id="dock"> <div class="dock-container"> <a class="dock-item" href="http://www.facebook.com/sharer.php?u=$HOME_PAGE_LINK$" rel="nofollow" target="_blank"> <img src="http://zornet.ru/Aben/ABGDA/facebook.png" alt="Facebook" /> <span>Facebook</span> </a> <a class="dock-item" href="http://vkontakte.ru/share.php?url=$HOME_PAGE_LINK$" rel="nofollow" target="_blank"> <img src="http://zornet.ru/Aben/ABGDA/vbutton.png" alt="Вконтакте" /> <span>Вконтакте</span> </a> <a class="dock-item"href=" http://twitter.com/share?text=$SITE_NAME$&url=$HOME_PAGE_LINK$" rel="nofollow" target="_blank"> <img src="http://zornet.ru/Aben/ABGDA/twitter.png" alt="Twitter" /> <span>Twitter</span> </a> <a class="dock-item"href=" http://connect.mail.ru/share?share_url" rel="nofollow" target="_blank"> <img src="http://zornet.ru/Aben/ABGDA/mmbutton.png" alt="Мой Мир" /> <span>Мой Мир</span> </a> <a class="dock-item"href=" http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=$HOME_PAGE_LINK$" target="_blank"> <img src="http://zornet.ru/Aben/ABGDA/okbutton.png" alt="Одноклассники" /> <span>Одноклассники</span> </a> <a class="dock-item" href="http://www.google.com/bookmarks/mark?op=add&bkmk=$HOME_PAGE_LINK$&title=$SITE_NAME$" rel="nofollow" target="_blank"> <img src="http://zornet.ru/Aben/ABGDA/gbutton.png" alt="Google" /> <span>Google</span> </a> <a class="dock-item" href="http://share.yandex.ru/go.xml?service=yaru&url=$HOME_PAGE_LINK$&title=$SITE_NAME$" rel="nofollow" target="_blank"> <img src="http://zornet.ru/Aben/ABGDA/ybutton.png" alt="Яндекс" /> <span>Яндекс</span> </a> <a class="dock-item" href="http://zornet.ru/load/81" rel="nofollow" target="_blank"> <img src="http://www.novickiy.ru/_ld/0/23220516.gif" alt="Код закладок" /> <span>Код закладок</span> </a> </div> </div> Скрипт: Код <script type="text/javascript"> $(document).ready( function() { $('#dock').Fisheye( { maxWidth: 80, items: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 30, proximity: 50, halign : 'center' } ) } ); </script> Скрипт можно прописать сразу рядом с кодом, где в нем вы можете редактировать по форме. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |