Социальные кнопки с красивым эффектом при наведении для сайдбара блога

(Последнее обновление: 15.12.2018)

Привет, читатель! Очень рад вас видеть на страницах моего блога. Сегодняшний пост посвящен: устанавливаем красивые социальные кнопки на боковую панель блога Blogger. В последние несколько лет социальные сети стали чем-то большим, нежели просто для общение друзей и новых знакомств. Они так же играют огромную роль для продвижения блога и привлечения посетителей.

Чем больше друзей, тем больше шансов получить трафик для своего блога. Поэтому, я представлю вам набор красивых социальных кнопок, с эффектом при наведении на боковую панель блога. Весь набор кнопок социальных сетей, можно посмотреть и проверить в демонстрационном блоге. Все представленные социальные кнопки устанавливаются при помощи волшебного гаджета HTML/JavaScript. В поле гаджета добавляйте представленный код. В место решеток вставляйте ссылки на ваши профили или на страницы блога в социальных сетях, RSS поток, текст меняете на свой. Дайте привлекательное название и сохраняйте.

Виджет для Blogger - кнопки социальных сетей RSS, Google plus, Facebook и Twitter

RSS, Google plus, Facebook и Twitter

Код кнопок:

<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://new-school-blogger.googlecode.com/files/Sharing%20Touch%20Me.png
) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="####" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="####" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="####" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="####" rel='external nofollow' target='_blank' ></a>
</div>

Виджет Blogger социальные кнопки Facebook, Twitter, Google+ и Pinterest

RSS, Email RSS, Facebook, Twitter, Google plus и Pinterest

Код для этих кнопок:

<style>
 #social a:hover { background-color: transparent;opacity:0.7; } #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> &nbsp;<div id="social"><a title="Grab Our Rss Feed" href="http://feeds.feedburner.com/####" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon" /></a><a rel="nofollow" title="Подписаться на обновление блога по Email" href="http://feedburner.google.com/fb/a/mailverify?uri=####" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon" /></a><a rel="nofollow" title="Like Our Facebook страница" href="####" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon" /></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="####" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon" /></a><a title="Follow на Google+" rel="nofollow" href="####" target="_blank"><img style="margin-right:1px;" src="http://2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png" /></a><a title="Follow Our Pins" rel="nofollow" href="####" target="_blank"><img style="margin-right:1px;" src="http://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div>

Кнопки соцсетей Twitter, Facebook, RSS, YouTube и Google Plus - виджет Blogger

Twitter, Facebook, RSS, YouTube и Google Plus

Код для этих кнопок:

<style> /************************** Social Buttons from *************************/ .gotsocial {padding: 2em 0 1.5em 50px;} .gotsocial span a {display: block;width: 32px;height: 32px;text-indent: -9999px;background-color: none;background: transparent url("http://4.bp.blogspot.com/-R1ZmmnETQEQ/T0xFPa2HyXI/AAAAAAAAAB0/zIaZHlquhv0/s1600/socialbuttons.png") 0 0 no-repeat;} .gotsocial span {float: left;display: inline;margin-center: 8px;}
#iconTwitter,#iconFacebook,#iconRSS,#iconYouTube,#iconGooglePlus {transition:background-position .4s ease-in-out;-webkit-transition:background-position .4s ease-in-out; -o-transition:background-position .4s ease-in-out; -moz-transition:background-position .4s ease-in-out; -ms-transition:background-position .4s ease-in-out;}
#iconTwitter {background-position: -33px -33px;} #iconTwitter:hover {background-position: -33px 0;}
#iconFacebook {background-position: -66px -33px;} #iconFacebook:hover {background-position: -66px 0;}
#iconRSS {background-position: 0 -33px;} #iconRSS:hover {background-position: 0 0px;}
#iconYouTube {background-position: -99px -33px;} #iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus {background-position: -132px -33px;} #iconGooglePlus:hover {background-position: -132px 0;}
.ads67 {border: 1px solid gainsboro;border-right-style: none;border-left-style: none;}
</style>
<div class="gotsocial"> <span>
<div style='text-align: center'>
<a href="####" id="iconTwitter" target="_blank" title="Twitter:Сергей Загуляев">Twitter</a></div></span> <span><a href="####" id="iconFacebook" target="_blank" title="Facebook:Школа Blogger(а) ">Facebook</a></span> <span><a href="http://feeds.feedburner.com/####" id="iconRSS" target="_blank" title="RSS Feed: Школа Blogger(а) blog post feed">RSS</a></span> <span><a href="####" id="iconYouTube" target="_blank" title="YouTube Channel: Сергей на youtube">YouTube</a></span> <span><a href="####?rel=author" id="iconGooglePlus" target="_blank" title="Google Plus:Школа Blogger(а) ">Google</a></span> </div>

Социальные кнопки Twitter, Facebook, Google Plus со счетчиком для Blogger

Twitter, Facebook, Google Plus

Код кнопок со счетчиком:

<style type="text/css">
.container {
margin: 0px auto;
width: 300px;
text-align: center;
}
.share-btn {
display: inline-block;
vertical-align: top;
position: relative;
margin: 0 5px;
padding-top: 40px;
width: 75px;
font-weight: bold;
text-align: center;
text-decoration: none;
border-radius: 8px;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.share-btn:active {
margin-top: 3px;
}
.share-btn:active .share-btn-action {
padding-bottom: 3px;
-webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
}
.share-btn:active .share-btn-action:after {
bottom: 3px;
}
.share-btn-count {
position: absolute;
top: 0;
left: 0;
right: 0;
line-height: 40px;
font-size: 19px;
letter-spacing: -1px;
color: #555;
text-shadow: 0 1px white;
background: #e6eff5;
border-width: 1px 1px 0;
border-style: solid;
border-color: #c5c5c5 #bbb;
border-radius: 8px 8px 0 0;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
}
.share-btn-count:before, .share-btn-count:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border: 6px solid transparent;
border-top-color: #e6eff5;
}
.share-btn-count:before {
margin-left: -7px;
margin-top: 1px;
border-width: 7px;
border-top-color: rgba(0, 0, 0, 0.07);
}
.share-btn-action {
display: block;
position: relative;
line-height: 32px;
padding: 2px 0 6px;
font-size: 14px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
border: solid rgba(0, 0, 0, 0.18);
border-width: 0 1px;
border-radius: 0 0 8px 8px;
}
.share-btn-action:after {
content: '';
position: absolute;
top: 0;
bottom: 6px;
left: 0;
right: 0;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
}
.share-btn-tweet {
background: #83cfe8;
background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
}
.share-btn-tweet:after {
-webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
}
.share-btn-tweet + .share-btn-count {
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
}
.share-btn-like {
background: #6480bd;
background-image: -webkit-linear-gradient(top, #6480bd, #3c5894);
background-image: -moz-linear-gradient(top, #6480bd, #3c5894);
background-image: -o-linear-gradient(top, #6480bd, #3c5894);
background-image: linear-gradient(to bottom, #6480bd, #3c5894);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
}
.share-btn-plus {
background: #626262;
background-image: -webkit-linear-gradient(top, #626262, #404040);
background-image: -moz-linear-gradient(top, #626262, #404040);
background-image: -o-linear-gradient(top, #626262, #404040);
background-image: linear-gradient(to bottom, #626262, #404040);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
}
</style>
<div class="container">
<a href='####' rel='nofollow' target='_blank' title='Найти нас на twitter' class='share-btn'>
<span class="share-btn-action share-btn-tweet">twitter</span>
<span class="share-btn-count">4291+</span>
</a>
<a href='####' rel='nofollow' target='_blank' title='Найти нас на facebook' class='share-btn'>
<span class="share-btn-action share-btn-like">facebook</span>
<span class="share-btn-count">500+</span>
</a>
<a href="####" class="share-btn" target="_blank" rel="author" title='Найти нас на google+'>
<span class="share-btn-action share-btn-plus">google+</span>
<span class="share-btn-count">106+</span>
</a>
</div>

Дорогие друзья, здесь счетчик не автоматический, меняйте количество друзей в ручную. Удачи. Всем пока.

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

Обсуждение: 6 комментариев

Эдуард
04.06.2013 в 12:10
Можно ли убирать из кода какой-либо элемент социальной сети, если сайт в нем не представлен? Допустим, моего сайта нет на Youtube. Можно тогда в коде убрать этот элемент?
Ответить
1. Сергей
  04.06.2013 в 21:30
  Привет, Эдуард! Можно конечно.
  Ответить
  1. Эдуард
    05.06.2013 в 10:44
    Приветствую, Сергей, спасибо за ответ 🙂 Еще такой момент забыл спросить: можно ли вставлять свои социальные иконки в этот шаблон? Естественно, сперва залив сами иконки на хостинг.
    Ответить
    1. Сергей
      05.06.2013 в 11:48
      Привет, Эдуард! Конечно можно. Иконки всегда лучше держать на своём хостинге.
      Ответить
      1. Эдуард
        06.06.2013 в 09:29
        Привет, Сергей! Спасибо за подтверждение 🙂
      2. Сергей
        06.06.2013 в 11:58
        Пожалуйста,Эдуард!