И снова кнопки соцсетей.

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

Устанавливаются они достаточно просто через гаджет HTML/JavaScript.
Мы уже знакомились с вариантами, какие кнопки соцсетей выбрать

Вот такие блоки кнопок, которые вы можете посмотреть здесь , удачно впишутся в дизайн блога .

 Если захотелось поставить их у себя, код для обеих вариантов ниже.

1 вариант кнопки, которые всегда будут перед читателем, эдакий плавающий виджет
вот его код-

<style>
#sharebar {position:fixed; bottom:25%; margin-left:-71px; float:left;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#434242;pa
dding:0 0 2px 0;z-index:10;right:0;}
#sharebar .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important;
-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px
!important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div>
<div id="sharebar">

<div class="sbutton" id="rt">
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script>
</div>
<div class="sbutton" id="plusone">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;}
</script>
<g:plusone size="Tall" expr:href="data:post.url">
</g:plusone>
</div>
<div class="sbutton" id="fb">
<a href="http://www.facebook.com/sharer.php" name="fb_share"
type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
</div>
<div class="sbutton" id="VK">
<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?11"
charset="windows-1251"></script>

<!-- Put this script tag to the place, where the Share button will be -->
<script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "round_nocount", text: "V.K."}));
--></script>
</div>
<div class="sbutton" id="Ya">
<a counter="yes" type="icon" size="large" name="ya-share">Â </a><script charset="utf-8"
type="text/javascript">if (window.Ya && window.Ya.Share) {Ya.Share.update();} else
{(function(){if(!window.Ya) { window.Ya = {} };Ya.STATIC_BASE =
'http:\/\/yandex.st\/wow\/2.0.176\/static';Ya.START_BASE = 'http:\/\/my.ya.ru\/';var shareScript =
document.createElement("script");shareScript.type = "text/javascript";shareScript.async =
"true";shareScript.charset = "utf-8";shareScript.src = Ya.STATIC_BASE +
"/js/api/Share.js";(document.getElementsByTagName("head")[0] ||
document.body).appendChild(shareScript);})();}</script>
</div>
</div>
</div>

То , что в коде выделено красным это размер. Меняйте на тот, который подходит для вас. Синим, соответственно их место на блоге - справа или слева. Ну и зелёным - это фон всего блока.

2 вариант - весёлые прыгающие кнопочки , которые  очень красиво будут смотреться на любом блоге. Как они работают тоже смотрим на тестовом блоге (ссылка выше).
Вот код для них.

<style>.socialsharing a { display:block; height:50px;width:50px;padding:0 4px;float:left; background:transparent url(http://4.bp.blogspot.com/-UTkPtPsw9bY/UKRoAPEVZ9I/AAAAAAAAFnM/qDPvUxpNfqM/s1600/Sharing+buttons.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; } .socialsharing a.googleplus { background-position: 0px -58px; } .socialsharing a.googleplus:hover { background-position: 0px 0px; } .socialsharing a.twitter { background-position: 0px -290px; } .socialsharing a.twitter:hover { background-position: 0px -232px; } .socialsharing a.facebook { background-position: 0px -406px; } .socialsharing a.facebook:hover { background-position: 0px -348px; } .socialsharing a.rss { background-position: 0px -174px; } .socialsharing a.rss:hover { background-position: 0px -116px; } </style>

 <div class="socialsharing"> <a class="rss" href="####" rel="external nofollow" target="_blank"></a> <a class="googleplus" href="####" rel="external nofollow" target="_blank"></a> <a class="facebook" href="####" rel="external nofollow" target="_blank"></a> <a class="twitter" href="####" rel="external nofollow" target="_blank"></a> </div >

Всё то, что выделено красным нужно заменить на своё-

1-адрес вашего фида.
2-адрес вашей страницы googleplus.
3-адрес страницы в facebook.
4-адрес страницы в twitter.

Вот и всё. Кнопки готовы. Вставляйте в нужное место блога и любуйтесь.


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

введите пожалуйста свой email :

7 комментариев:

  1. кнопочки сегодня нашим сайтам очень помогают но ленятся люди на них нажимать.

    ОтветитьУдалить
  2. Спасибо,спасибо!!!Они мне были так нужны . но везде так сложно ,а оказалось очень просто.С праздником Вас!

    ОтветитьУдалить
  3. А, как сделать чтоб эти кнопки были в конце каждой статьи ?

    ОтветитьУдалить
  4. madonna4ka может и не ленятся. Забывают.

    ОтветитьУдалить
  5. Оксана, с праздником Вас. А насчёт кнопочек ещё здесь посмотрите http://hpargallka.blogspot.ru/2014/01/kakie-knopki-socsetej-vybrat.html. Советую поставить от Яндекс.

    ОтветитьУдалить
  6. Привет, вопрос есть! Вы устанавливаете кнопки после каждой статьи вручную ?

    ОтветитьУдалить
    Ответы
    1. Рамазан, в этом блоге да. А вот если они от Share или Pluso то лучше в шаблоне после тогда ничего ручками не надо делать

      Удалить

Пользовательский поиск
Foto Saya
My Photo