Кнопки социальных сетей CSS3 с эффектом всплывающих подсказок для Blogger

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

Кнопки социальных сетей CSS3 с эффектом сплывающих подсказок для Blogger

Перед установкой советую посмотреть демо здесь, и если понравится, то уже переходим к установке.

Установка этого виджета на Blogger

Эти шаги являются чрезвычайно простыми, и займут примерно 5 минут вашего времени. Просто следуйте моей инструкцией, которая чуть ниже и все у вас получиться.

  • Шаг 1: Переходим в панель Blogger >> Шаблон >> Изменить HTML >> Ставим галочку на против «Расширить шаблоны виджета»
  • Шаг 2: Теперь в шаблоне нажав Ctrl+F, вызовите поиск и найдите вот этот код: ]]></b:skin> и прямо над этим кодом вставьте следующею таблицу стилей CSS.

.nav-tt{

padding: 50;

width: 70%;

height: 70px;

margin: 80px auto 30px auto;

}

.nav-tt li{

float: left;

list-style: none;

}

.nav-tt li a{

display: block;

width: 40px;

height: 40px;

margin: 0 2px;

outline: none;

position: relative;

z-index: 2;

text-indent: -9000px;

text-decoration: none;

}

.nav-tt li .gplus{

background: url (https://lh4.googleusercontent.com/-4cFkVuK-J9o/UHxDNROuW2I/AAAAAAAAElY/abNRRK-8Qqc/s128/google_plus.png) no-repeat;

}

.nav-tt li .twitter{

background: url (https://lh4.googleusercontent.com/-wfBGqdU25u0/UHxDPNm_SgI/AAAAAAAAEl4/7k_oJBtjSJY/s128/twitter_1.png) no-repeat;

}

.nav-tt li .pinterest{

background: url (https://lh3.googleusercontent.com/-qyf8onE2vGQ/UHxDOOke6YI/AAAAAAAAElo/2fVKKCD2Kvw/s128/pinterest.png) no-repeat;

}

.nav-tt li .facebook{

background: url (https://lh6.googleusercontent.com/-MJZ3ppOsD3g/UHxDNlVHuxI/AAAAAAAAElg/k8f5b_DVM4E/s128/fb_1.png) no-repeat;

}

.nav-tt li .linkedin{

background: url (https://lh5.googleusercontent.com/-2-olf15YoqY/UHxDNzIdb1I/AAAAAAAAElk/5kHZeTBfdlA/s128/linkedin.png) no-repeat;

}

.nav-tt li .tumblr{

background: url (https://lh5.googleusercontent.com/-6rP4L0v2_68/UHxDO2hBAJI/AAAAAAAAEls/tm1r69EhCRw/s128/tumblr.png) no-repeat;

}

.nav-tt li .youtube{

background: url (https://lh5.googleusercontent.com/-X49px-YaEfY/UHxDPEPM7DI/AAAAAAAAEl0/230Z4oxHNzE/s128/you_tube.png) no-repeat;

}

.nav-tt li .mail{

background: url (https://lh4.googleusercontent.com/-Z4beVXz8HJI/UHxDNbnCR2I/AAAAAAAAElU/BfBkHDhqkd8/s32/email.png) no-repeat;

}

.nav-tt li .rss{

background: url (https://lh4.googleusercontent.com/-_EyfM2ruhco/UHxDOsct_rI/AAAAAAAAEl8/GuByt66SWxk/s128/rss.png) no-repeat;

}

.nav-tt li a span{

width: 80px;

height: 80px;

line-height: 80px;

padding: 10px;

left: 50%;

margin-left: -60px;

font-family: 'AlegreyaSC', Georgia, serif;

font-weight: 400;

font-style: italic;

font-size: 14px;

color: #719DAB;

text-shadow: 1px 1px 1px rgba (0, 0, 0, 0.1);

text-align: center;

border: 5px solid #ffffff;

background: rgba (255,255,255,0.5);

text-indent: 0px;

position: absolute;

pointer-events: none;

border-radius: 50%;

bottom: -40px;

opacity: 0;

box-shadow: 0px 0px 10px 0px rgba (0,0,0,0.1);

— webkit-transform: scale (0);

— moz-transform: scale (0);

— o-transform: scale (0);

— ms-transform: scale (0);

transform: scale (0);

— webkit-transition: all 0.3s ease-in-out;

— moz-transition: all 0.3s ease-in-out;

— o-transition: all 0.3s ease-in-out;

— ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.nav-tt li a span:before,

.nav-tt li a span:after{

content: '';

position: absolute;

bottom: -15px;

left: 50%;

margin-left: -9px;

width: 0;

height: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-top: 11px solid rgba (0,0,0,0.1);

}

.nav-tt li a span:after{

bottom: -13px;

margin-left: -10px;

border-top: 10px solid #ffffff;

}

.nav-tt li a:hover span{

opacity: 0.9;

bottom: 50px;

— webkit-transform: scale (1);

— moz-transform: scale (1);

— o-transform: scale (1);

— ms-transform: scale (1);

transform: scale (1);

}

  • Шаг 3: После вставки выше представленного кода нажмите сохранить
  • Шаг 4: Теперь вам нужно вставить в виджет код, который представлен чуть ниже и разместить его куда угодно. Для примера: Дизайн >> Добавить гаджет >> HTML/JavaScript.

<div class="lordbuttons">

<ul class="nav-tt">

<li><a class="twitter" href=«#» target="_blank"><span>Twitter</span></a></li>

<li><a class="gplus" href=«#» target="_blank"><span>Google Plus</span></a></li>

<li><a class="facebook" href=«#» target="_blank"><span>Facebook</span></a></li>

<li><a class="linkedin" href=«#» target="_blank"><span>LinkedIn</span></a></li>

<li><a class="tumblr" href=«#» target="_blank"><span>Tumblr</span></a></li>

<li><a class="pinterest" href=«#» target="_blank"><span>Pinterest</span></a></li>

<li><a class="youtube" href=«#» target="_blank"><span>Youtube</span></a></li>

<li><a class="mail" href=«#» target="_blank"><span>Mail</span></a></li>

<li><a class="rss" href=«#» target="_blank"><span>RSS</span></a></li>

</ul></div>

  • После того как добавите этот код в виджет, замените все # на ссылки социальных сетей (профили, подписки и т.д.)
  • Наконец, после его установки и настройки, нажимаем сохранить и наслаждаемся!

Итак, уважаемые читатели, я надеюсь, вам понравилось это статья ну и, конечно же, кнопочки :)! Процесс установки этого виджета на Blogger очень прост, но если у вас возникнут какие-либо трудности, то не стесняйтесь комментировать свою проблему ниже. Удачи!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>