Блок кнопок поделиться в социальных сетях BLOGGER

Доброго времени суток. Яркие и "живые" кнопки социальных сетей для вашего блога. При наведении курсора на окно кнопки, оно сдвигается или раскрывается. При этом будет появляться число, отображающее количество лайков и репостов. И ещё есть кнопка печати страницы. Прекрасно размещаются над сообщениями блога или под ними. Всегда на самом виду у ваших посетителей. 

Вот так красиво они выглядят на странице. Рабочий вариант здесь.

Установка всего в 2 шага.

1. Сначала установим код js для twitter, linkedin, facebook непосредственно в теме (шаблоне блога). Вкладка тема - изменить HTML. Находим закрывающийся тег </body> и над ним вставляем код приведённый ниже.

<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script async='async' src='//platform.linkedin.com/in.js' type='text/javascript'/>
<script type='text/javascript'>
  (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);
  })();
</script>
<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async=true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Сохраните шаблон. Далее всё по вполне стандартному сценарию. Копируйте следующий код и устанавливайте его в гаджет HTML/ JavaScript без всяких изменений и дополнений. Расположите их где - нибудь над сообщениями или внизу блога.

весь код

<style>
.sharing-post{margin:20px 0;overflow: hidden;}
.entry-social{overflow: hidden;}
.entry-social a{display: block;padding:0px;color: #FFFFFF !important;font-weight: 300;font-size:12px;}
.entry-social div{float: left;margin-right: 5px;width:95px;background-color: #ccc;margin-top:5px;transition:all .4s ease-in-out;position:relative}
.entry-social .title-sharing-post{padding:0 7px;width:130px;height:30px;line-height:30px;font-size:16px;font-family: &#39;Trebuchet MS&#39;, sans-serif;font-weight:400;text-transform:uppercase;border-bottom:4px solid #333}
.entry-social .fb{background-color: #324b81;padding: 0 7px;width:130px;height:34px;line-height:34px;}
.entry-social .twitter,.entry-social .gplus{padding: 0 7px;height:34px;line-height:34px;}
.entry-social .twitter{background-color: #01A7dE;}
.entry-social .gplus{background-color: #BA3227;}
.entry-social .linkedin{background-color: #136F9B;padding: 0 7px;;height:34px;line-height:34px;}
.entry-social div.pinterest{width:109px;height:34px;line-height:34px;}
.entry-social div.pinterest img{margin-top:-1px;vertical-align:middle}
.entry-social .pinterest a{background-color: #B01C23;padding:0 7px}
.entry-social div.printblog{width:35px;height:30px;border-bottom:4px solid #333}
.entry-social .printblog a{padding: 7px 7px 4px 9px;transition:all 0.4s ease-in-out}
.entry-social .printblog a:hover{background-color: #333;}
.slide-share{background:#ccc;z-index:2;left:0;top:0;right:0;bottom:0;position:absolute;text-align:center;line-height:7px;color:#333;transition:all 0.4s ease-in-out;height:30px;cursor:pointer}
.entry-social .fb:hover .slide-share,.entry-social .twitter:hover .slide-share,.entry-social .gplus:hover .slide-share,.entry-social .linkedin:hover .slide-share,.entry-social .pinterest:hover .slide-share{left:140px;opacity:0}</style>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharing-post'>
<div class='entry-social'>
<div class='title-sharing-post'>Поделиться :</div>
<div class='fb'>
<span class='slide-share'>
<p>Facebook</p>
</span>
<span style='position:absolute;top:-7px;'>
<span class='fb-like' data-layout='button_count' data-send='true' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
</span>
  </span></div>
<div class='twitter'>
<span class='slide-share'>
<p>Twitter</p>
</span>
<span style='position:absolute;top:5px;'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
</span>
  </div>
<div class='gplus'>
<span class='slide-share'>
<p>Google+</p>
</span>
<span style='position:absolute;top:5px;'>
<span class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'>
</span>
</span>
  </div>
<div class='linkedin'>
<span class='slide-share'>
<p>Linkedin</p>
</span>
<span style='position:absolute;top:7px;'>
<script expr:data-url='data:post.url' type='IN/Share'></script>
</span>
  </div>
<div class='pinterest'>
<span class='slide-share'>
<p>Pinterest</p>
</span>
<a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=pinterest&quot;' rel='nofollow' target='_blank' title='Pin It'><img alt='pinit' height='21' src='http://2.bp.blogspot.com/-GBohPdcIzF8/U_mMASBohHI/AAAAAAAAde8/ugBc_zbc6Fo/s1600/PinExt.png' title='Pin It' width='43'/></a>
</div>
<div class='printblog'>
<a href='javascript:print(document)' title='Print This Blog'><img alt='print' height='16' src='http://1.bp.blogspot.com/-10ufvnCtIJM/UPo6JsA2VOI/AAAAAAAAVUY/MV8Pa2Kr7yI/s1600/iconprinter.png' title='Print This Page' width='16'/></a>
</div>
</div>
</div>
  <div style='clear:both'/>
</div></b:if>

Красивые и яркие кнопочки социальных сетей не оставят себя без внимания. Каждый сможет рекламировать и поделиться с друзьями понравившейся информацией. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email