Мы ВКонтакте
RSS
Мой Blogger

Русские социальные кнопки для Blogger для "чайников"

русские социальные кнопки
Так как сам я ни разу ни программист, то и попытался описать алгоритм для установки социальных кнопок для Blogger для таких же как я, новичков и "чайников"." В процессе установки кнопок у меня возникло  несколько вопросов и сложностей, здесь я хочу опубликовать пошаговую инструкцию с иллюстрациями последовательности действий. Так что справиться с этим сможет любой, кто умеет работать в ms worde. Дерзайте)))


В создание этих кнопочек мне очень помог пост seorussian'a Я лишь немного изменил анимацию кнопок и сделал так, чтобы перепост открывался в специальном окне. Как мне кажется так удобнее для читателей.


Итак первое:
Открываем в соседней вкладке браузера окно вашего блога http://ВАШБЛОГ.blogspot.com/

Второе:
Переходим во вкладку вашего блога. Пвами основное окно вашего блога, ищем и жмем слово "Дизайн" 

Третье:

Ищем "Изменить-HTML" и жмем:













Четвертое:

В появившемся окне ищем: место для галочки и надпись"Расширить шаблон виджета"  и собственно ставим саму галочку:
  











Пятое:

Жмем сочетание клавиш CTRL+F, тем самым вызываем строку поиска и вводим в нее <data:post.body/> тем самым поиск браузера сам находит нужную строчку в коде. После этой строки нужно вставить код кнопочек. Делается это как с кусочком текста в обычном текстовом редакторе.


Шестое:


Переходим во вкладку браузера с моим постом, выделяем курсором весь код и копируем в буфер обмена. (к примеру сочетанием клавиш CTRL+C)

Собственно тот самый код что нужно скопировать:


<b:if cond='data:blog.pageType == &quot;item&quot;'><noindex><div class='sharebuttons'><span style='color: #999999;'><b>Понравилось? опубликуй у себя:</b></span>
    <div align='right'><p>

    <a class='shareme' expr:href='&quot;http://www.livejournal.com/update.bml?subject=Ссылка: &quot; + data:post.title + &quot;&amp;event=&quot; + data:post.title + &quot;: &quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow'><img alt='livejournal' src='http://lh5.ggpht.com/_9McH3vV50bQ/TIThzV8_g2I/AAAAAAAAAD4/slNqi6iGI50/lj.png' style='border: 0pt none;' title='поделиться в livejournal'/></a>

    <a class='shareme' expr:href='&quot;http://vkontakte.ru/share.php?url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow'><img alt='ВКонтакте' src='http://lh4.ggpht.com/_9McH3vV50bQ/TITiDFjnmgI/AAAAAAAAAEI/nC74WlCV8HI/vkontakte.png' style='border: 0pt none;' title='Поделиться в ВКонтакте'/></a>

    <a class='shareme' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url ' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow'><img alt='Facebook' src='http://lh6.ggpht.com/_9McH3vV50bQ/TIThzB5BY7I/AAAAAAAAAD0/-xPjJ89UjdY/facebook.png' style='border: 0pt none;' title='Поделиться в Facebook'/></a>

    <a expr:href='&quot;http://www.blogger.com/blog_this.pyra?t&quot; + &quot;&amp;u=&quot; + data:post.url + &quot;&amp;n=&quot; + data:post.title + &quot;&amp;pli=&quot; + 1' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow' target='_blank' title='Поделиться в Blogger!'><img alt='Блоггер' src='http://lh3.ggpht.com/_9McH3vV50bQ/TIThy61TTfI/AAAAAAAAADs/OpMw31LGf1Y/blogger.png' style='border: 0pt none;' title='Поделиться в Blogger!'/></a>

    <a class='shareme' expr:href='&quot;http://connect.mail.ru/share?share_url=&quot; + data:post.url ' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow'><img alt='Мой Мир' src='http://lh6.ggpht.com/_9McH3vV50bQ/TIThzRPQJSI/AAAAAAAAAD8/xGTFLwC86DE/mymail.png' style='border: 0pt none;' title='Поделиться в Мой Мир'/></a>

    <a class='shareme' expr:href='&quot;http://my.ya.ru/posts_add_link.xml?title=&quot; + data:post.title + &quot;&amp;URL=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow'><img alt='Мой Круг' src='http://lh6.ggpht.com/_9McH3vV50bQ/TITh9S3gvjI/AAAAAAAAAEE/v6nyg8dD_S0/ya_ru.png' style='border: 0pt none;' title='Поделиться в Моем Круге'/></a>

    <a class='shareme' expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcURL=&quot; + data:blog.homePageUrl + &quot;&amp;srcTitle=&quot; + data:title' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow'><img alt='Google Buzz' src='http://lh3.ggpht.com/_9McH3vV50bQ/TIThy_zjaQI/AAAAAAAAADw/_hkPrQqgh9k/buzz.png' style='border: 0pt none;' title='Поделиться в Google Buzz'/></a>

    <a class='shareme' expr:href='&quot;http://twitter.com/home?status=RT @ваш_ник_в_твиттере + &quot; + data:post.url + &quot; &quot; + data:post.title' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow'><img alt='Twitter' src='http://lh5.ggpht.com/_9McH3vV50bQ/TITh9bMPTxI/AAAAAAAAAEA/oejWvSqEARc/twitter.png' style='border: 0pt none;' title='Поделиться в Twitter'/></a><br/>

    <a href='http://idplaceru.blogspot.com/2010/09/blog-post_06.html' rel='nofollow'><img alt='хочешь такие же кнопочки' src='PICTURE' style='border: 0pt none;' title='Хочешь добавить себе социальные кнопки?'/></a>

    </p></div></div></noindex></b:if>

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

Здесь все готово к работе, за исключением того, что надо вписать ваш ник в Twittere вместо соответственно окрашенного текста


Седьмое:

Скопировав код в буфер, переходим обратно во вкладку с вашим блогом, ставим курсор после <data:post.body/> и нажимаем три раза ENTER и один раз стрелку вверх (это нужно чтобы в дальнейшем проще ориентироваться в коде страницы) теперь вставляем код из буфера (к примеру сочетания клавиш CTRL+V).


Восьмое:
  
Чтобы незалогиненый в Я.ру пользователь при нажатии на вашу кнопку вначале попадал на страницу с предложением залогиниться - вставьте себе в код перед тегом </head> следующий java-скрипт, который придумал sovety. Для этого Жмем еще раз сочетание клавиш CTRL+F, и в строку поиска и вводим </head> Поиск браузера снова помогает нам найти нужную нужную строчку в коде.

Девятое: 

Переходим во вкладку браузера с моим постом, выделяем курсором весь код и копируем в буфер обмена. (к примеру сочетанием клавиш CTRL+C)

Собственно тот самый код что нужно скопировать:

<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&amp;retpath=" + escape(this.href);
  });
});
</script>

Десятое:

Скопировав код в буфер, переходим обратно во вкладку с вашим блогом, ставим курсор - ВНИМАТЕЛЬНО, ТЕПЕРЬ ДО </head> и нажимаем три раза ENTER и один раз стрелку вверх (это нужно чтобы в дальнейшем проще ориентироваться в коде страницы) теперь вставляем код из буфера (к примеру сочетания клавиш CTRL+V).

Нажимаем СОХРАНИТЬ ШАБЛОН











На этом работа с изменением html-кода страницы закончены. 

Одиннадцатое:

Прокручиваем страницу на верх и нажимаем "Дизайнер шаблонов"










Двенадцатое:
 

Ищем вкладку "Дополнительно" и жмем ее















Тринадцатое:

Проматываем линейку прокрутки до появления "Добавить CSS" и жмем ее






















Четырнадцатое:

Чтобы кнопки немного "ожили" и меняли цвет при наведении на них - вставьте в свой CSS следующий код, придуманный artinblog
Переходим во вкладку браузера с моим постом, выделяем курсором весь код и копируем в буфер обмена. (к примеру сочетанием клавиш CTRL+C)

Собственно тот самый код что нужно скопировать:


.sharebuttons{
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% */
}


Пятнадцатое:

Скопировав код в буфер, переходим обратно во вкладку с вашим блогом, ставим курсор - и вставляем вставляем код из буфера в свободное поле (к примеру сочетания клавиш CTRL+V). После втавки нажимаем "Применить к блогу"













Шестнадцатое:

Собственно все, можно нажимать "Посмотреть блог" и наслаждаться кнопочками.

Еще раз спасибо seorussian  sovety  и  artinblog

Друзья, теперь вы можете читать и комментировать мои записи и на Я.ру — sa_ Mut!



Понравилось? опубликуй у себя:

livejournal ВКонтакте Facebook Блоггер Мой Мир Мой Круг Google Buzz Twitter

хочешь такие же кнопочки

0 коммент.:



 

Инфо бюллетень

Архив

Постоянные читатели