Как сделать отзывы на сайте html

Как сделать блок с отзывами на HTML

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

Сколько продлится это счастливое время, никто не знает, поэтому нет особого смысла заморачиваться с настоящими отзывами. Просто лендинги создаются по выверенной годами схеме/шаблону и хотя бы фейковые отзывы там должны быть. Тем более, что одностраничники обычно делают статичными, без админки на простом HTML, а не динамичными на PHP.

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

Давайте подробно разберем, как создавать адаптивные блоки с отзывами.

Демонстрация примера

HTML код

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

<div >
<img src=»https://myrusakov.ru/avatar-female.png» alt=»avatar»>
<p><span>Марина Белова</span> г. Москва</p>
<p>Качество товара отличное, доставка быстрая.</p>
</div>
<div >
<img src=»https://myrusakov.ru/avatar-male.png» alt=»avatar»>
<p><span>Алексей Фролов</span> г. Воронеж</p>
<p>Пришла посылка быстро, доставка была курьером.</p>
</div>

Добавим CSS

Если ширина элемента больше 320 пикселей (минимальная ширина смартфона), то задаем ширину в %, это нужно для адаптивности.

.container < width: 75%;
border: 2px solid #ccc;
background-color: #eee;
border-radius: 5px; /* скругление углов блока */
padding: 16px; /* внутренние поля */
margin: 16px auto; /* внешние отступы */
>

Аватарка небольшого размера, поэтому смело пишем её ширину в пикселях. Свойство float:left задает обтекание картинки текстом с левой стороны.

.container img <
float: left; /* обтекание слева */
margin-right: 20px; /* пространство между аватаркой и абзацем */
border-radius: 50%; /* скругляет аватарку */
width: 90px;
>

.container span <
font-size: 18px;
margin-right: 15px;
>

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

Делаем адаптивность

Поставим текст в центре контейнера, используя свойство text-align:center. А главное, отменим обтекание текстом картинку, именно свойство float, мешает тексту выглядеть ровненько.

@media (max-width: 450px) <
.container <
text-align: center;
>
.container img <
margin: auto;
float: none;
display: block;
>
>

Теперь текст переместился под аватарку и больше не пляшет туда-сюда.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 1 ):

Как вариант блок с отзывами можно встроить в любой веб-сайт через JavaScript-виджет. Есть решение – адаптивный легковстраиваемый JavaScript-виджет с отзывами из 20+ источников включая Яндекс.Карты. У нас вы можете настроить внешний вид виджета: слайдер, карусель, список, сетка, все это доступно в визуальном конструкторе в котором более 40-ка настроек, в числе которых вы можете настроить сортировку отзывов "выводить сначала новые". Пробуйте бесплатно без ограничения по времени https://smartwidgets.ru/all-in-one-reviews-widget/

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Customer Reviews on Website Using HTML and CSS

Learn how to make customer reviews on the website using HTML and CSS. Add a reviews section on your website using HTML and CSS. Easy way to learn HTML for beginners. You will easily make this Reviews Section by following my Youtube video tutorial. I also provide you HTML, CSS, and Js Code which helps you to understand this Tutorial.

How to make customer reviews on the website using HTML and CSS

1. 0:0 — 0:56 min : Intro
2. 0:57 — 16.14 min: Create Responsive customer reviews Using HTML abd CSS

This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices.

Customer Reviews on Website

You can easily make a Reviews Section by watching my youtube video tutorial which I gave at the start of this post or by copy the HTML and CSS code that I give below. Paste this HTML and CSS code into your HTML and CSS file. On the youtube video tutorial, I tell you all the important points which help you to make a Reviews Section with CSS on our Website. So I recommended you watch the Video Tutorial that how can I make this Only using HTML and CSS. This Reviews Section is fully responsive and all browsers compatible. HTML and CSS code I have given below this code help you to better understand my Reviews Section video tutorial on how I make this Website. you can use this on your website without any copyright.

Создание самого простого слайдера отзывов

Создание самого простого слайдера отзывов поможет Вашему сайту стать немного более респектабельным и не унылым. А простота его использования сделает его еще и мега доступным для тех, кто только начинает изучение web-программирования. Сразу хочу забежать вперед, в интернете существует тьма всяких слайдеров и тому подобной мишуры с кучей настроек. Здесь Вы такого не увидите, но ту работу, которую выполняет данный скрипт, он делает превосходно, и что самое главное понятно. Итак, приступим. Да, совсем забыл, не забудьте скачать демо и посмотреть, как он выглядит. Учтите, вместо фотографий можно использовать любой контент.

Создание самого простого слайдера отзывов

Итак, первым делом разложим наш скрипт по полочкам и сделаем его так, чтобы он мог работать даже в том случае, если у пользователя отключен JavaScript.

Шаг первый

Создание полноценной HTML структуры. Я буду копировать и вставлять код, который использовал непосредственно в своем проекте.

Из кода видно, что мы используем элементы контроля нашего сайта с помощью слов. Но, если Вы все это добавите на сайт, то еще ничего не будет работать. Не волнуйтесь, все это мы будем украшать с помощью скрипта, а пока код CSS, который стилизует нам весь наш код. Заметьте, какой маленький у нас получается код.

Как видим из кода, нам этот слайдер отзывов, если отключен javascript, будет просто делать прокрутку наших отзывов вниз. Это очень удобно. А теперь самое вкусное, что нужно сделать нам. Это вставить наш код javascript.

Но для начала надо убедиться, что у нас подключена библиотека jQuerry. Если нет, то подключаем ее.

Далее, в самом начале нашего сайта, перед закрывающимся тегом </head> вставляем вот такой код в теги <script></script>. Все комментарии указаны непосредственно в коде.

Внимательно ознакомьтесь с этим кодом. Я постарался максимально его прокомментировать, но если у Вас есть вопросы, задавайте их в комментариях.

Конструируем форму для комментариев

Хотелось бы изложить свое мнение по поводу темы затронутой в топике «Идеальное комментирование» (автор dezmaster). У меня появились свои идеи, как сделать более удобной эту форму регистрации:

Я, разумеется, не претендую на идеал, но сотни заполненных подобных форм позволяют мне высказать несколько мыслей.

Для начала предлагаю четче поставить задачу: необходимо сделать простую в использовании форму анонимного комментирования для сайта общего назначения. Под анонимностью я подразумеваю, что пользователь не зарегистрирован на этом сайте.

Шаг первый: ревизия полей

Проведем ревизию полей для заполнения и их необходимсть. Первое поле «Имя», не является обязательным. У некоторых сайтов анонимные комментарии вообще являются частью культуры. Убираем звездочку и подправляем метку (это понадобиться в дальнейшем). Аналогично поступаем с полем «E-mail». Поле «Веб-сайт» не является критически важным, во-первых, не у всех есть сайты и даже блоги, а, во-вторых, сайт автора не редко относиться к теме комментария, в противном случае его можно указать в теле комментария. Удаляем это поле.
Переставлять поля ввода местами не стоит, ведь на всех остальных сайтах они идут в таком же порядке.

Шаг второй: контролы

Делаем контролы стандартными, даже если они в результате «хуже смотрятся», но пользователь к ним привык. Я вставил контролы моего браузера и ОС. Также необходимо вставить кнопку «Просмотреть», и сменить название у кнопки «Комментировать» на стандартное в данном случае «Отправить», хотя второй момент немного спорный.
Опять теперь расположим кнопки в самом низу формы, как это обычно бывает. Для этого поднимем чекбокс над ними и сделаем более ясную метку.

Шаг третий: Web 2.0

Веб-два-ноль уже на дворе, так что и мы не останемся в стороне. Сделаем поддержку для логина через OpenID и ЖЖ. Первый вариант — просто разместить соответсвующие логотипы (с поясняющим тултипом) справа от поля для логина и спрашивать пароль при вводе соответствующего логина (например, abcdef@livejournal.com). Пароль придется справшивать через JS, чтобы не создавать поле ввода пароля, ненужное для тех, кто не пользуется OpenID.

Также надо добавить пояснения к полю ввода адреса электронной почты, чтобы пользователь не боялся ее оставлять. И дополнительно добавим ссылку на RSS с комментариями.

Шаг четвертый: визуальный редактор

Не все знают HTML, но многие хотят создавать комментарии с ссылками, картинками и элементами форматирования. Нужно ли позволять делать это анонимным посетителям вопрос, конечно, спорный, и какие элементы форматирования разрешать должен решать владелец сайта (и не забываем про XSS!).
Я вставил обычный визуальный редактор Tiny MCE и добавил к нему счетчик символов.

Шаг пятый: контекст или как сделать форму легче

Форма у нас получилась немного тяжеловатая. Этот пункт шаг — для тех, кто так считает. Форма у нас не сама по себе, а находиться на сайте. Поэтому мы можем убрать ссылку на RSS, и добавить ленту с комментариями в саму страницу. Также можно заменить логотоипы OpenID и ЖЖ на текст, как итог форма полегчала.

Постскриптум: что еще можно доработать

каптча — поскольку форма для «анонимусов»
заголовок формы
ввод пароля для OpenID в этой же форме
растягивающееся поле ввода
большее по размеру поле ввода (вы знаете почему в супермаркетах такие большие тележки? 🙂 )