Сообщений в теме: 23

[Сергей Иванов]

Можно ли сделать боковые виджеты соц сетей, как это реализовано в шаблоне "Лазурь"
Нужны виджеты: вк, фэйсбук, инстаграм

[Vaccina]

В шаблоне HTML до тега </body> вставьте:

<!-- Виджет сообществ -->
	<div id="community_widget_right">
	  <div class="community-widget">
		<span class="community-widget-button"><i class="fa fa-vk"></i></span>
		<div class="community-widget-content">
		
		ЗДЕСЬ ПРОПИШИТЕ КОД ВИДЖЕТА
		</div>
	  </div>
	</div>

далее в конце main.js пропишите:

// Виджеты групп в правой части
$(document).ready(function(){
  $i=0;
  $('#community_widget_right .community-widget').each(function(){
	$(this).css({
	'right' : - $(this).outerWidth(),
	'top' : 100 + $i*60
	});
	$i++;
	$(this).mouseenter(function(el){
	  $(this).stop().animate({
		'right':'0px',
		'z-index':'999'
	  }, 600);
	}).mouseleave(function(el){
	  $(this).stop().animate({
		'right': - $(this).outerWidth(),
		'z-index':'998'
	  }, 600);
	});
  });
});

в main.css:

/* Виджет сообществ */
.community-widget {width: 260px;background: #FFF;padding: 0px;z-index: 998;border: 1px solid #cecece;border-right: none;position: fixed;right: 0px;top: 100px;-webkit-border-radius: 0 0 0 8px;-moz-border-radius: 0 0 0 8px;border-radius: 0 0 0 8px;}
.community-widget .community-widget-button {position: absolute;top: -1px;right: 100%;height: 50px;width: 50px;font-size: 20px;cursor: pointer;line-height: 46px;background: #fff;text-align: center;border: 1px solid #ddd;-webkit-border-radius: 8px 0 0 8px;-moz-border-radius: 8px 0 0 8px;border-radius: 8px 0 0 8px;}
.community-widget .community-widget-button i {text-align: center;vertical-align: middle;}
.community-widget .community-widget-content {padding: 12px 20px;}
.community-widget .community-widget-content .block .block-title {padding: 0px 0px 10px;border-bottom: 1px solid #DDD;font-family: Open Sans, sans-serif;font-weight: 300 !important;color: #666666;font-size: 150%;text-transform: uppercase;}
.community-widget .community-widget-content .block .block-content {padding: 10px 0px 5px;}
.community-widget:hover .community-widget-button .fa-vk {color: #537599;}

[Сергей Иванов]

Это ведь для вк только? а под ним на такой же основе можно 2 других сделать?

[Vaccina]

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

[l.pryahina]

Добрый день!

Помогите пожалуйста разобраться: хотела сделать боковой виджет по описанной инструкции, после изменений получилось как на скрине. Прошу помощи!
Аккаунт SL-390441.

Прикрепленные изображения

• 

[MikDark]

l.pryahina (26 Июль 2016 - 18:09) писал:

Добрый день!

Помогите пожалуйста разобраться: хотела сделать боковой виджет по описанной инструкции, после изменений получилось как на скрине. Прошу помощи!
Аккаунт SL-390441.

Изменения Вам произвели.

[l.pryahina]

Спасибо большое! Все работает!

[l.pryahina]

Добрый день!

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

[Firefly]

l.pryahina (18 Август 2016 - 09:09) писал:

Добрый день!

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

Здравствуйте.
Вам потребуется сгенерировать виджет инстаграмма на любом из сервисов, например, выбранном здесь и прислать нам код с указанием места установки (под виджетом вк или где-то еще).

[spectredes]

Сделал всё по инструкции, но получилось так же как в сообщении #5, можете дать инструкции как исправить? Заранее спасибо!

[spectredes]

Спасибо той неизвестной силе, которая внесла изменения по поводу виджета, но есть вопросы по мобильной версии, если нажать на иконку VK в телефоне, то уже ничего не помогает её скрыть, можно ли сделать так чтобы в мобильной версии либо не отображалось либо как-то скрывать её можно было?

[Firefly]

spectredes (03 Сентябрь 2016 - 19:11) писал:

Сделал всё по инструкции, но получилось так же как в сообщении #5, можете дать инструкции как исправить? Заранее спасибо!

Здравствуйте.
Инструкция и сообщения абсолютно правильная. Видимо, Вы вставляли код не перед закрывающимся тегом </body>.
Внес Вам изменения. Вам потребуется вставить код виджета в шаблоне HTML вместо:

				ЗДЕСЬ ПРОПИШИТЕ КОД ВИДЖЕТА

В main.css так же добавил Вам для разрешений до 480px строку стиля, скрывающую блок виджета:

#community_widget_right {display:none;}

[spectredes]

Firefly (03 Сентябрь 2016 - 20:05) писал:

Здравствуйте.
Инструкция и сообщения абсолютно правильная. Видимо, Вы вставляли код не перед закрывающимся тегом </body>.
Внес Вам изменения. Вам потребуется вставить код виджета в шаблоне HTML вместо:

ЗДЕСЬ ПРОПИШИТЕ КОД ВИДЖЕТА

В main.css так же добавил Вам для разрешений до 480px строку стиля, скрывающую блок виджета:

#community_widget_right {display:none;}

Спасибо большое! Но можно сделать так, чтобы осталось только для компьютеров данный виджет? Потому что скрипт реализован так (ИМХО), что его нельзя скрыть с мобильных устройств вообще, если нажать на кнопку VK. Во всяком случае на телефоне я не могу его скрыть вообще. Т.е. если же он на каком-либо мобильном устройстве всё таки появится, то пользователь ничего не сможет сделать с ним, кроме как обновить страницу и больше вообще не нажимать на данную кнопку

[Firefly]

spectredes (03 Сентябрь 2016 - 20:09) писал:

Спасибо большое! Но можно сделать так, чтобы осталось только для компьютеров данный виджет? Потому что скрипт реализован так (ИМХО), что его нельзя скрыть с мобильных устройств вообще, если нажать на кнопку VK. Во всяком случае на телефоне я не могу его скрыть вообще. Т.е. если же он на каком-либо мобильном устройстве всё таки появится, то пользователь ничего не сможет сделать с ним, кроме как обновить страницу и больше вообще не нажимать на данную кнопку

Я Вам так и реализовал.
Сейчас на мобильных телефонах с разрешением экрана до 480px блок виджета отображаться не будет. Попробуйте очистить кэш.

[Zvetochek]

Помогите пожалуйста установить виджет моей группы в контакте.https://vk.com/shelkzvetochek
у меня не получилось по инструкции, описанной выше, столько знаков непонятных...

[MikDark]

Zvetochek (08 Сентябрь 2016 - 11:02) писал:

Помогите пожалуйста установить виджет моей группы в контакте.https://vk.com/shelkzvetochek
у меня не получилось по инструкции, описанной выше, столько знаков непонятных...

Вам нужно взять код виджета на сайте ВК http://vk.com/dev и прислать его нам.

[Zvetochek]

MikDark (08 Сентябрь 2016 - 11:07) писал:

Вам нужно взять код виджета на сайте ВК http://vk.com/dev и прислать его нам.

<script type="text/javascript" src="//vk.com/js/api/openapi.js?127"></script>

<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 3, width: "220", height: "400", color1: 'FFFFFF', color2: '000000', color3: '5E81A8'}, 56488063);
</script>

[MikDark]

Zvetochek (08 Сентябрь 2016 - 11:09) писал:

<script type="text/javascript" src="//vk.com/js/api/openapi.js?127"></script>

<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 3, width: "220", height: "400", color1: 'FFFFFF', color2: '000000', color3: '5E81A8'}, 56488063);
</script>

Изменения Вам произвели.

[Zvetochek]

Ой спасибо, какие вы молодцы! Чудо, уже работает всё.

[Лариса7]

Добрый день! Как добавить виджет инстаграмма в верхний правый угол рядом с корзиной?
Аккаунт SL-386660
виджет
<style>.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-32 { width: 32px; height: 32px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-32.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-32 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-32@2x.png); background-size: 60px 178px; } }</style>
<a href="https://www.instagra...aya/?ref=badge" class="ig-b- ig-b-32"><img src="//badges.instagram.com/static/images/ig-badge-32.png" alt="Instagram" /></a>