Google+ Боковые кнопки социальных сетей для блога : Бизнес-центр Татьяны Ошариной

 

▼ Создание блога на Blogger

Практический тренинг


 

      ▼ Создай страницу подписки!         

Практический

тренинг


 

▼ Школа-студия «Вдохновение»  

Регистрация


 

▼ Как создать сайт на WordPress?

Практический

тренинг


 

10.01.2016

Боковые кнопки социальных сетей для блога

Боковые кнопки социальных сетей для блога
По просьбе участников тренинга «Создание блога на блогер» расскажу о гаджете кнопок социальных сетей, расположенных справа от блога, с эффектом открывания при наведении на них курсором мышки.

Это не просто боковые кнопки социальных сетей, а формы подписки на страницу ВКОНТАКТЕ, на новостную ленту Твиттер и на страницу в Google+.

Интересно?

Кнопки социальных сетей для блога


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

Как установить кнопки социальных сетей, выплывающие при наведении на них курсором?

Боковые кнопки социальных сетей для блога


В административной панели блога блоггер, в разделе «Дизайн» добавляем на нижнюю панель блога – футер гаджет «HTML-кода и на JavaScript».

Заголовок не пишем, а в содержание гаджета вставляем следующий код HTML-код-код:


БОКОВЫЕ КНОПКИ СОЦ. СЕТЕЙ
<style> img,a { border: 0;} #on { visibility: visible;} #off { visibility: hidden;} #facebook_div { width: 196px; height: 340px; overflow: hidden;} #twitter_div { width: 246px; height: 353px; overflow: hidden;} #google_plus_div { width: 152px; height: 97px; overflow: hidden; margin-left: 50px; margin-top: 10px;} #knfeedburner_div { width: 300px; height: 97px; overflow: hidden; margin-top: 5px; margin-left: -4px;} #kakinetwork_div { width: 300px; height: 97px; overflow: hidden; }/* right side style */#facebook_right { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 196px; height: 353px; position: fixed; right: -200px;} #facebook_right img { position: absolute; top: -2px; left: -35px;} #facebook_right iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 360px; left: -2px; top: -3px;} #twitter_right { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 353px; position: fixed; right: -250px;} #twitter_right_img { position: absolute; top: -2px; left: -35px; border: 0;} #google_plus_right { z-index: 10003; background-color: #F2F2F2; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-right: 2px solid #0056a0; border-left: hidden; width: 152px; height: 97px; position: fixed; right: -154px;} #google_plus_right_img { position: absolute; top: -2px; left: -33px; border: 0;} #feedburner_right { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right: 2px solid #5b5b5b; border-left: hidden; width: 300px; height: 97px; position: fixed; right: -303px;} #feedburner_right_img { position: absolute; top: -2px; left: -33px; border: 0;} #kakinetwork_right { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed;} #kakinetwork_right img { position: absolute; top: -2px; left: -101px; }/* left side style */#facebook_left { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 196px; height: 353px; position: fixed; left: -200px;} #facebook_left img { position: absolute; top: -2px; right: -35px;} #facebook_left iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 360px; right: -2px; top: -3px;} #twitter_left { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 353px; position: fixed; left: -250px;} #twitter_left_img { position: absolute; top: -2px; right: -35px; border: 0;} #google_plus_left { z-index: 10003; background-color: #006ec9; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-left: 2px solid #0056a0; border-right: hidden; width: 152px; height: 97px; position: fixed; left: -154px;} #google_plus_left_img { position: absolute; top: -2px; right: -33px; border: 0;} #feedburner_left { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-left: 2px solid #5b5b5b; border-right: hidden; width: 300px; height: 97px; position: fixed; left: -303px;} #feedburner_left_img { position: absolute; top: -2px; right: -33px; border: 0;} #kakinetwork_left { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed;} #kakinetwork_left img { position: absolute; top: -2px; right: -101px;} .box-title1 { border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; /*box-shadow*/ -webkit-box-shadow: 5px 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px 5px #CCCCCC; box-shadow: 5px 5px 5px #CCCCCC; padding: 10px; margin: 10px 0;} .enteryouremail { background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0px;} .submitbutton { background: #F2F2F2; border: 1px solid #F66303; /*box-shadow*/ -webkit-box-shadow: 3px 3px 3px #666; box-shadow: 3px 3px 3px #666; font: bold 12px Arial, sans-serif; color: #000000; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; /*border-radius*/ -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer;} </style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script> <div id="on"> <div id="facebook_right" style="top: 18%;"> <div id="facebook_div"> <img src="http://img-fotki.yandex.ru/get/9833/61590320.2/0_e7a67_5c15c633_S.png" alt=""/> <script type="text/javascript" src="//vk.com/js/api/openapi.js?121"></script>

<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 56887998);
</script>
</div> </div> </div> <div id="on"> <div id="twitter_right" style="top: 35%;"> <div id="twitter_div"> <img id="twitter_right_img" src="http://2.bp.blogspot.com/-ggLNgeprfJo/T_CUf8BMk8I/AAAAAAAABuk/f38udn9GKo4/s1600/twitter-icon.png"/> 
<a class="twitter-timeline" href="https://twitter.com/TIOsharina" data-widget-id="513577829376610304">Твиты от @TIOsharina</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> </div> </div> <div id="on"> <div id="google_plus_right" style="top: 52%;"> <div id="google_plus_div"> <img id="google_plus_right_img" src="http://1.bp.blogspot.com/-zwfLV74trKg/T_CUcBJIkVI/AAAAAAAABuU/LVVwVCRESpI/s1600/google-plus-icon.png"/> <div style="float:left;margin:10px 10px 10px 0;"> <g:plusone size="tall" expr:href="data:post.url"></g:plusone> </div> </div> 
</div></div>

Но..., ВНИМАНИЕ!!!!!


Прежде, чем установить В HTML-код-код, его необходимо отредактировать.
Во-первых, создать В HTML-код-код своей страницы ВКОНТАКТЕ.

Для этого заходим по ссылке протокол Протокол https://vk.com/dev.php?method=Community и создаём гаджет страницы для своего блога.

боковые кнопки социальных сетей для блога


В окно «Ссылка на страницу» ставим ссылку на свою страницу ВКОНТАКТЕ.

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

Во-вторых, мы идём в социальную сеть Твиттер и создаём новостную ленту в Твиттере.

Для этого нажимаем на свою фотографию на верхней панели настроек, открываем «Настройки», нажимаем вкладку «Виджеты», а далее - «Создать».

Боковые кнопки социальных сетей для блога


Выбираем виджет «Лента новостей», редактируем высоту виджета и под образцом копируем его в HTML-код виджета ленты новостей от Твиттер.

Боковые кнопки социальных сетей для блога

В Полученный код вставляем наш код всплывающих кнопок социальных сетей, вместо кода, выделенного красным цветом.

Редактирование в формате HTML-кода закончено.

Теперь его нужно установить на блог в разделе «Дизайн» на нижнюю панель блога, в футер гаджетом «в HTML и код JavaScript».

Посмотрите на моём блоге, как работают боковые кнопки социальных сетей и не забудьте подписаться!

Поставьте боковые кнопки социальных сетей на свой блог!

Посмотрите и другие статьи по этой теме:




Подписывайтесь на обновления! Введите свой адрес электронной почты





2 комментария :

  1. Интересная идея расположение боковых кнопок социальных сетей на блоге.Буду использовать на своем блоге, чтоб заинтересованные читатели сразу заходили в гости.

    ОтветитьУдалить
    Ответы
    1. Евгения, Вам удалось поставить этот интересный гаджет - боковые кнопки социальных сетей?

      Удалить