Мой блог и форум лесбиянки! Меня нет в ЖЖ-дневнике и на лесби форумах. Я обычная девушка-блоггер! Мои заметки о любви и цитатах, о детях, о машинах, полезные советы и новости, рецепты и домашние заботы!

Познакомиться реально тут на сайте знакомств с 50 миллионами анкет!
Просто попробуйте бесплатно зайти через свою социальную сеть! Бесплатно!!!
Знакомьтесь, общайтесь, влюбляйтесь!!!!

Круглая кнопка для соц. сетей

Круглая кнопка SHARE при наведении на которую появляются кнопки сервисов популярных социальных сетей, таких как, например, twitter, google +1, vkontakte, facebook и любых других по вашему усмотрению. Кнопки выбранных сервисов будут расположены по кругу.

Разметка HTML

Основа представляет собой несколько DIV-ов:

<div id="buttons">
    <div class="holder identity"> </div>
    <div class="holder identity"> </div>
    ....
</div>

Заполнив ДИВы кнопками соц. сетей получим что-то похожее на это:

    <div id="buttons">
    
        <div class="text">+</div>
        
        <div class="holder twitter">
             <a href="https://twitter.com/share" class="twitter-share-button" data-via="pcvector" data-lang="ru">Твитнуть</a>
        </div>
        
        <div class="holder vk">
            <div id="vk_like"></div>
        </div>
        
        <div class="holder mail">
             <a class="mrc__share" href="http://connect.mail.ru/share">В Мой Мир</a>
        </div>
        
        <div class="holder gplus">
            <div class="g-plusone" data-size="medium"></div>
        </div>
        
        <div class="holder addthis">
             <div class="addthis_toolbox addthis_default_style ">
                 <a class="addthis_counter addthis_pill_style"></a>
             </div>
        </div>
    
        <div class="holder facebook">
             <div id="fb-root"></div>
             <div class="fb-like" data-send="false" data-layout="button_count" data-width="120" data-show-faces="true"></div>
        </div>

</div>

CSS

#buttons {
    position: relative;
    border: 10px solid #ddd;
    border-radius: 100px;
    width: 80px;
    margin: 30px;
    box-shadow: 0px 0px 10px #ddd, 0px 10px 0px #aaa;
    height: 80px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
}

#buttons:hover {
border: 15px solid #ddd;
width: 160px;
height: 160px;
left: -40px;
opacity: 1;
top: -40px;
}

#buttons div {
position: absolute;
opacity: 0;
min-width: 100px;
top: 15px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
}

#buttons:hover div {
opacity: 1;
}

#buttons .text {
color: #FF9000;
font-size: 101px;
font-weight: bold;
left: 11px;
opacity: 1;
text-shadow: 0 3px 0 #B5B5B5;
top: -19px;
z-index: 5000;
}

#buttons:hover .text {
top: 60px;
left: 35px;
opacity: 0;
}

#buttons:hover div:nth-of-type(2) {
left: -16px;
top: 0;
}
#buttons:hover div:nth-of-type(3) {
left: 102px;
top: 5px;
}
#buttons:hover div:nth-of-type(4) {
left: -52px;
top: 62px;
}
#buttons:hover div:nth-of-type(5) {
left: 144px;
top: 64px;
}
#buttons:hover div:nth-of-type(6) {
left: -20px;
top: 110px;
}
#buttons:hover div:nth-of-type(7) {
left: 110px;
top: 136px;
}
.fb_edge_widget_with_comment iframe {
width: 120px !important;
}

В свойствах div:nth-of-type(2), (3), (4), (5), (6), (7) определяем положение наших соц. кнопок на круге (всего 6 сервисов).

1-ый DIV у нас используется для надписи на самой кнопке +.

<div class="text">+</div>

Остальные 6 DIV-ов — заняты нашими социальными сервисами.

Их может быть и меньше и больше.

javascript

Для самой кнопки скрипты не используются, но для соц. сетей не забываем подключать их java-коды:

<script src="http://cdn.connect.mail.ru/js/share/2/share.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?47"></script>
<script type="text/javascript">
    VK.init({apiId: 2289323, onlyWidgets: true});
</script>
<script type="text/javascript">
    VK.Widgets.Like("vk_like", {type: "button", height: 20});
</script>

<script type=»text/javascript» src=»http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f3985a80cce5801″></script>

<script type=»text/javascript»>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=»//platform.twitter.com/widgets.js»;fjs.parentNode.insertBefore(js,fjs);}}(document,»script»,»twitter-wjs»);

window.___gcfg = {lang: ‘ru’};
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = «//connect.facebook.net/ru_RU/all.js#xfbml=1&appId=210547609026984»;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

</script>

Источник — http://pcvector.net/scripts/buttons_and_icons/324-krgulaya-knopka-dlya-soc-setey.html


Реальные знакомства в Вашем городе!

Оставить комментарий

Blue Captcha Image
Новый проверочный код

*

..

Мы живем и радуем наших читателей

Подписка на почту:

Сервис FeedBurner

Топ просмотров
Blog Traffic

Pages

Pages|Hits |Unique

  • Last 24 hours: 1 398
  • Last 7 days: 7 665
  • Last 30 days: 33 451
  • Online now: 5
Яндекс.Метрика

Нравится