Гаджет вкладка со страничками социальных сетей для 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>

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

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


TEXT.RU - 100.00%




Автор статьи ✎ Olga Protasova Выпуск ✹ 11/07/2015 Ярлыки ►


Открыть комментарии →

2 коммент. :

  1. Ольга, оригинальное решение для экономии места. Спасибо за ссылочку.

    ОтветитьУдалить
  2. Пожалуйста Вика. Мне самой этот виджет нравится. Но в этом блоге убрала, причину написала в комменте в сообществе.

    ОтветитьУдалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *