Вертикальные кнопки социальных сетей

---

Вертикальные социальные кнопки

Ув. читатели! Код кнопок нерабочий!

Здравствуйте! Нашла в сети один очень оригинальный виджет кнопок социальных сетей. Кому интересно, копируйте код ниже и вставляйте черновик blogger-дизайн-добавить гаджет-Html/Javascript-вставить-сохранить.

Нужно будет внизу кода изменить данные социальных сетей на свои. Но сначала проверьте виджет в работе. Вставьте и посмотрите как он будет выглядеть в Вашем блоге.  При наведении курсора мыши всплывает вкладка социальной сети, смотрите на рисунке, эффект потрясающий. 

                                          

<style> .StarsBloggingSocialButtonsBorder { margin:0 auto; padding:5px; width:auto; border-radius:5px; border: 1px #BBBBBB solid; } #bloggertrix-SexySocialButtons{ list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif; } #bloggertrix-SexySocialButtons a{ text-decoration:none; font-family:trebuchet ms,sans-serif; } #bloggertrix-SexySocialButtons li{ position:relative; height:38px; cursor:pointer; padding: 0 !important; } #bloggertrix-SexySocialButtons .facebook, .googleplus, .YouTube, .rss, .twitter{ position:relative; z-index:5; display:block; float:none; margin:5px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://1.bp.blogspot.com/-JKq0eFFwx34/UGx39fhHO_I/AAAAAAAABE4/56i9phAS2do/s1600/NBT+Sprites+Social+Icons.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px; } #bloggertrix-SexySocialButtons li:after{ position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#ffffff; content:attr(data-alt); line-height:32px; } #bloggertrix-SexySocialButtons .icon{ overflow:hidden; color:#fafafa; } #bloggertrix-SexySocialButtons .facebook{ width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0; } #bloggertrix-SexySocialButtons .twitter{ width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px; } #bloggertrix-SexySocialButtons .googleplus{ width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px; } #bloggertrix-SexySocialButtons .YouTube{ width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:-2px -95px; } #bloggertrix-SexySocialButtons .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px; } #bloggertrix-SexySocialButtons li:hover .icon, .touch #bloggertrix-SexySocialButtons li .icon{ width:210px; } .touch #bloggertrix-SexySocialButtons li .facebook, #bloggertrix-SexySocialButtons li:hover .facebook{ background-color:rgba(59,89,152,1); } .touch #bloggertrix-SexySocialButtons li .twitter, #bloggertrix-SexySocialButtons li:hover .twitter{ background-color:rgba(64,153,255,1); } .touch #bloggertrix-SexySocialButtons li .googleplus, #bloggertrix-SexySocialButtons li:hover .googleplus{ background-color:rgba(228,69,36,1); } .touch #bloggertrix-SexySocialButtons li .YouTube, #bloggertrix-SexySocialButtons li:hover .YouTube{ background-color:rgba(174,45,39,1); } .touch #bloggertrix-SexySocialButtons li .rss, #bloggertrix-SexySocialButtons li:hover .rss{ background-color:rgba(255,102,0,1); } </style> <div class="bloggertrixSocialButtonsBorder"> <ul id="bloggertrix-SexySocialButtons"> <li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/olga.protasova.927">Follow us on Facebook</a></li> <li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/violavasil_eva">Follow us on Twitter</a></li> <li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/105321220847694180518">Follow us on Google+</a></li> <li data-alt="Subscribe us on YouTube"><a class="icon YouTube" href="https://youtube.com/">Subscribe us on YouTube</a></li> <li data-alt="Subscribe with RSS"><a class="icon rss" href="https://feeds.feedburner.com/blogspot/TsLmX">Subscribe with RSS</a></li> </ul> </div>

Вы можете изменить цвета кнопок, и их размер на свое усмотрение. Я думаю в коде разберетесь, легко найдете нужные параметры цветов и размеров, и измените на свой вкус. На этом заканчиваю, жду Ваши комментарии.

Рекомендуемый контент: