Блок социальных кнопок в стиле Mashable на Blogger

среда, 20 октября 2010 г.
В наше время кнопки добавления в социальные закладки, сервисы или подписки стали для блогов просто обязательным атрибутом. Их польза и назначение больше ни у кого не вызывает сомнения, а главные дискуссии и отличие можно наблюдать лишь в способе размещения (оформления) данных кнопок. В данном блоге уже было несколько публикаций, посвященных кнопкам социальных закладок, надеюсь, уроки вам пригодились:
Теперь самое время рассказать о том как можно соединить воедино несколько этих элементов, причем сделать это весьма оригинальным образом. Нечто подобно реализовано на известном сайте Mashаble, когда вместе с прокруткой страницы блок социальных иконок также передвигается.



Согласитесь, очень удобно и компактно организовано. Что подобное не составляет труда повторить на Wordpress, потому что для этой платформы существуют специальные плагины для кнопок социальных закладок. С Blogspot все как обычно сложнее, тем не менее близкую по сути и форме секцию организовать можно и на нашей любимой платформе.

Вариант 1

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

Шаг1. Находим в верхней части кода ]]></b:skin> и перед ним добавляем стили оформления:
#sharebox {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:103px;
bottom:40px;
margin-top:10px;
position:fixed;
width:64px;
}

#sharebox .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px !important;
}

Шаг 2. Находим строку <div class='post-header-line-1' /> и вставляем после нее следующий фрагмент:

<b:if cond='data:blog.pageType ==  &quot;item&quot;'>
<div id='sharebox'>
<div class='float'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='float'><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'/><div class='clear'/></div>
<div class='float'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='float'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
</div>
</b:if>

В данном случае вы найдете кнопки добавления в социальную сеть tweetmeme, facebook, сервис Google Buzz, а также популярных на западе stumbleupon.

Вариант 2

Если описанный выше вариант вам по каким-то причинам не подходит, могу предложить вам еще один набор кнопок там немного другой и оформление тоже.




Шаг1. Как и в первом варианте находим ]]></b:skin>, но добавляем перед ним в этот раз другие стили:
.post_share{float:left;border:1px solid #DDD;margin-right:10px; top:215px; padding-top:10px;position:fixed;background:#FFF;margin-left:-80px; padding-bottom:10px;} .post_share .wdt_button{clear:left;margin:0}


Шаг 2. Находим блок похожий на <p><data:post.body/></p> (может быть без Р) и вставляем впереди данный фрагмент:
<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<div class='post_share'>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</center>
</div>
<div class='wdt_button'>
<center>

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' onClick='return buzzPopup(this, &apos;Buzz this&apos;)' rel='nofollow'><img src='http://2.bp.blogspot.com/_hrhg1n2KA3Y/S3Y8Gi87V8I/AAAAAAAADDc/xpLQ5jnX_Gk/s1600/g-buzz.png'/></a>
</center>
</div>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
scoopeo_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://scoopeo.com/clicker/insert/large' type='text/javascript'/>
</center>
</div>
<div class='wdt_button'>
<center>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</center>
</div> >
<div class='wdt_button'>
<center>
<span class='post-icons'>
          <!-- email post links -->
          <b:if cond='data:post.emailPostUrl'>
            <span class='item-action'>
              <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
                <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>Email
              </a>
            </span>
          </b:if>
          <!-- quickedit pencil -->
          <b:include data='post' name='postQuickEdit'/>
        </span>
</center>
</div>
</div>
</b:if>
Здесь кроме Tweetmeme, Google Buzz и Facebook найдете некий сервис scoopeo, а также возможность отправить ссылку на статью друзьям по почте.

Вообще, если вы внимательно посмотрите на приведенные примеры и разберете подробно хотя бы один из них, то добавлять любые кнопки социальных закладок и разных сервисов сможете самостоятельно. Коды для кнопок, как правило, находятся в самих сервисах. В обеих примерах разным было ли оформления блоков, которое также можно поменять под свои нужды с помощью CSS стилей.

P.S. Постовой. Если вы начинающий оптимизатор, то советую сходить на курсы СЕО и продвижения для улучшения своих навыков - +3(097)8535669, Киев.
Последнее интересное и прибыльное событие блогосферы - конкурс Bestmasterиzация для всех вебмастеров будет полезным.
Если вам надоел стандартный пляжный отдых, закажите себе туры в Китай и окунитесь в мир традиций, необычного окружения и восточной экзотики.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails