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

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

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

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

socknopki — 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>

<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>

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

knopki_soc — 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>

<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>  <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

knopki_socialnyh_setej — 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>

#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>

<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

Schetchik_socseti — 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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

.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;

-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;

-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;

-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>

<span class="share-btn-action share-btn-tweet">twitter</span>

</a>

<span class="share-btn-action share-btn-like">facebook</span>

</a>

<span class="share-btn-action share-btn-plus">google+</span>

</a>

</div>

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

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

Как установить LinkWithin в Blogger - Видео

14.02.2017

Горизонтальное меню для Blogger c красивым эффектом

19.06.2013

Как оптимизировать показ рекламы AdSense

02.06.2013

Прямая ссылка на скачивание файла с Диск Google

23.03.2015

Pluso Share-красивые социальные кнопки для сайта

25.12.2013

Разработан плагин wpForGlass для Google Glass. Видео

19.12.2013

Эдуард

04.06.2013 at 12:10

Можно ли убирать из кода какой-либо элемент социальной сети, если сайт в нем не представлен? Допустим, моего сайта нет на Youtube. Можно тогда в коде убрать этот элемент?

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