Виджет подписки, с эфектом вращения иконок для блогспот.

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

 <style type="text/css">
#flipboard_btrix{ width:300px;}
ul.flipboard_btrix{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_btrix li{
display: inline-block;width: 55px; height: 50px;margin-right: -px; background: white;font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard_btrix li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a img{
border-width: 0;
}
ul.flipboard_btrix li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard_btrix li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#btrix-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohIx9tvYI-ZY7_uAxKptHkMGa1xYYqc0O0GaxHeS-TZ_dfhA1Gry_oFODOzEirUiDUi6MmJ5Lm89_H1Xbi_emER2wlkzhqmDq_dYm8UlLoBsMGgtw484mPvWqQxlrMIADEoDI9GsUv4IG/s1600/green.png) no-repeat scroll center center transparent;
    width: 290px;
    height: 50px;
    disaply: block;
}
form#btrix-searchform {
    display: block;
    padding: 7px 16px;
    margin: 0;
}
form#btrix-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
form#btrix-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}

</style>
<div id="flipboard_btrix">
<center>
<a style="font-size:25px;" >Связаться со мной</a>
</center>
<br />
<ul class="flipboard_btrix">
<li><a href="http://www.pinteresr/zarnakoom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNCs1IaFGp2n0z2LNY-aXKYIdHSZpwsjYNoGIbFF2XKbeHUAR13MHy07Q1xCC1Ph-m0SAD7Rp5ynV4Krus2GvmXdmrVgdz4WEnmpShHGbIUdm6KjkQQfLvgp430Z5FffBcv4hm4NdKUneW/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/zarnakoom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijUAYyXnCKFdovDG9mEPV3R8Pvy4BbhoeJvePfsbJkdvXFqdSUaP23SYOaggphKaa460yZkbCMAuszkMXMN15Lc3Q17emwLFiftCsU9152QePZTQk2l7OZYL-dJy0c-YTdEbgRXEwZFYgZ/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/ВашId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_KkHC6h5yEeHp3S4rbihyphenhyphenHgzVHWZdFKI2xfVgEtS4_LVV2xsvPw6gkwYimvMNbzChIpUMXPs55wVA2Dl93SZEPW0VsffvBlO8wa7fTrsQeJO7_5yBORb9gpNhz7dw3aeg7WfXnFGbLjmO/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/zarnakoom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOVDA1RPPnMhYKw_l0kzWYjgBl9JA8ORcVHSgfKX4BJYunvvupLcJt2qN46tbCIRQCE_vkqUoJ5kgTzQbf_uUlKoPeseQFOvUNQdxVjJoxSzaviaUPqSIAsBUzm7L0i61f1WjxR_PlcNGZ/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/zarnakoom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRdWxOSqYFMMJ6radpXgU4hQeVBqExwG4BUzO1LQ045Ao0FUleR76AS7cTeMvXdyTyFt_dmiw22LA-B9JxBp55ge9NhzCMD3ARpadf0JoSI29YZrf4jbn2hr39HWr0CF935A-FfEnZIRCq/s1600/btrix_rss.png" title="Add RSS Feed" /></a></li>
</ul>
<div id="btrix-searchbox">
<form action="/search" id="btrix-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Search..." />
        <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
    </form>
</div>
</div>