Новое в блоге
Loading...
24 апр. 2013 г.

Плавающие социальные кнопки на JQuery для Blogger

Привет дорогие друзья! Давненько я Вам ни чего стоящего не предлагал. Времени катастрофически не хватает. Заполняю материалами свои новые блоги на WordPress. Потом поделюсь своими первыми впечатлениями и представлю вам на суд мои новые проекты. Может Вы обратили внимание, теперь у блога Школа Blogger(а) свой домен - http://www.dljablogger.ru/. Коротко и ясно. Наконец то, я избавился от длинного названия.

Вот ещё, как видите сменил шаблон. Ведь не зря же, я проводил опрос, большинство проголосовавших, были за смену шаблона, что я и исполнил. Желание моих друзей, закон для меня. Думаю Вам понравится новый шаблон. Зелёный цвет, просто великолепен. Как Вы считаете? Весна, посмотрите вокруг, всё зеленеет, начинается новая жизнь в природе.Так и у меня.

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

Сегодня я вам постараюсь представить несколько хороших виджетов для blogger. Начну с виджета плавающих кнопок социальных сетей на JQuery. Располагаться кнопки будут не на боковой панели, а на краю блога. Кнопки будут статические, то есть при прокрутке страницы блога, они будут стоять на месте, как вкопанные. Всего соцкнопок шесть - facebook, twitter, google plus, pinterest, youtube, rss. Пока посмотрите скриншот. Демо сделаю чуть позже. Как и обещал смотрите кнопки тут. Принцып работы кнопок такой. При наведении курсора на значок, появляется полностью кнопка с надписью.

Панель социальных кнопок
Как установить панель плавающих социальных кнопок в блог
Заходим в панель управление blogger - Шаблон - Изменить HTML. Находим строчку ]]></b:skin> и перед ней (чуть выше) вставляем код стиля CSS. Код длинный, под спойлером.
Spoiler:
 .social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {

    background-position: right 10px;
}
.button-left #twitter-btn span {

    background-position: right -35px;
}
.button-left #google-btn span {

    background-position: right -127px;
}
.button-left #rss-btn span {

    background-position: right -80px;
}
.button-left #pinterest-btn span {

    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {

    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {

    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {

    background-color: #3B5998;

}
.social-buttons #twitter-btn:hover .social-icon {

    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {

    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {

    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {

    background-color: #C4302B;
}
.social-buttons a:hover .social-text {

    display: block;
}
.button-left .social-icon {

    -moz-transition: background-color 0.4s ease-in 0s;

    -webkit-transition: background-color 0.4s ease-in 0s;

    background-repeat: no-repeat;

    display: block;

    float: left;

    height: 43px;

    margin-bottom: 2px;

    width: 43px;
}
.button-left .social-text {

    display: none;

    float: right;

    font-size: 1em;

    font-weight: bold;

    margin: 11px 40px 11px 0px;

    white-space: nowrap;
}
.button-right .social-icon {

    -moz-transition: background-color 0.4s ease-in 0s;

    -webkit-transition: background-color 0.4s ease-in 0s;

    background-repeat: no-repeat;

    display: block;

    float: right;

    height: 43px;

    margin-bottom: 2px;

    width: 43px;
}
.button-right .social-text {

    display: none;

    float: left;

    font-size: 80%;

    font-weight: bold;

    margin: 11px 0 11px 40px;

    white-space: nowrap;
}
.social-buttons .social-text {

    color: #FFFFFF;
}

Далее ищем строчку  </head> и перед ней (чуть выше) добавляем код:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>

Если у Вас уже подключена библиотека JQuery, то можете, первых два скрипта не копировать.
Последний шаг. Перед строчкой </body> вставляем такой код:

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

Здесь заполняем свои данные социальных сетей - your FB, your twitter, your G+ и т.д. Вот вроде всё. Позвольте на этом с вами не на долго попрощаться. До новых встреч.

С уважением, Сергей

 Виджет взят за бугром - maskolis.com

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

4 коммент. :

  1. ТАКОЕ ДЕЛО ... У МЕНЯ НЕТ ТЕГА < / body > В КОДЕ ... ВИДАТЬ КОГДА ТО ЧЕМ ТО ЗАМЕНИЛ)) ЧТО ДЕЛАТЬ? http://fiestaagency.blogspot.ru/

    ОтветитьУдалить
    Ответы
    1. Максим,такая строчка обязательно должна быть.Без неё блог не работал бы.Просто с новым редактором шаблонов,её трудней найти.Посмотри повнимательней.

      Удалить
    2. Все нашел, спасибо)) Просто ctrl f почему то не ищет нефига, пришлось вручную перелопатить))

      Удалить
    3. Максим, прежде чем искать при помощи комбинации Ctrl+F, надо сначала нажать форматировать шаблон.Потом Ctrl+F и в редакторе появится окошко, куда вписываешь искомый тег. 8-)

      Удалить

 
Footer