Здравствуйте друзья и еще немного новых плюшек,) сегодня я расскажу как установить всплывающие социальные кнопки,написанные на 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicIDwXxduDe0PS5XiiyBHfNYRTQcsypLHFH2dselF7CxgciGOSH5DaVZF0ojSmhq1mZynb5R9xs4BD8hnQddxb_RcUCKm_Dt4__s_jzdi0GiydqlH5wLjWoWP2goxVV4xmZUpCRsZNUvfu/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicIDwXxduDe0PS5XiiyBHfNYRTQcsypLHFH2dselF7CxgciGOSH5DaVZF0ojSmhq1mZynb5R9xs4BD8hnQddxb_RcUCKm_Dt4__s_jzdi0GiydqlH5wLjWoWP2goxVV4xmZUpCRsZNUvfu/s320/BS+facebook.png) no-repeat -0px -0px;}.bssocialshutter li a.twitter {background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-nuLhCnD93hUwHyFW6Efcjtev64J12l1ZQv4wzk2kcuKlqQhd9NG4fb6NnqduJWsvmRoDG-gbYGOFBGJl_eSV4m_sBz7xT9Qyjb9HQT6VF8lK-aA_ZTdw_2oYYaABqfDj26xMqnpzt0jR/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-nuLhCnD93hUwHyFW6Efcjtev64J12l1ZQv4wzk2kcuKlqQhd9NG4fb6NnqduJWsvmRoDG-gbYGOFBGJl_eSV4m_sBz7xT9Qyjb9HQT6VF8lK-aA_ZTdw_2oYYaABqfDj26xMqnpzt0jR/s320/BS+twitter.png) no-repeat -0px -0px;}.bssocialshutter li a.google-p {background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1LyWg7vUfwVyHhlkdqWnxkzCexiLSEsnameC14iXpDEOHSS9qNoIOfKXv4nT7l_hMmwqcYUaRhw8Z6rCwJaMsL3AwINuXtwFmRENROVfrvL5CtEqzYMcLtDT6nB8YTQK2B5gq-AigEb-e/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1LyWg7vUfwVyHhlkdqWnxkzCexiLSEsnameC14iXpDEOHSS9qNoIOfKXv4nT7l_hMmwqcYUaRhw8Z6rCwJaMsL3AwINuXtwFmRENROVfrvL5CtEqzYMcLtDT6nB8YTQK2B5gq-AigEb-e/s320/BS+google.png) no-repeat -0px -0px;}.bssocialshutter li a.rss {background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNfidJ8u-_n3EuoK6iQ94T5ahQRUv3p1NPRw_tfUM8EX8SeYwbQ-gUM58gHj7Tq1WhASt1IUy30zN8UjoGwvv-TxZTbGnz8bknX62fzr2cMxJnUJfnWq7R6xxaerJeopD-3Kcdj4QLhYpf/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNfidJ8u-_n3EuoK6iQ94T5ahQRUv3p1NPRw_tfUM8EX8SeYwbQ-gUM58gHj7Tq1WhASt1IUy30zN8UjoGwvv-TxZTbGnz8bknX62fzr2cMxJnUJfnWq7R6xxaerJeopD-3Kcdj4QLhYpf/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 коммент. :