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

[1234567890]

0

[miyako]

1234567890 (03 Март 2013 - 13:14) писал:

помогите реализовать такие отзывы шаблон сияние




Создание виджета со вкладками

Создавать виджет со вкладкми мы будем простым добавлением трех элементов кода к нашему блогу.

В примерах я ставлю комментарии вконтакте на сайт wordpress. Думаю для других движков процедура аналогична.

1. Вставьте приведенный ниже код между тегами HEAD/HEAD (в вордпресс вы можете найти этот тег в файле header.php)1

<style type="text/css">
body {background:#fff;color:#000;font-family:sans-serif;line-height:1.6;}
#page {width:70%;margin:10px auto;}
.tabs {width:100%;overflow:hidden;font-size:0.9em;margin:2em 0;zoom:1;padding:1px;position:relative;}
.tabs dt {float:left;line-height:2;height:2em;background:#e8f0f5;border:1px solid #e8f0f5;border-bottom:0;padding:0 1em;position:relative;left:35px;margin-right:1px;cursor:pointer;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;}
.tabs dt:hover {background-color:#bfdff4;}
.tabs dt.selected {border-color:#b0d0e9;background:#fff;z-index:3;cursor:auto;}
.tabs dd {background:#fff;display:none;float:right;width:100%;margin:2em 0 0 -100%;position:relative;z-index:2;}
.tabs dd.selected {display:block;}
.tabs .tab-content {border:1px solid #b0d0e9;padding:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;}
</style>


Этот код еще можно вставить в файл style.css, но я решил, что мы обойдемся бес сложностей.

2. Теперь подключаем скрипт. Вставьте приведенный ниже код между тегами HEAD/HEAD1


<script type="text/javascript" src="http://ajax.googleap...n.js"></script>
<script type="text/javascript">
$(function(){
$('dl.tabs dt').click(function(){
$(this)
.siblings().removeClass('selected').end()
.next('dd').andSelf().addClass('selected');
});
});
</script>


3. Теперь осталось только добавить на страницу саму форму. Делается это нижеприведенным кодом (данный код вставьте туда где бы вы хотели выводить комментарии от соц. сете, например я вставил свой код в файл single.php)1

<dl class="tabs">
<dt class="selected">ВКонтакте</dt>
<dd class="selected">
<div class="tab-content">

Код комментариев Вконтакте

</div>
</dd>
<dt>FaceBook</dt>
<dd>
<div class="tab-content">

Код комментариев FaceBook

</div>
</dd>
</dl>


У вас должна получиться пустая форма.

Вы можете прислать ссылку сайта с таким отзывом?

[1234567890]

9

[miyako]

1234567890 (04 Март 2013 - 06:04) писал:

http://gavrilov.ente...kte-i-facebook/

1) В шаблон HTML после кода:

<!-- Скрипты магазина -->
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

вставьте код:

<style type="text/css">
#page {width:70%;margin:10px auto;}
.tabs {width:100%;overflow:hidden;font-size:0.9em;margin:2em 0;zoom:1;padding:1px;position:relative;}
.tabs dt {float:left;line-height:2;height:2em;background:#e8f0f5;border:1px solid #e8f0f5;border-bottom:0;padding:0 1em;position:relative;left:35px;margin-right:1px;cursor:pointer;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;}
.tabs dt:hover {background-color:#bfdff4;}
.tabs dt.selected {border-color:#b0d0e9;background:#fff;z-index:3;cursor:auto;}
.tabs dd {background:#fff;display:none;float:right;width:100%;margin:2em 0 0 -100%;position:relative;z-index:2;}
.tabs dd.selected {display:block;}
.tabs .tab-content {border:1px solid #b0d0e9;padding:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;}
</style>
<script type="text/javascript">
$(function(){
$('dl.tabs dt').click(function(){
$(this)
.siblings().removeClass('selected').end()
.next('dd').andSelf().addClass('selected');
});
});
</script>

2. Допустим вы хотите такой отзыв только на главной странице, тогда вставьте на главную страницу(Сайт > Страница > Главная > описание через редактор HTML кода) код:

<dl class="tabs"><dt class="selected">ВКонтакте</dt><dd class="selected">
<div class="tab-content">Код комментариев Вконтакте</div>
</dd><dt>FaceBook</dt><dd>
<div class="tab-content">Код комментариев FaceBook</div>
</dd></dl>

3) Вам остается по инструкции подкорректировать код для Главной страницы, добавив виджет от vk.com и facebook (в инструкции довольно подробно сказано как это сделать). Обратите внимание, в пункте 12 сказано " Если у вас блог на движке WordPress, то вносим в коде еще одно изменение. Вместо адреса вашего сайта вставляем строчку –

  

        

<?php the_permalink(); ?>                       
"
Не нужно вставлять php функции. Оставьте код как написано выше в той инструкции.

[1234567890]

0

[miyako]

1234567890 (04 Март 2013 - 11:46) писал:

не могу понять? куда именно вставлять!посмотрите пож.    Точечный рисунок (2).jpg

В блок этот:

<dl class="tabs">
<dt class="selected">ВКонтакте</dt>
<dd class="selected">
<div class="tab-content">
 
Код комментариев Вконтакте
 
</div>
</dd>
<dt>FaceBook</dt>
<dd>
<div class="tab-content">
 
Код комментариев FaceBook
 
</div>
</dd>
</dl>

1) Нужно вставить в код шаблона HTML то тега </head>
2) Вторую часть в код на старницу вместо слов код комментариев из контакта / facebook

[1234567890]

0

[Stasya]

ДЛя начала вам нужно добавить свой сайт на данной странице. Вам там после этого будет предложен код. Теперь заходите в шаблон "Товар" сразу после строчки

<!-- END Сопутствующие товары -->

вставьте весь этот код

<!-- Put this script tag to the <head> of your page -->
&lt;script type="text/javascript" src="//vk.com/js/api/openapi.js?79"></script>
&lt;script type="text/javascript">
VK.init({apiId: API_ID, onlyWidgets: true});
</script>
<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
&lt;script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"});
</script>

это для виджета контакта

вместо API_ID будут стоять цифры конкретно для Вашего сайта.

[1234567890]

0

[Stasya]

Авторизоваться вконтакте или заполнить предложенную Вам форму?

[support 2.0]

1234567890 (04 Март 2013 - 17:43) писал:

я не могу понять как там Авторизироватся помогите пож.

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

[1234567890]

0

[mikola]

1234567890 (04 Март 2013 - 18:44) писал:

спасибо "в контакте" получилось ! помогите с  "FaceBook" вот ссылка  http://gavrilov.ente...kte-i-facebook/

так же сначала пройдите авторизацию в FaceBook
далее тема
http://forum.storela...ариев-facebook/

[Infiniti]

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

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

• 

[Koderhan]

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.csstemplate".
В конец файла добавить код:

.otzv {
	margin-left: 20px;
	margin: 2px;
	padding-left: 20px;
	float: left;
	width: 91%;
	color: gray;/*цвет текста*/
}
.otzv1 {
	margin-bottom: 10px;
}
.otzv h3 {
	color: #069;/*цвет текста отзывы*/
	margin-bottom: 10px;
}

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.csstemplate".
После кода:

 <!-- Материалы СМИ -->
					{%IFNOT news_list_mass_media_empty %}
					  <li class="news_mass_media"><br /><h2><a href="{NEWS_MASS_MEDIA_URL}">Новости СМИ</a></h2>
						<div class="contentTbodyNews">

						  <!-- Список статей -->
						  <div class="contentTbodyNewsBlock">
							{% FOR news_list_mass_media %}
							  <div class="contentTbodyNewsBlockItem"> 
								<a href="{news_list_mass_media.URL}" class="contentTbodyNewsBlockItemTitle" title="Перейти к странице новости">{news_list_mass_media.TITLE}</a><br />

								<div class="newsListBlockItemPreview">{news_list_mass_media.TEXT_SHORT} </div>
								{% IF news_list_mass_media.SHOW_TIME %}<em class="contentTbodyNewsBlockItemTime">{news_list_mass_media.TIME | date("d.m.Y")}</em><br />{% ENDIF %}
							  </div>
							{% ENDFOR %}
							<a class="contentTbodyNewsArchive" href="{NEWS_MASS_MEDIA_URL}">Архив новостей</a>
						  </div>
						</div>
					  </li>
					{% ENDIF %}
				  {% ENDIF %}
				</ul>
			  </div>

Добавить:

<div class="otzv">
<h3>
Отзывы
</h3>
<div class="otzv_cont">
<div class="otzv1">
<h4>Хороший магазин.</h4>
<span>
Быстрая доставка и все такое..
</span>

</div>

<div class="otzv1">
<h4>Хороший магазин.</h4>
<span>
Быстрая доставка и все такое..
</span>

</div>

</div>

</div>

[Infiniti]

Koderhan (15 Март 2013 - 07:50) писал:

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.csstemplate".
В конец файла добавить код:

.otzv {
margin-left: 20px;
margin: 2px;
padding-left: 20px;
float: left;
width: 91%;
color: gray;/*цвет текста*/
}
.otzv1 {
margin-bottom: 10px;
}
.otzv h3 {
color: #069;/*цвет текста отзывы*/
margin-bottom: 10px;
}

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.csstemplate".
После кода:

<!-- Материалы СМИ -->
{%IFNOT news_list_mass_media_empty %}
<li class="news_mass_media"><br /><h2><a href="{NEWS_MASS_MEDIA_URL}">Новости СМИ</a></h2>
<div class="contentTbodyNews">

<!-- Список статей -->
<div class="contentTbodyNewsBlock">
{% FOR news_list_mass_media %}
<div class="contentTbodyNewsBlockItem">
<a href="{news_list_mass_media.URL}" class="contentTbodyNewsBlockItemTitle" title="Перейти к странице новости">{news_list_mass_media.TITLE}</a><br />

<div class="newsListBlockItemPreview">{news_list_mass_media.TEXT_SHORT} </div>
{% IF news_list_mass_media.SHOW_TIME %}<em class="contentTbodyNewsBlockItemTime">{news_list_mass_media.TIME | date("d.m.Y")}</em><br />{% ENDIF %}
</div>
{% ENDFOR %}
<a class="contentTbodyNewsArchive" href="{NEWS_MASS_MEDIA_URL}">Архив новостей</a>
</div>
</div>
</li>
{% ENDIF %}
{% ENDIF %}
</ul>
</div>

Добавить:

<div class="otzv">
<h3>
Отзывы
</h3>
<div class="otzv_cont">
<div class="otzv1">
<h4>Хороший магазин.</h4>
<span>
Быстрая доставка и все такое..
</span>

</div>

<div class="otzv1">
<h4>Хороший магазин.</h4>
<span>
Быстрая доставка и все такое..
</span>

</div>

</div>

</div>

Проделала, все что сказали...получилось не то. Отзывы сместились в подвал сайта.

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

• 

[Koderhan]

Infiniti (15 Март 2013 - 08:03) писал:

Проделала, все что сказали...получилось не то. Отзывы сместились в подвал сайта.

Наверно я немного не понятно объяснил.
Код с отзывами можно ставить после кода:

<!-- Материалы СМИ -->
					{%IFNOT news_list_mass_media_empty %}
					  <li class="news_mass_media"><br /><h2><a href="{NEWS_MASS_MEDIA_URL}">Новости СМИ</a></h2>
						<div class="contentTbodyNews">
						  <!-- Список статей -->
						  <div class="contentTbodyNewsBlock">
							{% FOR news_list_mass_media %}
							  <div class="contentTbodyNewsBlockItem">
								<a href="{news_list_mass_media.URL}" class="contentTbodyNewsBlockItemTitle" title="Перейти к странице новости">{news_list_mass_media.TITLE}</a><br />
							   
								<div class="newsListBlockItemPreview">{news_list_mass_media.TEXT_SHORT} </div>
								{% IF news_list_mass_media.SHOW_TIME %}<em class="contentTbodyNewsBlockItemTime">{news_list_mass_media.TIME | date("d.m.Y")}</em><br />{% ENDIF %}
							  </div>
							{% ENDFOR %}
							<a class="contentTbodyNewsArchive" href="{NEWS_MASS_MEDIA_URL}">Архив новостей</a>
						  </div>
						</div>
					  </li>
					{% ENDIF %}
				  {% ENDIF %}
				</ul>
			  </div>

Тут просто заканчивается блок левого меню.

[Infiniti]

Koderhan (15 Март 2013 - 08:23) писал:

Наверно я немного не понятно объяснил.
Код с отзывами можно ставить после кода:

<!-- Материалы СМИ -->
				 {%IFNOT news_list_mass_media_empty %}
					 <li class="news_mass_media"><br /><h2><a href="{NEWS_MASS_MEDIA_URL}">Новости СМИ</a></h2>
					 <div class="contentTbodyNews">
						 <!-- Список статей -->
						 <div class="contentTbodyNewsBlock">
						 {% FOR news_list_mass_media %}
							 <div class="contentTbodyNewsBlockItem">
							 <a href="{news_list_mass_media.URL}" class="contentTbodyNewsBlockItemTitle" title="Перейти к странице новости">{news_list_mass_media.TITLE}</a><br />
							
							 <div class="newsListBlockItemPreview">{news_list_mass_media.TEXT_SHORT} </div>
							 {% IF news_list_mass_media.SHOW_TIME %}<em class="contentTbodyNewsBlockItemTime">{news_list_mass_media.TIME | date("d.m.Y")}</em><br />{% ENDIF %}
							 </div>
						 {% ENDFOR %}
						 <a class="contentTbodyNewsArchive" href="{NEWS_MASS_MEDIA_URL}">Архив новостей</a>
						 </div>
					 </div>
					 </li>
				 {% ENDIF %}
				 {% ENDIF %}
			 </ul>
			 </div>

Тут просто заканчивается блок левого меню.

ScreenShot 510.png

Вот что получилось. Хотелось бы, чтобы отзывы были также как блок ЛЕНТА НОВОСТЕЙ. И когда нажимаешь на отзывы они переходили на страницу отзывы, а то не красиво как-то получается. И еще также, чтобы отзывы были показаны не полностью в этом блоке, а например, одна строчка, но наводя на каждый отзыв система перенаправляла на страницу отзыва, где можно было бы прочитать все отзывы полностью. Своего рода ротация этих отзывов. Возможно ли так? Блин, не умею понятно объяснять наверное. Спасибо.

И еще бы немного слово ОТЗЫВЫ сдвинуть к центру и немножко опустить вниз, а то получается, что раздел отзывы налезает на Архив новостей.

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

• 

[Koderhan]

Infiniti (15 Март 2013 - 11:39) писал:

Вот что получилось. Хотелось бы, чтобы отзывы были также как блок ЛЕНТА НОВОСТЕЙ. И когда нажимаешь на отзывы они переходили на страницу отзывы, а то не красиво как-то получается. И еще также, чтобы отзывы были показаны не полностью в этом блоке, а например, одна строчка, но наводя на каждый отзыв система перенаправляла на страницу отзыва, где можно было бы прочитать все отзывы полностью. Своего рода ротация этих отзывов. Возможно ли так? Блин, не умею понятно объяснять наверное. Спасибо.

И еще бы немного слово ОТЗЫВЫ сдвинуть к центру и немножко опустить вниз, а то получается, что раздел отзывы налезает на Архив новостей.

Ну тогда предидущие изменения не актуальны уже...


Панель администратора, "Сайт"->"Редактор тем".
В файле "HTML".
После кода:

<!-- Материалы СМИ -->
					{%IFNOT news_list_mass_media_empty %}
					  <li class="news_mass_media"><br /><h2><a href="{NEWS_MASS_MEDIA_URL}">Новости СМИ</a></h2>
						<div class="contentTbodyNews">

						  <!-- Список статей -->
						  <div class="contentTbodyNewsBlock">
							{% FOR news_list_mass_media %}
							  <div class="contentTbodyNewsBlockItem"> 
								<a href="{news_list_mass_media.URL}" class="contentTbodyNewsBlockItemTitle" title="Перейти к странице новости">{news_list_mass_media.TITLE}</a><br />

								<div class="newsListBlockItemPreview">{news_list_mass_media.TEXT_SHORT} </div>
								{% IF news_list_mass_media.SHOW_TIME %}<em class="contentTbodyNewsBlockItemTime">{news_list_mass_media.TIME | date("d.m.Y")}</em><br />{% ENDIF %}
							  </div>
							{% ENDFOR %}
							<a class="contentTbodyNewsArchive" href="{NEWS_MASS_MEDIA_URL}">Архив новостей</a>
						  </div>
						</div>
					  </li>
					{% ENDIF %}
				  {% ENDIF %}

Добавить:

<div class="otzv2">
				  <li class="news_all"><br /><h2><a href="{NEWS_ALL_URL}">Отзывы</a></h2>
						<div class="contentTbodyNews">
						  <!-- Список отзывов магазина -->
						  <div class="contentTbodyNewsBlock">
							<div class="contentTbodyNewsBlockItem"> 
								<a href="адрес страницы с отзывом" class="contentTbodyNewsBlockItemTitle" title="Перейти к странице отзыва">Отличный магазин</a><br />

								<div class="newsListBlockItemPreview">Ну очень хороший... </div>
								<em class="contentTbodyNewsBlockItemTime">20.01.12</em><br />
							  </div>

						  </div>

						  <div class="contentTbodyNewsBlock">
							<div class="contentTbodyNewsBlockItem"> 
								<a href="адрес страницы с отзывом" class="contentTbodyNewsBlockItemTitle" title="Перейти к странице отзыва">Отличный магазин</a><br />

								<div class="newsListBlockItemPreview">Ну очень хороший... </div>
								<em class="contentTbodyNewsBlockItemTime">20.01.12</em><br />
							  </div>

						  </div>

						  <div class="contentTbodyNewsBlock">
							<div class="contentTbodyNewsBlockItem"> 
								<a href="адрес страницы с отзывом" class="contentTbodyNewsBlockItemTitle" title="Перейти к странице отзыва">Качественный магазин</a><br />

								<div class="newsListBlockItemPreview">Ну очень хороший... </div>
								<em class="contentTbodyNewsBlockItemTime">20.01.12</em><br />
							  </div>

						  </div>
						</div>
					  </li>
				  </div>

[Infiniti]

а в файле "main.csstemplate" оставлять тот же код ?
.otzv {
margin-left: 20px;
margin: 2px;
padding-left: 20px;
float: left;
width: 91%;
color: gray;/*цвет текста*/
}
.otzv1 {
margin-bottom: 10px;
}
.otzv h3 {
color: #069;/*цвет текста отзывы*/
margin-bottom: 10px;
}