Здравствуйте друзья, читатели и гости. Недавно я писала пост о виджете вкладке для боковых панелей со ссылками на полезную информацию. Последнее время многие читатели спрашивают у меня о виджете вкладке со страницами социальных сетей. Гаджет этот установлен у меня в демо блоге внизу в сайдбаре.
Об этом виджете в своем блоге писала моя коллега Вика Барад. Получилось, что мы в одно время опубликовали похожую информацию, и потом даже обменялись ссылками на посты.
Код виджета с блога Вики (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>
На все вопросы по настройке и установке виджета отвечу в комментариях. Спасибо, что делитесь с друзьями в социальных сетях. Всем всего доброго.
Почитайте другие записи по теме
Ольга, оригинальное решение для экономии места. Спасибо за ссылочку.
ОтветитьУдалитьПожалуйста Вика. Мне самой этот виджет нравится. Но в этом блоге убрала, причину написала в комменте в сообществе.
ОтветитьУдалить