Кнопки социальных сетей для Blogger (Blogspot)

Для начала пролистайте страничку в низ и посмотрите в конец сообщения. Что вы там увидели? Неужели кнопки соц сетей? Нравятся? Хотите поставить себе такие же? Давайте теперь разберемся как установить такие симпатичные и удобные кнопочки у себя в блоге.

Итак для начала нам нужно подобрать место где будут находиться наши кнопки. Естественно, по моему мнению, это в конце каждой статьи (Как у меня). Но для начала вам нужно убрать старые стандартные кнопки. Нам нужно что бы стандартные кнопки были включены, но их не было видно. Делается это так. Ищем вот такой код:

<b:include data='post' name='shareButtons'/>
</div>

и комментируем его, должно получиться вот так вот

Затем нам нужно добавить кнопка дизайн, случае это на половину прозрачность и полная видимость при наводе мышкой на кнопочку.
Находим строчку:
]]></b:skin>

И сразу перед ней вставляем вот такой код

.sharebuttons a img{
border: none;
opacity:0.5;
}
.sharebuttons a:hover img{
border: none;
opacity:1.0;
}
.sharebuttons img {
padding:0;
margin:0;
}

Далее находим вот этот код:
<div class='post-body entry-content'>
<data:post.body/>

И сразу после него вставляем вот этот код:

<b:if cond='data:blog.pageType == "item"'>
<div class='sharebuttons'>
Понравилась статья? Поделитесь ей с друзьями
<div align='center'>

<a class='shareme' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><img src='http://lh6.ggpht.com/_G92voTj-yF0/TLLOAEobABI/AAAAAAAAAsw/yJ6dutztXE0/blogger.png' style='border: 0pt none;' alt='в Blogger' title='Опубликовать в блоге' /></a>

<a class='shareme' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><img src='http://lh3.ggpht.com/_G92voTj-yF0/TLLOJdXH6XI/AAAAAAAAAtE/EUy4mKyVa5A/twitter.png' style='border: 0pt none;' alt='в Twitter' title='Написать в Twitter' /></a>

<a class='shareme' expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&title=" + data:post.title + "&srcURL=" + data:blog.homePageUrl + "&srcTitle=" + data:title' expr:onclick='"window.open(this.href, \"_blank\", \"height=390,width=710\"); return false;"' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh5.ggpht.com/_G92voTj-yF0/TLLOAQINkhI/AAAAAAAAAs4/8P7351Fd6VU/google.png' style='border: 0pt none;' alt='в Живую ленту' title='Написать в Живую Ленту' /></a>

<a class='shareme' expr:href='"http://vkontakte.ru/share.php?url=" + data:post.url' expr:onclick='"window.open(this.href, \"_blank\", \"height=500,width=710\"); return false;"' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh4.ggpht.com/_G92voTj-yF0/TLLOJlEHUjI/AAAAAAAAAtI/RcZxvCl0H-I/vkontakte.png' style='border: 0pt none;' alt='в Вконтакте' title='Опубликовать в ВКонтакте' /></a>

<a class='shareme' expr:href='"http://www.livejournal.com/update.bml?subject=Ссылка: " + data:post.title + "&event=" + data:post.title + ": " + data:post.url' expr:onclick='"window.open(this.href, \"_blank\"); return false;"' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh6.ggpht.com/_G92voTj-yF0/TLLOATbe0kI/AAAAAAAAAs8/l5eJU9ablaI/livejournal.png' style='border: 0pt none;' alt='в Живой Журнал' title='Опубликовать в ЖЖ' /></a>

<a class='shareme' expr:href='"http://connect.mail.ru/share?share_url=" + data:post.url ' expr:onclick='"window.open(this.href, \"_blank\", \"height=310,width=475\"); return false;"' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh3.ggpht.com/_G92voTj-yF0/TLLOJaVDgXI/AAAAAAAAAtA/Y5T0udcpaIg/mailru.png' style='border: 0pt none;' alt='в Мой мир' title='Опубликовать в Моем Мире' /></a>

<a class='shareme' expr:href='"http://my.ya.ru/posts_add_link.xml?title=" + data:post.title + "&URL=" + data:post.url' expr:onclick='"window.open(this.href, \"_blank\", \"height=500,width=900\"); return false;"' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh5.ggpht.com/_G92voTj-yF0/TLLOJt5sA7I/AAAAAAAAAtM/ZyG0Z_4zO2g/yandex.png' style='border: 0pt none;' alt='в Я.ру' title='Опубликовать в Я.ру' /></a>

<a class='shareme' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url ' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh3.ggpht.com/_G92voTj-yF0/TLLOAdHTWII/AAAAAAAAAs0/KNND56PuU7A/facebook.png' style='border: 0pt none;' alt='в Facebook' title='Опубликовать в Facebook' /></a>

<a class='addthis_button' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'><img alt='в закладки' src='http://lh6.ggpht.com/_G92voTj-yF0/TLLOAIhLM6I/AAAAAAAAAss/MHg_jrwXQ18/addthis.png' /></a>
<script type='text/javascript'>var addthis_config = {"data_track_clickback":true};</script>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=amateurbloger' type='text/javascript'/>
</div>
</div>
</b:if>

Сохраняете шаблон и любуетесь своими кнопочками!

Разделы: Blogspot

8 коммент.:

Hayk says:

20 декабря 2011 г. в 11:12

здравствуйте хороший блог
хочу чтобы вы рассказали Плавающих кнопках социальных сетей для Blogger

Req1em says:

20 декабря 2011 г. в 13:49

Если захотите убрать рамку поставьте border:none;

20 декабря 2011 г. в 13:54

Для того, что бы сделать их плавающими, добавьте перед "]]>"
следующий код

.sharebuttons {
background-color:none;
border:1px solid #C1CDCD;
left:1px;
top:170px;
margin-top:10px;
position:fixed;
width:64px;
}
.sharebuttons .float {
margin:7px;
}