Здравствуйте друзья сегодня у нас на повестке дня социальные кнопки,(иконки) но только они не обычные тем, что располагаются сбоку и при наведении курсора мыши выдвигаются.Помимо того они очень элегантные, маленькие и много места не займут.Виджет социальных кнопок содержит в себе 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVOf_TztwdiFR0LQ-uw21Ok5rK-Htg74Ibfq0EKAJ2eECuSwPYcLavFukhnp1_ogVoKUQZRfwhh8uNaoXYJRjAS_sDMybpS1jlBk1P4h7amufFlhe5ghuRwSu59UeiEO3orHSdY51w0kw/s1600/Twitter.png)no-repeat; background-position:center center; } ul#social .googleplus a { background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDnUHvbYsvmU91dAMkhjYPIpYnmOgLazNU2y8ynUcBK7KD8xPkioIb9tFRoFnyhV8-MqAFuY1qH0hJLhWFZKeCrrql73rU3EWStpe1UjUGMgevRJ5QPc1tu_I1xiFSOyNX760P4ugKVpg/s1600/GOOGLE+PLus.png)no-repeat; background-position:center center; } ul#social .facebook a { background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh04m5nHu15Z3IrWSxeeAFGv0cZSErv-HKvMZ-quKUtcA0MhWfOXX1pDWsip5BeXxKEHAtgyEne1eNbh44BzmoCwroHjFltrK7TpdVzx9eZIJIKi2DrKc-M8SAUCfF8s3t5sb6KKSrqHSQ/s1600/Facebook.png)no-repeat; background-position:center center; } ul#social .rss a { background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoGlP3maKczCwh1WEh9fvMxPm1FiYSny9HLZNPrhyphenhyphenGonJlJYblHSNqOwV9vHjBSaMA7R4gIBcvRiSOWzxK_jzUv0vUEx_BQ3bKGRr7qvfRqKeNIXOOoU9V1DR3gmeWZKo8Yg0FhBkI8B8/s1600/rss.png)no-repeat; background-position:center center; } ul#social .pinterest a { background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Ii5stwDNp6cPnKWqbPiRzmCmPZfV9fhyphenhyphenZtYjQ4M9CU7jFHbTuFASdhQv-DvChRJR5WBGj_B_eu1aIRq1AOp3OFXJMqUhwP-z_N6oHgHhZxbSjebBapskmvN97cZ1t4K3e5o5RuDl5us/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 коммент. :