Как установить кнопки социальных сетей в блоги на платформе блогспот (blogspot, blogger)
Никому уже не секрет, что с помощью социальных сетей можно получить очень приличный трафик на свой блог или любой другой интернет-ресурс, а там где трафик, там и заработок в интернете! Но как этим воспользоваться, спросите Вы!? Что бы это занимало минимум времени и было эффективно!? Выход есть - это установка на своём блоге или сайте кнопок социальных сетей!
Вот такие красивые кнопки установлены у меня на блоге:
Сейчас мы разберёмся как это сделать новичку!
Итак, в самом блоспоте уже имеются некоторые кнопки социальных сетей: В контакте, Фэйсбук и др. Но нам этого недостаточно! Поэтому проделываем следующие действия:
1. Заходим в настроить, изменить HTML, ставим птичку в поле расширить шаблон виджета.2. Ищем через поиск (Ctrl + F) следующий код:
и делаем его таким: Это необходимо сделать для того, чтобы стандартные кнопки блогспоты скрылись, но не пропали навсегда. Вы можете их в любое время вернуть обратно.
3. С помощью CTRL+F ищем . После этого кода нужно вставить код кнопок. Копируем и вставляем код:
<div align='right'><p>
<noindex><!-- Place this tag in your head or just before your close body tag -->
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'ru'}
</script>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone/></noindex>
<noindex><a class='twitter-share-button' data-count='horizontal' data-lang='ru' data-via='Valera7120180' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></noindex>
<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\", \"height=430,width=640\"); return false;"' rel='nofollow'><img alt='livejournal' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD7AeJD2iOHyzBgxcEgEImp6krsJc0629jwUMhbHhH-W97FzkgSNezz3CGdS1oRtUlA_KIV51ub5mvIuZ2BDxVQvHdUR1qpOox40J-1iowTSfd_1I016fK_xai_wQjzTbC3Dz9sJTjp5w/' style='border: 0pt none;' title='поделиться в livejournal'/></a>
<a class='shareme' expr:href='"http://vkontakte.ru/share.php?url=" + data:post.url' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' rel='nofollow'><img alt='ВКонтакте' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy9BIMkeQGVTRYK79knqck_9kzH_SyX4ta8sz-LiCJrhYTu4MQ4OqHWYp3OwB0dPWnDhxbh8rwEYDW33o3YaywqQzxKvDhkuf6KRasUX3AB5r7hu0a4PyTmqeamaG_uK2nKNVoOYdel_s/' style='border: 0pt none;' 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=430,width=640\"); return false;"' rel='nofollow'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_LPvdbnSpNFNotVfcyuy9eAiF51B_T3Ud7ldmmh_hkYntnAO_1li_gMk7KFgx5a4xZ_dcWIMgx3_aqEeLcaozjI2duxyEQD30MjF6mDMJlCHAHzQuhVUVLxdh_zu5i9IUVPknLNEn7EQ/' style='border: 0pt none;' title='Поделиться в Facebook'/></a>
<a expr:href='"http://www.blogger.com/blog_this.pyra?t" + "&u=" + data:post.url + "&n=" + data:post.title + "&pli=" + 1' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' rel='nofollow' target='_blank' title='Поделиться в Blogger!'><img alt='Блоггер' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdTCXmKvmvMdDbtSx6WFd8LlPrU5afMJKDMXBi9tES5gJdv5DMtl70nR14h0apmMCyW2h2rN2z77GAzXRsqwC4fewZaoAiLeYUfL-vHgbBR12bpjlOKa92X1SH7q64nv22sLklTMQroBc/' style='border: 0pt none;' title='Поделиться в Blogger!'/></a>
<a class='shareme' expr:href='"http://connect.mail.ru/share?share_url=" + data:post.url ' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' rel='nofollow'><img alt='Мой Мир' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5lW7xoxQT-mpwwhS1P-_zRQ6c8o1nTRrmnk4LBnXR7YS3T5L9XeML_0c9lgsRnquoOmGOZpmyvTwZEWbnBbDcE0Y4clk72tS2V413JHbN-oj3p8vbBNjSmQgoiK9BT0e_j_Xpc9xR1OA/' style='border: 0pt none;' 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=430,width=640\"); return false;"' rel='nofollow'><img alt='Мой Круг' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizpZjhyQt74oj1LHijdta2UQTIZGRsiTEF2BKUgODOQHvq25csDk_PbBEXEmipTqhonw-q_Dydb3-jsCqGq7oRMttbcx6UT31A1PDywHOllZijJhG5NCBQyRPyTLcd31aodXs55yXhg3g/' style='border: 0pt none;' title='Поделиться в Моем Круге'/></a>
</p></div></div></noindex></b:if>
<script type="text/javascript">
$(document).ready(function() {
$("a.shareme[href^='http://my.ya.ru']").attr("href", function() {
return "http://passport.yandex.ru/passport?mode=auth&retpath=" + escape(this.href);
});
});
</script>
7. Сохраняем шаблон и переходим в "Дизайнер шаблонов"
8. Ищем вкладку "Дополнительно" и жмем на нее
9. Нажимаем "
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.shareme[href^='http://my.ya.ru']").attr("href", function() {
return "http://passport.yandex.ru/passport?mode=auth&retpath=" + escape(this.href);
});
});
</script>
font-size: 13px; /* размер шрифта */
font-weight: bold; /* стиль текста: жирный */
padding:5px; /* отступ от границ */
border: none; /* толщина и цвет рамки */
background: #FFFFFF; /* фоновый цвет */
}
.sharebuttons a img{
border: none;
opacity:0.3; /* непрозрачность: 30% */
}
.sharebuttons a:hover img{
border: none;
opacity:1.0; /* непрозрачность: 100% */
}
Здравствуйте! У меня все зависло на пункте 2, не находит код, может, что-то изменилось к 2013г. Подскажите.
ОтветитьУдалитьСейчас перепишу статью! Нашел новые способы установки кнопок социальных сетей в блоги от блогспот!
ОтветитьУдалить