Гаджет вкладка со страничками социальных сетей для blogger

---

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

Об этом виджете в своем блоге писала моя коллега Вика Барад. Получилось, что мы в одно время опубликовали похожую информацию, и потом даже обменялись ссылками на посты.

Код виджета с блога Вики (http://goo.gl/mdnVFP), я только убрала прокрутку, чтобы гаджеты страничек социальных сетей корректно отображались. Пример на скриншоте:

Виджет вкладка со страницами соц сетей

Скопируйте код и вставьте дизайн добавить гаджет в макет блога

<div class="gorizont">

  <input type="radio" name="vk" id="vk1" checked="checked"/>

  <label for="vk1">Twitter</label>

  <div><a class="twitter-timeline" data-dnt="true" href="https://twitter.com/violavasil_eva" data-widget-id="451015247420067842">Твиты пользователя @violavasil_eva</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>

  <input type="radio" name="vk" id="vk2"/>

  <label for="vk2">Facebook</label>

  <div><div class="fb-like-box" data-href="https://www.facebook.com/bdblogov" data-width="300" data-height="300" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div></div>

  <input type="radio" name="vk" id="vk3"/>

  <label for="vk3">Google+</label>

  <div> <div class="gplusbox"><div>

<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/+OlgaProtasova/posts" data-source="blogger:blog:followers" data-width="300">

</div></div>

СЮДА МОЖНО ВСТАВИТЬ КОД ВИДЖЕТА ВК

</div>

<style>.gorizont [name="vk"] { display: none; }

.gorizont > :not(input):not(label) {

  overflow: hidden;

  height: 0;

  margin: 0;

  padding: 2 .5em;

  border: 2px solid #1c8fce; // цвет и толщина рамки

  border-top-style: none;

  transition: .5s;

}

.gorizont > label {

  overflow: hidden;

  display: block;

  padding: .5em 1em;

  background:DarkCyan; //цвет фона вкладки

  color: #ffffff;

  white-space: nowrap;

  text-overflow: ellipsis;

  cursor: pointer;

}

.gorizont> :checked + label + * {  

  height: 310px;

}

.gorizont > :checked + label {

  background: # f00;

  cursor: default;

}</style></div></div>

Выделенное жирным шрифтом измените на свои настройки и вставьте коды виджетов страничек своих социальных сетей. Ширину виджетов на сайтах соц сетей устанавливайте по сайдбару. Можно добавить виджет ВКонтакте. Вместо строки в коде добавьте секцию:

 <input type="radio" name="vk" id="vk4"/>

  <label for="vk4">ВКонтакте</label>

  <div>Код виджета ВКонтакте</div>

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

Почитайте другие записи по теме

• Динамический RSS виджет заголовков сообщений с миниатюрами;
• Зафиксировать последний гаджет в сайдбаре блога blogspot;
• Разные виджеты для блога blogspot;
• Выпадающее меню для блога;
• Сделать текст активной ссылкой в гаджете blogger Создать почту интернета Microsoft Outlook.com;