Google+ Followers

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

16.01.2014

Всплывающие социальные иконки, на CSS для блогспот.

Leave a Comment


Здравствуйте друзья и еще немного новых плюшек,) сегодня я расскажу как установить всплывающие социальные кнопки,написанные на CSS.Выглядят они интересно, можете увидеть это выше на скриншоте.Я думаю многим бы понравились такие кнопки,потому как они очень привлекательные, и так а теперь об установке ничего сложного в ней нету идем в меню дизайн,добавить гаджет, HTMLjavascript далее сохраняем. А вот и сам скрипт,только главное не забыть подставить свои айди там где я пометил маркером.
 <style>.bssocialshutter {margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.bssocialshutter ul li{list-style:none;border-bottom:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.bssocialshutter li a {margin:5px 5px 0px 5px;padding:0px 0px 0px 0px;width:60px;height:60px;float:left;text-indent:-99999px;background: #191919;border:solid 1px #222121;-moz-border-radius-topleft: 5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}.bssocialshutter li a.facebook {background: #191919 url(http://4.bp.blogspot.com/-1AWfhVrWuUA/UUMysB13J0I/AAAAAAAACHI/JSQNzB49-_c/s320/BS+facebook.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.bssocialshutter li a.facebook:hover {background: #191919 url(http://4.bp.blogspot.com/-1AWfhVrWuUA/UUMysB13J0I/AAAAAAAACHI/JSQNzB49-_c/s320/BS+facebook.png) no-repeat -0px -0px;}.bssocialshutter li a.twitter {background: #191919 url(http://2.bp.blogspot.com/-TgqVb6LH02c/UUMytNrRADI/AAAAAAAACHY/ah4WivlW0fc/s320/BS+twitter.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.bssocialshutter li a.twitter:hover {background: #191919 url(http://2.bp.blogspot.com/-TgqVb6LH02c/UUMytNrRADI/AAAAAAAACHY/ah4WivlW0fc/s320/BS+twitter.png) no-repeat -0px -0px;}.bssocialshutter li a.google-p {background:#191919 url(http://2.bp.blogspot.com/-7D02pM7Rup0/UUMyscfY2gI/AAAAAAAACHE/gFPMV1tw0hk/s320/BS+google.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.bssocialshutter li a.google-p:hover {background: #191919 url(http://2.bp.blogspot.com/-7D02pM7Rup0/UUMyscfY2gI/AAAAAAAACHE/gFPMV1tw0hk/s320/BS+google.png) no-repeat -0px -0px;}.bssocialshutter li a.rss {background:#191919 url(http://3.bp.blogspot.com/-YRq_9OidmrU/UUMysCYB3UI/AAAAAAAACHA/871PzZSutng/s320/BS+RSS+Feed.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.bssocialshutter li a.rss:hover {background: #191919 url(http://3.bp.blogspot.com/-YRq_9OidmrU/UUMysCYB3UI/AAAAAAAACHA/871PzZSutng/s320/BS+RSS+Feed.png) no-repeat -0px -0px;}</style><div class='bssocialshutter'><ul><li><a class='facebook' href='http://www.facebook.com/Zarnakoom' target='_blaank'>Facebook</a></li><li><a class='twitter' href='http://twitter.com/Zarnakoom' target='_blaank'>Twitter</a></li><li><a class='google-p' href='https://plus.google.com/Zarnakoom' target='_blaank'>Google Plus</a></li><li><a class='rss' href='http://feeds.feedburner.com/Zarnakoom' target='_blaank'>Rss</a></li></ul></div>

0 коммент. :

© 2012-2017 Cash's from program