3876
- 0
- Автор: --------------
- Адаптировал: irbees2008
- Уровень сложности исполнения: нужны навыки css hmlt
- Демо:
Плавающий блок закладок
1.копируем код в main.tpl перед
Код:
</body>
Код:
<div class="share1">
<div class="conteiner">
<a target="_blank" class="mrc__plugin_uber_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'cm' : '1', 'ck' : '1', 'sz' : '20', 'st' : '2', 'tp' : 'ok', 'vt' : '1'}">Класс</a>
<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>
</div>
<div class="conteiner">
<a target="_blank" class="mrc__plugin_uber_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'cm' : '1', 'ck' : '1', 'sz' : '20', 'st' : '2', 'tp' : 'mm', 'vt' : '1'}">Класс</a>
<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>
</div>
<div class="conteiner">
<div class="fb-like" data-send="false" data-layout="box_count" data-width="90" data-show-faces="false" data-font="arial"></div>
</div>
<div class="conteiner">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="naraione.org">Твитнуть</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div class="conteiner">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
</div>
2. это копируем в стили :
Код:
.share1{
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #F3F8FC;
border:1px solid #CFDEEF ;
border-radius:5px;
box-shadow: -1px 1px 0 #FFFFFF inset, 0 -1px 0 #FFFFFF inset;
left: 0;
/* opacity: 0.55; */
padding: 5px;
position: fixed;
top: 237px;
margin-left:5px;
z-index:100
}
.share1 .conteiner{
float:right;
clear:both;
width:55px;
overflow:hidden;
margin: 2px 0;
z-index:1000;
text-align:center
}
.share1 .conteiner:hover{
overflow:visible !important;
}
.share1:hover {
background: #F6F6F6;
border: 1px solid #D4D4D4;
box-shadow: 0 0 5px #DDD;
}
.share1 a {
opacity: 0.5;
vertical-align: bottom;
}
.share1:hover a {opacity: 0.7}
.share1 a:hover {opacity: 1}
Можешь почитать и вот эту статейку "Плагин "downloadcounter""
Это тоже интересно
- 04.10.15Фиксированный, плавающий блок
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.