Google+ Followers

Будь в курсе событий!

20.01.2014

Социальные боковые кнопки, выдвижные для блогспот,блоггер.

Leave a Comment




Здравствуйте друзья сегодня у нас на повестке дня  социальные кнопки,(иконки) но только они не обычные тем, что  располагаются  сбоку и при наведении курсора мыши выдвигаются.Помимо того они очень элегантные, маленькие и много места не займут.Виджет социальных кнопок содержит в себе 5 социальных сервисов таких как твиттер,гугл +, фэйсбук,подписка на рсс канал, и пинтерест. Если кому приглянулся данный виджет, установка у вас не займет много времени нам для этого всего лишь надо. Открыть наш блог,далее панель меню дизайн,потом жмем на  надпись добавить гаджет,а далее ищем в поиске HTMLjavascript вставляем и сохраняем вот такой вот скрипт.
 <style type="text/css"> ul#social { position: fixed; margin: 0px; padding: 0px; top: 10px; left: 0px; list-style: none; z-index:9999; } ul#social li { width: 100px; } ul#social li a { display: block; margin-left: -2px; width: 100px; height: 70px; background-color:#fff; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; -moz-border-radius:0px 10px 10px 0px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-top-right-radius: 10px; -moz-box-shadow: 0px 4px 3px #000; -webkit-box-shadow: 0px 4px 3px #000; } ul#social .twitter a{ background:#0F96C6 url(http://3.bp.blogspot.com/-1wb-O4GG6DQ/UPFOe03M-lI/AAAAAAAAA4g/1015-y7FaYU/s1600/Twitter.png)no-repeat; background-position:center center; } ul#social .googleplus a { background:#D73D27 url(http://3.bp.blogspot.com/-1mYMKQENXdI/UPFOeK31VzI/AAAAAAAAA4k/w2Qk48tpleQ/s1600/GOOGLE+PLus.png)no-repeat; background-position:center center; } ul#social .facebook a { background:#1A4B97 url(http://1.bp.blogspot.com/-3M1F3Y29Yoc/UPFOeAAUFvI/AAAAAAAAA4c/ALvfOPDwJ-g/s1600/Facebook.png)no-repeat; background-position:center center; } ul#social .rss a { background:#FAAE17 url(http://4.bp.blogspot.com/-twR0g7wotpE/UPFOfFtFOuI/AAAAAAAAA4o/uJMUf9hjRco/s1600/rss.png)no-repeat; background-position:center center; } ul#social .pinterest a { background:#963336 url(http://2.bp.blogspot.com/-xgOrG4ysqyM/UPFOeKFKMtI/AAAAAAAAA4Y/i_jnKpHsK24/s1600/Pinterest.png)no-repeat; background-position:center center; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type='text/javascript'> $(function () { $('#social a').stop().animate({ 'marginLeft': '-85px' }, 1000); $('#social > li').hover( function () { $('a', $(this)).stop().animate({ 'marginLeft': '-2px' }, 200); }, function () { $('a', $(this)).stop().animate({ 'marginLeft': '-85px' }, 200); } ); }); </script> <ul id='social'> <li class='twitter'><a href='http://twitter.com/zarnakoom' title='Twitter'></a></li>
<li class='googleplus'><a href='http://plus.google.com/zarnakoom' title='Google Plus'></a></li> <li class='facebook'><a href='http://www.facebook.com/zarnakoom' title='Facebook'></a></li> <li class='rss'><a href='http://feeds.feedburner.com/zarnakoom' title='Rss'></a></li> <li class='pinterest'><a href='http://www.pinterest.com/zarnakoom/' title='Pinterest'></a></li> </ul>



Теперь значит про те места что я отметил маркером, самое важное это скрипт  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>   если у вас в шаблоне есть скрипт джиквери  то вам надо код вставить без этого скрипта. А другие места отмеченные маркером, там вам уважаемые читатели надо будет подставить свои айди.

0 коммент. :

© 2012-2017 Cash's from program