Отправка электронной почты в формате HTML. Создание простого адаптивного HTML-шаблона электронного письма Сделать html письмо онлайн
Обновлено: 12 месяцев назад
Верстка HTML-письма с нуля – работа не из легких. Основная задача – создать универсальный код, который будет понятен различным почтовым клиентам и одинаково красиво будет отображаться как на телефоне, планшете, так и на компьютере.
Как правило, чем «древнее» код, тем выше вероятность, что он будет корректно работать. И хотя сегодня существуют блочные редакторы, которые упрощают верстку писем, в основе их работы заложены всё те же старые принципы разработки HTML шаблонов.
Существуют два основных правила, о которых всегда стоит помнить, приступая к верстке письма:
Давайте разбираться детальнее.
Где писать код шаблона? Не в Microsoft Word же, правда? Удобно и понятно, когда сразу видишь, как выглядит написанный код и в каком виде его получит клиент. Программа для массовых email рассылок ePochta Mailer имеет прекрасный функционал для параллельного написания кода и просмотра созданного шаблона в режиме реального времени. Поэтому здесь и далее все примеры по созданию, редактированию и отправке письма будут представлены с ее помощью. Вы можете бесплатную демо-версию программы и читая статью, сразу тренироваться в сотворении своего email шаблона.
Формат шаблона html-писем
Первым делом вам нужно определиться со структурой на основе таблицы. Для рассылок, лучше всего работают одно- и двухколоночные макеты, потому что они позволяют максимально четко и доступно структурировать большой объем информации. Одноколоночный макет
к тому же отлично отображается в мобильной версии и на планшете.
Чаще всего одноколоночный макет включает в себя:
Хедер
(шапку), что содержит логотип и навигационные ссылки с родительского вебсайта.
Основное тело
письма с контентом, картинками и ссылками на веб-страницы с полной информацией, обзор которой подан в письме.
Футер
(подвал) письма, который, бывает, дублирует ссылки навигации, а также включает в себя инструкцию на отписку и ссылку отписки непосредственно.
Те же элементы содержит и двухколоночный макет
, с той лишь разницей, что колонки у него две и при отображении письма на мобильном устройстве колонки могут сдвигаться одна под другую (принцип респонсивности), а могут масштабироваться согласно размеру экрана (что не всегда удобно, если шрифт получается слишком мелким).
Как сверстать HTML шаблон письма: Создание документа.
HTML код любого email сообщения состоит из двух частей:
Шапка (Header)
. Всё, что будет обернуто в тег и , почтовый клиент будет принимать за шапку письма.
Тело (Body)
. Код, размещенный внутри тега и будет использован для создания структуры вашего email сообщения.
Написание HTML кода электронного сообщения начинается с создания документа типа XHTML:
1.
2.
3.
4.
5. Инструкция Создания Email Шаблона <meta name="viewport" content="width=device-width, initial-scale=1.0"/><br>
6. </head><br>
7. </html></p>
<p><b><!DOCTYPE>
</b> объясняет почтовому, какие HTML-теги ожидать в дальнейшем, и какому набору правил HTML и CSS вы придерживались, создавая письмо. Несмотря на то, что некоторые почтовые клиенты (Gmail, Google Apps, Yahoo! Mail и Outlook.com) заменят ваш хедер на собственный, мы рекомендуем включить данный код в документ.</p>
<p><b><meta http-equiv=»Content-Type» />
</b> указывает, как обрабатывать текст и специальные символы в вашем письме.<br><b>«text/html»
</b> дает понять механизму, что рассматривать следующие строки текста нужно как html.</p>
<p><b><meta name=»viewport»/>
</b> указывает устройство, на котором просматривается электронное письмо, чтобы установить видимую область сообщения в соответствии с шириной экрана.</p>
<p>Заголовок email сообщения записывается внутри тега <b><title>
</b>. В таком случае, если получатель выберет «Просмотр в Интернете», заголовок сообщения будет отображаться на вкладке браузера.</p>
<h2>Верстка тела email сообщения. Создание таблицы</h2>
<p>Общая структура письма создается с использованием тега <b><body>
</b>.</p>
<p>Прежде всего, устанавливаем нулевое значение для отступов (теги <margin> и <padding>), чтобы избежать лишнего пустого пространства в шаблоне.</p>
<p>Ширина главной таблицы должна быть 100% (table width=»100%»). Она выступает фактически основным каркасом, «телом» email сообщения. В отличие от тега <body>, работая с таблицей, вы можете работать со стилями: например, чтобы задать общий цвет фона для всего письма, его нужно прописать в параметрах этой главной таблицы.</p>
<p>Значения тегов <cellpadding> и <cellspacing> тоже должны равняться нулю, опять же, во избежание ненужного пустого пространства. Данные теги отвечают за отступы от границ ячейки таблицы.</p>
<p>1. <body style="margin: 0; padding: 0;"><br>
2. <table border="1" cellpadding="0" cellspacing="0" width="100%"><br>
3. <tr><br>
4. <td><br>
5. Привет!<br>
6. </td><br>
7. </tr><br>
8. </table><br>
9. </body><br></p>
<p>Пока что наше письмо выглядит следующим образом:</p>
<p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_1.png' align="center" width="100%" loading=lazy></p>
<p>(наличие рамки – результат работы тега border=»1″)</p>
<p>Максимально возможная и удобная ширина для электронного сообщения, которое просматривается в почтовых клиентах на персональном компьютере – 600px. Чтобы письмо не растягивало на весь экран, нужно внутри уже созданной главной таблицы создать еще одну вложенную, строго прописав значение её ширины: width=»600″.</p>
<blockquote><p><i><b>Золотое правило в создании HTML кода email сообщения:
</b> если нужный атрибут (тег) существует в HTML, используйте его, и не нужно обращаться к CSS.
</i></p>
</blockquote>
<p>Этот код вложенной таблицы следует вставить вместо слова «Привет!»</p>
<p>1. <table style="border-collapse: collapse;" border="1" width="600" cellspacing="0" cellpadding="0" align="center"><br>
2. <tbody><br>
3. <tr><br>
4. <td>Привет!</td><br>
5. </tr><br>
6. </tbody><br>
7. </table><br></p>
<p>Теперь письмо выглядит вот так:</p>
<p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_2.png' width="100%" loading=lazy></p>
<p>Вы заметили, что для вложенной таблицы использован атрибут <b><border-collapse>
</b> со значением «collapse»? Он указывает почтовым клиентам на правильность отображения границ вокруг ячеек таблицы. Если этого не сделать, более новые версии Outlook, например, в процессе обработки письма, добавят небольшое ненужное пространство между границами двух таблиц.</p>
<p>Мы уже говорили о том, что любой состоит из трёх логических частей: хедер, тело письма с основным контентом, футер.</p>
<p>Теперь нужно отобразить это структурно в уже созданном нами шаблоне. Добавим еще две строки. Скопируем во вложенной таблице часть кода, отвечающего за строку</p>
<p>1. <tr><br>
2. <td><br>
3. Привет!<br>
4. </td><br>
5. </tr><br></p>
<p>и продублируем его несколько раз, заменив приветствие на порядковый номер строки.</p>
<p>Должно получиться следующее:</p>
<p>1. <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"><br>
2. <tr><br>
3. <td><br>
4. Строка 1<br>
5. </td><br>
6. </tr><br>
7. <tr><br>
8. <td><br>
9. Строка 2<br>
10. </td><br>
11. </tr><br>
12. <tr><br>
13. <td><br>
14.Строка 3<br>
15. </td><br>
16. </tr><br>
17. </table><br></p>
<p>Визуально:</p>
<p><img src='https://i2.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_3.png' align="center" width="100%" loading=lazy></p>
<p>Давайте добавим <b>цвет фона
</b> отдельно для каждой строки. Так как в HTML существует для этого специальный тег <b><bgcolor>
</b>, следует использовать его вместо CSS стилей. Обратите внимание, что выбирая цвет, нужно указывать все 6 символов кода, так как сокращенные три символа могут попросту не сработать.</p>
<p>1. <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"><br>
2. <tr><br>
3. <td bgcolor="#ffa500"><br>
4. Строка 1<br>
5. </td><br>
6. </tr><br>
7. <tr><br>
8. <td bgcolor="#ffffff"><br>
9. Строка 2<br>
10. </td><br>
11. </tr><br>
12. <tr><br>
13. <td bgcolor="#1e90ff"><br>
14. Строка 3<br>
15. </td><br>
16. </tr><br>
17. </table><br></p>
<p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_4.png' width="100%" loading=lazy></p>
<p>Сосредоточимся на первой строке – это будет хедер письма.</p>
<h3>Строка 1. Верстка хедера письма.</h3>
<p>В планах – разместить в первой строке изображение с логотипом и названием компании. Но для начала нужно <b>настроить отступ
</b>ы, которые будут со всех сторон изображения до внутренних границ ячейки. За это отвечает <b>тег — <padding>
</b>.</p>
<p>Работая с <padding>Важно помнить о необходимости указывать каждое значение отступа (сверху, снизу, слева, справа), иначе результаты могут оказаться непредсказуемыми.</p>
<p>Прописывая параметры, вполне допустимо использовать краткий вариант записи, типа <i>padding: 10px 10px 5px 5px;
</i>.</p>
<p>Если же возникают проблемы, их решит длинный вариант записи, типа <i>padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 5px
</i>;.</p>
<p>В случае, когда почтовый клиент удаляет ваш инлайновый CSS или вносит свои правки в ваше письмо, можно пойти на <b>хитрость
</b>. Вместо того, чтобы использовать тег <padding>Добавляйте пустые ячейки в таблице, тем самым создавая нужное пространство. Такие дополнительные ячейки будут пустыми (с кодом внутри), но с четко установленной высотой или шириной.</p>
<p>Например:</p>
<p><tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr></p>
<p>Обращаем ваше внимание, что стили правильнее будет прописывать внутри тега <td>, но не внутри <p>Или <div>, последние ведут себя более непредсказуемо.</p>
<p>В случае с нашим примером письма, мы применяем внутренний CSS для настройки отступов для изображения. После вставки изображения, необходимо прописать <b>alt текст
</b>, который будет видеть получатель на месте картинки, если картинки отключены почтовиком. И важно добавить параметр style=»display:block;», наличие которого гарантирует, что почтовый клиент не добавит лишних пробелов под картинкой. При необходимости, можно отцентровать изображение, добавив align=»center» в тег <td>.</p>
<blockquote><p><i><b>Примечание.
</b> Помните, что большинство почтовых клиентов по умолчанию блокируют изображения. Поэтому напишите в alt тексте подсказку клиенту, картинка на какую тематику должна быть вместо пустого места. К тому же, не стоит на картинках писать важную уникальную информацию, которая не дублируется в письме. Ведь тогда в случае блокировки изображений, ваше письмо будет абсолютно бесполезным.
</i></p>
</blockquote>
<p>Пример кода Строки 1 с вставленным изображением:</p>
<p>1. <td align="center" style="padding: 20px 0px 30px 0px;" bgcolor="#ffa500"><br>
2. <img src='https://i0.wp.com/E:\epochta\БЛОГ\mailer_html_img.png' width="600" loading=lazy><br>
3. </td><br></p>
<p>Визуально:</p>
<p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_5.png' width="100%" loading=lazy></p>
<h3>Строка 2. Работа с контентом в HTML шаблоне письма</h3>
<p>Для начала следует <b>указать отступы внутри средней ячейки
</b> (второй строки), чтобы новая вложенная в неё таблица с контентом красиво смотрелась, не сливаясь с ней основными границами. Вы уже знаете, что такие отступы от сторон элемента, что будет внутри ячейки, задаются с помощью тега <padding>Приступайте! 😉</p>
<p>Визуально должно получиться:</p>
<p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_6.png' align="center" width="100%" loading=lazy></p>
<p>Теперь нужно подготовить <b>место для контента
</b>. Как упоминалось выше, нужно добавить еще одну вложенную таблицу. Это будет таблица с тремя строками:</p>
<ul><li>одна – для заголовка,</li>
<li>вторая – для краткого описания статьи,</li>
<li>третья – для строки с двумя столбцами.</li>
</ul><p>Ширина таблицы, которая будет во второй строке должна стоять не в пикселях, а в процентах (100%). Это нужно, если хотите, чтобы письмо было респонсивным.</p>
<p>Код Строки 2 с вложенной таблицей:</p>
<p>1. <td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;"><br>
2. <table border="1" cellpadding="0" cellspacing="0" width="100%"><br>
3. <tr><br>
4. <td><br>
5. Строка 1<br>
6. </td><br>
7. </tr><br>
8. <tr><br>
9. <td><br>
10. Строка 2<br>
11. </td><br>
12. </tr><br>
13. <tr><br>
14. <td><br>
15. Строка 3<br>
16. </td><br>
17. </tr><br>
18. </table><br>
19. </td></p>
<p>Визуально:</p>
<p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_7.png' align="center" width="100%" loading=lazy></p>
<p>Пишем заголовок статьи и её краткое описание. В строке с описанием можно добавить отступы для красивого отображения текста. Обратите внимание, что программа ePochta Mailer позволяет добавлять и изменять текст непосредственно в визуальном редакторе, без перехода на вкладку HTML кода.</p>
<p>Вложенная таблица с текстом:</p>
<p>1. <table width="100%" border="1" cellspacing="0" cellpadding="0"><br>
2. <tbody><br>
3. <tr><br>
4. <td><br>
5. Продвижение бренда в Вайбер: массовые рассылки в мессенджерах<br>
6. </td><br>
7. </tr><br>
8. <tr><br>
9. <td style="padding: 20px 0px 30px 0px;"><br>
10. Cейчас Viber - это не только приложение для личных переписок, но и эффективный канал коммерческого продвижения товаров и услуг.<br>
11. Только ленивые не говорят о том, что вайбер для бизнеса - это действительно эффективный и дешевый инструмент. Так ли это? Предлагаем проверить эти утверждения на соответствие действительности.<br>
12. </td><br>
13. </tr><br>
14. <tr><br>
15. <td><br>
16. Строка 3<br>
17. </td><br>
18. </tr><br>
19. </tbody><br>
20. </table></p>
<p>Визуально:</p>
<p><img src='https://i2.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_8.png' align="center" width="100%" loading=lazy></p>
<p>Для последней строки таблицы мы подготовили две колонки с картинкой и текстом.</p>
<p>Давайте по порядку.</p>
<p>Во-первых, так как нам нужно расстояние между столбцами таблицы, а атрибут <margin> мы использовать не можем, то немножко схитрим и создадим таблицу с тремя столбцами. Просто средний столбец будет пустым и узким.</p>
<p>Основной параметр столбца – ширина. В данном случае мы будет ориентироваться на ширину картинки, которая будет размещена в нем. Её ширина 260px. И чтобы не запутаться, высчитывая, какой же процент составляют 260 пикселей из таблицы на 540px* (а это будет 48,1%), проще будет указать известную ширину.</p>
<p><i>*Ширина вложенной таблицы 540px – это ширина основной таблицы в 600px минус отступы, по 30px с каждой стороны.
</i></p>
<p>Итого, два столбца по 260 пикселей + средний пустой столбец на 20px.</p>
<p>Укажем также для обоих столбцов значение valign=»top», что выровняет текст по вертикали, по верхнему краю строки, независимо от количества текста в каждом столбце. По умолчанию, значение valign считается middle; не забудьте его изменить.</p>
<p>1. <table border="1" cellpadding="0" cellspacing="0" width="100%"><br>
2. <tr><br>
3. <td width="260" valign="top"><br>
4. Колонка 1<br>
5. </td><br>
6. <td style="font-size: 0; line-height: 0;" width="20"><br>
7. <br>
8. </td><br>
9. <td width="260" valign="top"><br>
10. Колонка 3<br>
11. </td><br>
12. </tr><br>
13. </table></p>
<p>Визуально:</p>
<p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_9.png' width="100%" loading=lazy></p>
<p>Добавляем изображения и контент.</p>
<p>Поскольку, нам снова нужны две строки, вставляем еще одну таблицу в каждую из колонок, не забывая об отступах.</p>
<p>1. <table width="100%" border="1" cellspacing="0" cellpadding="0"><br>
2. <tbody><br>
3. <tr><br>
4. <td width="260" valign="top"><br>
5. <table width="100%" border="1" cellspacing="0" cellpadding="0"><br>
6. <tbody><br>
7. <tr><td> <br>
8. <img src='https://i1.wp.com/E:\epochta\БЛОГ\битые картинки на блоге\iStock_000004384999XSmall.jpg' height="160" width="260" loading=lazy> </td><br>
9. </tr><br>
10. <tr><br>
11. <td style="padding: 25px 0px 0px 0px;"><br>
12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.<br>
13. </td><br>
14. </tr><br>
15. </tbody> </table><br>
16. </td><br>
17. <td width="20" style="line-height: 0; font-size: 0px;"><br>
18. <br>
19. </td><br>
20. <td width="260" valign="top"><br>
21. <table width="100%" border="1" cellspacing="0" cellpadding="0"><br>
22. <tbody> <tr><br>
23. <td><br>
24. <br>
25. <img src='https://i0.wp.com/E:\epochta\БЛОГ\битые картинки на блоге\greed.jpeg' height="160" width="260" loading=lazy> </td><br>
26. </tr><br>
27. <tr><br>
28. <td style="padding: 25px 0px 0px 0px;"><br>
29. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.<br>
30. </td><br>
31. </tr><br>
32. </tbody> </table><br>
33. </td><br>
34. </tr><br>
35. </tbody> </table></p>
<p>Визуально:</p>
<p><img src='https://i2.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_10.png' align="center" width="100%" loading=lazy></p>
<h3>Строка 3. Создание HMTL кода футера email рассылки</h3>
<p>Основные компоненты футера – контакты компании и ссылка отписки. Как видите, это два разных элемента и нам снова нужно разделить строку на две колонки с помощью дополнительных таблиц.</p>
<p>Чтобы не забыть, сначала добавим отступы, а после – таблицы.</p>
<p><td bgcolor="#1e90ff " style="padding: 30px 30px 30px 30px;"><br>
Строка 3<br>
</td></p>
<p>Визуально:</p>
<p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_11.png' width="100%" loading=lazy></p>
<p>Разделяем строку на две колонки с помощью дополнительной таблицы.</p>
<p>1. <table border="1" cellpadding="0" cellspacing="0" width="100%"><br>
2. <tr><br>
3. <td><br>
4. Колонка 1<br>
5. </td><br>
6. <td><br>
7. Колонка 2<br>
8. </td><br>
9. </tr><br>
10.</table></p>
<p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_12.png' width="100%" loading=lazy></p>
<p>В данном шаблоне первая колонка будет для контактных данных компании, вторая – для ссылки отписки. Вы можете добавлять иконки соцсетей, изменять количество колонок и расположение информации абсолютно в любом формате.</p>
<p>Дополнительная таблица с информацией футера:</p>
<p>1. <table width="100%" border="1" cellspacing="0" cellpadding="0"><br>
2. <tbody><tr><br>
3. <td width="280"><br>
4. <p>Компания ePochta<br><br>
5. support@сайт</p><br>
6. </td><br>
7. <td align="right"><br>
8. Вы получили это письмо как клиент нашей компании. Чтобы отписаться от рассылки, нажмите на ссылку ниже.<br>
9. </td><br>
10. </tr><br>
11. </tbody></table></p>
<p>Визуально:</p>
<p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_13.png' width="100%" loading=lazy></p>
<p>Вы заметили, что <b>текст
</b> во второй колонке футера <b>выровнен по правому краю
</b>? Это возможно благодаря атрибуту <b>align=»right»
</b> для тега <td>.</p>
<p>Шаблон готов!</p>
<h2>Верстка дизайна шаблона email рассылки</h2>
<p>Первая часть статьи касалась структуры макета электронного сообщения. Сейчас же мы немного поговорим об оформлении и дизайне.</p>
<p>Возможностями встроенного CSS вы можете изменять <b>параметры шрифта
</b> – использовать тег <b> или <strong> для жирного шрифта, прописывать размер и название непосредственно семейства шрифта.</p>
<p>Возьмем для примера заголовок статьи «Продвижение бренда в Вайбер: массовые рассылки в мессенджерах» в уже созданном шаблоне и зададим ему следующие параметры:</p>
<p>1. <td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"><p align="center">2. Продвижение бренда в Вайбер:<br>массовые рассылки в мессенджерах<br>
3. </p></td></p>
<p>Посмотрите, как изменился текст:</p>
<p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_14.png' width="100%" loading=lazy></p>
<p>Теперь уберем границы таблиц, которые мы оставляли, чтобы было визуально легко отследить изменения в структуре. Для этого на вкладке HTML код нажмите CTRL+F или перейдите в меню Правка – Найти. В открывшемся диалоговом окне выберите функцию Заменить и задайте значение border=»1″ заменить на border=»0″. Перейдите во вкладку Сообщение – все границы пропали, перед вами чистый готовый макет email сообщения.</p>
<p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_15.png' align="center" width="100%" loading=lazy></p>
<p>При желании, можно оставить границу для основной таблицы в 600px, сделав её мало заметной, например:</p>
<p><table width="600" align="center" style="border-collapse: collapse; border: 1px solid #cccccc;" cellspacing="0" cellpadding="0"></p>
<p>Добавим небольшой отступ в самой первой строке, чтобы фон не прилипал к самому верху страницы: 1. <table width="100%" border="0" cellspacing="0" cellpadding="0"><br>
2. <tbody>><tr><br>
3. <td style="padding: 20px 0px 30px;"></p>
<p>А теперь – проба пера: отправляем письмо на тестовый email адрес.</p>
<p>Вы можете как создать список из десятка адресов на различных почтовых клиентах и запустить тестовую рассылку, так и отправить одно письмо с помощью меню Проба, указав один адрес получателя сообщения.</p>
<p>Вот так созданный шаблон выглядит в Gmail</p>
<p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_16.png' align="center" height="511" width="324" loading=lazy></p>
<p>Создавайте собственные брендовые email шаблоны, тестируйте и радуйте клиентов красочными рассылками. ePochta Mailer обладает мощнейшим функционалом для создания сообщений. В статье основной задачей было самостоятельно написать код шаблона, поэтому мы не затрагивали возможности программы. Детальнее о ePochta Mailer вы можете прочитать на .</p>
<p>И пусть ваши клиенты с удовольствием читают ваши рассылки!</p>
<br><p>Возможно Вы уже задавались данным вопросом и не смогли найти четкого ответа. Постараюсь Вас не разочаровать и дать понятные для переваривания инструкции <b>отправки HTML писем
</b>через почту <b>Mail.ru
</b>.</p>
<h2><b>Mail регистрация почтового ящика
</b></h2>
<h2></h2>
<p>Заведение почтового ящика на Майл, я описываю исключительно как вспомогательную часть для статьи " ". О HTML письмах читайте после этого пункта.</p>
<p>3. Заполняем необходимые данные</p>
<p>4. После, Вам предлагают загрузить фотографию и создать подписку (подписка отображается в конце каждого отправленного сообщения).</p>
<p>Мы закончили создание почтового ящика</p>
<h2><b>Как отправить HTML письмо
</b></h2>
<p>Способ, который я Вам предлагаю, очень простой, но его простота ограничена возможностями. В письме можно будет отправить к примеру ы, видео с YouTube и т. д.</p>
<p><b>Отправка видео
</b></p>
<p>Для отправки видео-письма, нам необходим YouTube и желательно Google Chrome, скачать можно .</p>
<p>1. Заходим на свой Mail.ru и жмем </p>
<p>2. Находим любое видео на YouTube и жмем по нему правой кнопкой мыши, далее "Копировать HTML-код"</p>
<blockquote style=" border-radius: 0px; #000000 solid; padding: 10px; margin: 0px 0px 25% 0px;">
<p>За картинкой<br>
Ваш бонус!<br>
Разверни ее!<br>
Жми сюда!</p>
<p><img src='https://i2.wp.com/rubarub.ru/BLOG/Clip2net_160125033502.jpg' width="100%" loading=lazy></p>
</blockquote>
<p>3. На Mail.ru, жмем на поле под текст правой кнопкой мыши и далее "Просмотр кода элемента"</p>
<p>4. Браузер выдает нам следующее окно</p>
<p>5. По выделенной области в окне HTML, жмем правой кнопкой мыши и далее "Edit as HTML"</p>
<p>6. Должно появится следующее окно. Окно редактирования</p>
<p>7. В появившемся окне, вставляем наш скопированный код <b>HTML видео
</b>. Вставлять нужно в поле для текста. Поле для текста всегда черными буквами, если такового нет, пишем в письме 111, а в коде меняем 111 на <b>HTML-код
</b> нашего видео. Ниже визуально показано</p>
<p><img src='https://i2.wp.com/rubarub.ru/BLOG/Clip2net_160125040702.jpg' width="100%" loading=lazy></p>
<p>8. После того, как вставили код, кликаем в любую пустую область на <b>сайте Mail.ru
</b> и видео должно отобразится в сообщении.</p>
<p>9. Размер видео слишком большой, чтобы его изменить, проделываем все тоже самое до 6 пункта и меняем его размеры. width="854" - это ширина, а height="480" - это высота. Меняем только цифры, как только поменяли, также жмем в любую пустую область сайта <b>Майл
</b>.</p>
<p>Вот такой простой <b>способ добавления HTML в письма
</b>. Тоже самое можно проделать с баннерами и многим другим.</p>
<p>Надеюсь, статья оказалась Вам полезной.</p>
<p>Желаю успехов!</p>
<table width="516px" align="center" height="130px" border="0" cellspacing="0" cellpadding="0"><tr><td style="background-image:url(http://rubarub.ru/RamkaBaner/banner_01111.png); width:25px; height:25px;">
</td>
<td style="background-image:url(http://rubarub.ru/RamkaBaner/banner_02.gif); width:468px; height:25px;">
</td>
<td style="background-image:url(http://rubarub.ru/RamkaBaner/banner_03333.png); width:25px; height:25px">
</td>
</tr><tr><td style="background-image:url(http://rubarub.ru/RamkaBaner/banner_04.gif); width:26px; height:60px;">
</td>
<td style="width:468px; height:60px;">
<table border="0" cellpadding="0" cellspacing="0" style="background-color:rgb(0, 102, 255);height:15px;width:468px;"><tbody></tbody></table><table align="center" background="http://rubarub.ru/BLOG1/bloker.png" border="0" cellpadding="0" cellspacing="0" style="background-position:50% 50%;height:60px;width:468px;"><tbody><tr><td style="background-image:url(http://rubarub.ru/RamkaBaner/banner_04.gif); width:26px; height:60px;">
</td>
<td style="width:468px; height:60px;">
</td>
<td style="background-image:url(http://rubarub.ru/RamkaBaner/banner_066.png); width:26px; height:60px;">
</td>
</tr><tr></tr></tbody></table></td>
<td style="background-image:url(http://rubarub.ru/RamkaBaner/banner_066.png); width:30px; height:60px;">
</td>
</tr><tr><td style="background-image:url(http://rubarub.ru/RamkaBaner/banner_0771.png); width:25px; height:55px;">
</td>
<td style="background-image:url(http://rubarub.ru/RamkaBaner/banner_088.png); width:468px; height:55px;">
</td>
<td style="background-image:url(http://rubarub.ru/RamkaBaner/banner_0999919.png); width:25px; height:55px">
</td>
</tr></table>
<p>Есть много способов отправки html-писем через почтовые клиенты и, конечно, через сервисы рассылок. Но что делать, если нужно отправить пару писем, а никаких программ под рукой нет? Есть хитрый способ отправить html-письмо через Яндекс Почту.</p>
<h2>Шаг 1. Подготовка письма</h2>
<p>Важным правилом при отправке письма таким способом является то, что ссылки на изображения в коде должны быть прописаны полностью, а сами изображения должны находиться на сервере. Если ссылки ведут на изображения с вашего компьютера, то программа их не увидит.</p>
<p>Если вы заказывали шаблон у нас, то мы уже сами обо всем позаботились и в ваших исходниках уже есть заранее подготовленный шаблон с правильно прописанными ссылками.</p>
<p>Откройте шаблон через обычный блокнот и скопируйте все содержимое письма. Потом весь этот код нам нужно будет встaвить в тело письма в Яндекс Почте.</p>
<p><img src='https://i0.wp.com/adomeni.ru/wp-content/uploads/2017/03/yandex1.jpg' align="center" width="100%" loading=lazy></p>
<h2>Шаг 2. Вставка письма в Яндекс</h2>
<p>Войдите в Яндекс Почту, и создайте новое письмо. Дальше пойдет хитрость. Нажмите кнопку “Оформить письмо”, чтобы перевести Яндекс Почту в режим, поддерживающий оформление.</p>
<p>У вас должна появиться вот такая панель (она выделена синим). Теперь интерфейс поддерживает различное оформление, а значит и код письма. Правда просто так его вставить не получится.</p>
<p><img src='https://i0.wp.com/adomeni.ru/wp-content/uploads/2017/03/yandex2.jpg' align="center" width="100%" loading=lazy></p>
<p>Мы пойдем на хитрость и вставим код нашего шаблона прямо в код страницы. Для этого нужно найти кусок в коде, который отвечает за содержание письма, и подменить его нашим содержанием.</p>
<p>Для этого нажмите правой кнопкой мыши на пустую область письма и выберите “просмотреть код” (В каждом браузере этот пункт называется по-своему, но смысл сохраняется).</p>
<p><img src='https://i1.wp.com/adomeni.ru/wp-content/uploads/2017/03/yandex3.jpg' align="center" width="100%" loading=lazy></p>
<p>Все эти хитрые манипуляции мы проводили для того, чтобы появился вот этот блок, отвечающий за содержимое письма. (Панель может визуально отличаться в зависимости от вашего браузера. Мы показываем на примере Google Chrome).</p>
<p><img src='https://i0.wp.com/adomeni.ru/wp-content/uploads/2017/03/yandex4.jpg' align="center" width="100%" loading=lazy></p>
<p>Теперь нам нужно удалить этот блок, а на его место вставить код нашего письма. Для этого кликните на этот блок правой кнопкой мыши и выберите “Edit as HTML”,</p>
<p><img src='https://i0.wp.com/adomeni.ru/wp-content/uploads/2017/03/yandex5.jpg' align="center" width="100%" loading=lazy></p>
<p>теперь нам необходимо удалить текущий код…</p>
<p><img src='https://i1.wp.com/adomeni.ru/wp-content/uploads/2017/03/yandex6.jpg' align="center" width="100%" loading=lazy></p>
<p>… и на его место вставить код нашего письма. После этого закройте панель, нажав на крестик в правом верхнем углу панели.</p>
<p><img src='https://i1.wp.com/adomeni.ru/wp-content/uploads/2017/03/yandex7.jpg' align="center" width="100%" loading=lazy></p>
<p>Если вы сделали все правильно, то шаблон отобразится в теле письма.В данный момент в нем нет картинок, но не беспокойтесь по этому поводу. В отправленном письме картинки будут, при условии, что ссылки на картинки правильные (см. Шаг 1). Если переживаете за результат, то просто отправьте это письмо себе, и вы увидите, что все получилось как надо.</p>
<p><img src='https://i1.wp.com/adomeni.ru/wp-content/uploads/2017/03/yandex8.jpg' align="center" width="100%" loading=lazy></p>
<h2>Шаг 3. Отправка html-письма в Яндекс Почте</h2>
<p>Внесите нужные изменения в содержание письма, просто перепечатывая тексты и применяя различные стили. Можно пользоваться всеми инструментами из верхней панели.</p>
<p>После того, как письмо готово - впишите почту получателя, тему письма и отправляйте!</p>
<p><img src='https://i2.wp.com/adomeni.ru/wp-content/uploads/2017/03/yandex9.jpg' align="center" width="100%" loading=lazy></p>
<p>Все компании (особенно их директора) хотят выделиться на фоне остальных своим уникальным стилем. И e-mail письма не исключение. Но многие почтовые клиенты и сервисы предоставляют возможность изменить только подпись в письме. Что ж, это делают все, а как быть если необходимо сделать вот такое письмо:</p>
<p>При условии того, что корпоративная почта развернута на бесплатной платформе Яндекса или Mail.ru (Gmail для бизнеса не берем в расчет, т.к. она уже давно не бесплатная) задача становится достаточно трудоемкой, но она решаема!</p>
<p>Итак, <b>в первую очередь необходимо нарисовать дизайн
</b> будущего письма. Важно отметить, что дизайн должен быть в ширину не более 640 пикселей и учитывать «растяжение» тела письма. Это правило позволит просматривать Ваши письма на экранах даже самых маленьких персональных устройств без горизонтальной прокрутки (о мобильных браузерах речь не идет).</p>
<p><b>После, необходимо сверстать письмо
</b>. О правилах верстки e-mail писем написано достаточно много статей и найти их не составит труда. После верстки советуем убедиться, что большинство почтовых сервисов и клиентов воспринимают шаблон письма адекватно. В первую очередь стоит проверить на:</p>
<ul><li>Yandex – почте;</li>
<li>Почте mail.ru;</li>
<li>Gmail почте;</li>
<li>Mozilla Thunderbird;</li>
<li>The Bat;</li>
<li>Microsfot Outlook.</li>
</ul><p>С версткой письма у нас все в порядке, поэтому приступаем к магическим ритуалам.</p>
<p>Из всех почтовых сервисов и программ на данный момент только <b>Mozilla Thunderbird
</b> и <b>Microsfot Outlook
</b> поддерживают вставку письма в HTML-формате. Но все пользователи в Вашей компании «категорически доверяют» Yandex – почте (или mail.ru), да и сам директор отказывается переходить на непонятные программы, когда он уже ни один год отправляет письма с его любимой темой «Звездных войн». А Yandex не поддерживает вставку письма в HTML-формате. Как быть?</p>
<h2>Идем на хитрость.</h2>
<p>Устанавливаем и настраиваем <b>Mozilla Thunderbird
</b> на учетную запись нужного нам сотрудника.</p>
<p>Обязательно указываем передачу данных через IMAP – протокол для входящей почты, для исходящей SMTP – протокол. Данная манипуляция позволит скачивать почту в Mozilla Thunderbird без ее удаления на серверах Yandex и автоматически обновлять отправленные письма с Mozilla Thunderbird на серверах Yandex.</p>
<p>Эта особенность поможет нам создать шаблон письма в Mozilla Thunderbird в HTML-формате и автоматически выгрузить его в одну из папок в почте Yandex.</p>
<p><b>Вставляем HTML-код в письмо и сохраняем его как шаблон
</b> в Thunderbird:</p>
<p><img src='https://i0.wp.com/seolt.ru/images/uploads/originals/14/email-html.jpg' width="100%" loading=lazy></p>
<p>Через 1-2 минуты в Yandex появляется необходимая нам папка <b>«template»
</b>, где содержится сверстанное нами письмо. Данный шаблон можно поправить и сохранить уже в нужном нам виде в самой Yandex-почте:</p>
<p><img src='https://i2.wp.com/seolt.ru/images/uploads/originals/14/email-template1455115920.jpg' width="100%" loading=lazy></p>
<p>При создании нового письма вызвать шаблон не составит труда – кликаем по зеленой ссылке <b>«Шаблон»
</b> и подгружаем необходимый вариант. Просмотреть все созданные нами шаблоны можно в одноименной папке, которая вложена в папку <b>«Черновики»
</b>.</p>
<h2>Проблема: не отображаются картинки в шаблоне письма на принимающей стороне.</h2>
<p>Да, есть такая проблема. Если Вы подгружаете изображения со стороннего сайта (например, с сайта своей компании), то картинки у адресата отображены не будут. Данную проблему можно решить двумя способами:</p>
<ul><li>Загрузить картинки, используемые в верстке письма на Yandex диск (если отправляете почту с Yandex, либо в облако Mail.ru, если отправляете почту с mail.ru). Далее указать прямые ссылки на эти изображения в сервисах. Обратите внимание, что по указанной Вами ссылке должна открываться картинка и ничего более.</li>
<li>Возможно загрузить картинку в само тело письма, перекодировав его в base 64. Далее вставить код картинки в формате base 64 в теги <b><img src='https://i1.wp.com/data:image/png;base64, код картинки, полученный из сервиса' loading=lazy>
</b></li>
</ul><p>Лучший вариант - это перекодировка изображения в код base 64 – меньше движений мышкой, больше надежности (изображение не удалят с Yandex диска, оно уже вложено в само письмо).</p>
<p>Задача выполнена. Thunderbird можно удалять. Директор и сотрудники довольны – теперь их письма совсем не такие как у всех.</p>
<p>Но возникает вопрос — как такие письма отправлять? Давайте разбираться. Если вы хотите отправить html письмо, то просто вставить код в тело сообщения в вашем почтовом ящике у вас не получиться — отобразиться сам код без его выполнения. Для полноценной отправки, с возможностью отображения таблиц, ссылок, графики и рисунков, нужно использовать специальную программу.</p>
<p>Специальной программой для отправки писем в коде html являются почтовые клиенты. Рассмотрим один из них — <i>Mozilla Thunderbird
</i>. Рассмотрим процесс отправки писем с картинками и прочим более подробно.<br></p>
<h2><span>Почтовый клиент Mozilla Thunderbird
</span></h2>
<p>Сначала нужно скачать эту программу. Для этого переходим на официальный сайт почтового клиента от Мозиллы: <i><span>http://mozilla-russia.org/products/thunderbird/
</span>
</i>. В открывшемся окне, слева, выбираем программу на русском языке для вашей операционной системы компьютера:</p>
<p>Скачиваем, устанавливаем. После первого запуска нужно настроить клиент для работы с электронной почтой. Первоначально нам предлагается выполнить интеграцию, однако её можно пропустить:</p>
<p><img src='https://i0.wp.com/saitoseoteka.ru/wp-content/uploads/2014/09/integraciya-s-pochtovim-klientom-433x280.jpg' align="center" width="100%" loading=lazy></p>
<p>Теперь нужно указать адрес электронной почты, с которой мы будем в дальнейшем отправлять письма. Для этого щёлкаем по специальной ссылке <i>«Электронная почта»
</i>:</p>
<p><img src='https://i0.wp.com/saitoseoteka.ru/wp-content/uploads/2014/09/e-mail-programma-480x171.jpg' align="center" width="100%" loading=lazy></p>
<p>Затем появляется окно, где можно открыть почтовый ящик у предложенного сервиса, но можно просто пропустить этот пункт, нажав <i>«Пропустить это и использовать мою существующую почту»
</i>. Затем, нужно указать <i>Имя
</i>, <i>адрес
</i> и <i>пароль
</i> на существующем почтовом ящике:</p>
<p><img src='https://i2.wp.com/saitoseoteka.ru/wp-content/uploads/2014/09/registraciya-pochti-368x280.jpg' align="center" height="280" width="368" loading=lazy></p>
<p>После этого, нажимаем <i>«Продолжить»
</i> — происходит автоматическое определение почтового сервера, и после нажатия на кнопку <i>«Готово»
</i>, мы переходим снова к начальному окну. Тем самым мы установили и настроили почтовый клиент для работы с электронной почтой (использовалась ) посредством которого мы будем отправлять шаблоны html писем.</p>
<h3><span>Отправляем html письмо
</span></h3>
<p>Снова открываем клиент <i>Mozilla Thunderbird
</i>, если вы уже успели его закрыть, и нажимаем на пункт верхнего меню <i>«Создать»
</i>:</p>
<p><img src='https://i2.wp.com/saitoseoteka.ru/wp-content/uploads/2014/09/sozdanie-html-pisma.jpg' align="center" width="100%" loading=lazy></p>
<p>Открывается форма по созданию электронного письма. Заполняем данные: <i>«Кому»
</i> и <i>«Тема»
</i>:</p>
<p><img src='https://i2.wp.com/saitoseoteka.ru/wp-content/uploads/2014/09/zapolnenie-soobsheniya-480x235.jpg' align="center" width="100%" loading=lazy></p>
<p>Имейте ввиду, если вы хотите указать несколько получателей, нужно щёлкнуть мышкой чуть ниже пункта <i>«Кому»
</i> — для этого там предусмотрены несколько полей получателей. Данные заполнили, переходим к шаблонам.</p>
<p>Пусть мы будем отправлять шаблон письма, предложенный в предыдущей статье (первый в списке). Открываем его в редакторе (файл shablon1.html) и выполняем небольшое не сложное действие, а именно — указываем корректные полные адреса изображений:</p>
<img src='https://i0.wp.com/saitoseoteka.ru/wp-content/uploads/2014/09/polniy-adres-kartinki-351x280.jpg' align="center" height="280" width="351" loading=lazy><h4><span>Как правильно указать ссылку на картинку в html-шаблоне электронного письма
</span></h4>
<p>Итак, полный адрес изображений на компьютере мы получили, теперь его нужно вставить в шаблон. Для этого, открываем шаблон на редактирование и вместо <i><img src='/social-networks/otpravka-elektronnoi-pochty-v-formate-html-sozdanie-prostogo-adaptivnogo/' loading=lazy>
</i> пишем <i><img src='/social-networks/otpravka-elektronnoi-pochty-v-formate-html-sozdanie-prostogo-adaptivnogo/' loading=lazy>
</i>.</p>
<p>Обратите внимание, что слэши в компьютере и для браузера разные. Кроме того, перед букой диска с расположение нужного файла, добавляется <i>«file:///»
</i>.</p>
<h3><span>Вставка шаблона в тело письма в почтовом клиенте Mozilla Thunderbird
</span></h3>
<p>Итак, мы заполнили адреса получателей нашего письма, указали тему, подправили ссылки. Теперь, нажимаем на пункт верхнего меню в окне создания электронного письма нашего почтового клиента <i>«Вставить»
</i> — <i>«HTML»
</i>.</p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
<div style="font-size:0px;height:0px;line-height:0px;margin:0;padding:0;clear:both"></div>
<div class='yarpp-related'>
<div class="block_post">
<span class="h1 color_green recomend" style="margin:15px 0 30px;">Рекомендуем почитать</span>
<div>
<article class="postBox">
<div class="images">
<noindex><a href="/educational-program/ustanovka-composer-dlya-chainikov-nastroika-i-bazovye-komandy/"><img width="370" height="190" src="/uploads/389335c8a29a668411454003382abab0.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Автозагрузка классов с помощью Composer Подключаем простой zip файл" / loading=lazy></a></noindex>
</div>
<div class="info left">
<div class="category_name" style="margin:6px 0 0;"><a href="/category/educational-program/" rel="category tag">Ликбез</a></div>
<strong><a href="/educational-program/ustanovka-composer-dlya-chainikov-nastroika-i-bazovye-komandy/" rel="bookmark" title="Автозагрузка классов с помощью Composer Подключаем простой zip файл">Автозагрузка классов с помощью Composer Подключаем простой zip файл</a></strong>
</div>
</article>
<article class="postBox">
<div class="images">
<noindex><a href="/windows-server/lending-peidzh-na-wordpress-konstruktor-staticheskoi-stranicy-delaem-landing-page-na-wordpress/"><img width="370" height="190" src="/uploads/7b0d909de88d3fd4833aff5a310929be.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Делаем Landing page на WordPress Wordpress создание лендинга" / loading=lazy></a></noindex>
</div>
<div class="info left">
<div class="category_name" style="margin:6px 0 0;"><a href="/category/windows-server/" rel="category tag">Windows Server</a></div>
<strong><a href="/windows-server/lending-peidzh-na-wordpress-konstruktor-staticheskoi-stranicy-delaem-landing-page-na-wordpress/" rel="bookmark" title="Делаем Landing page на WordPress Wordpress создание лендинга">Делаем Landing page на WordPress Wordpress создание лендинга</a></strong>
</div>
</article>
<article class="postBox">
<div class="images">
<noindex><a href="/apple/sborka-modov-ot-dzhova-skachat-s-oblaka-mody-ot-dzhova-modpak-jove-poslednyaya/"><img width="370" height="190" src="/uploads/c26cf7aacd2f3994b5b8eacde85288a2.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Моды от Джова (модпак Jove) последняя версия" / loading=lazy></a></noindex>
</div>
<div class="info left">
<div class="category_name" style="margin:6px 0 0;"><a href="/category/apple/" rel="category tag">Apple</a></div>
<strong><a href="/apple/sborka-modov-ot-dzhova-skachat-s-oblaka-mody-ot-dzhova-modpak-jove-poslednyaya/" rel="bookmark" title="Моды от Джова (модпак Jove) последняя версия">Моды от Джова (модпак Jove) последняя версия</a></strong>
</div>
</article>
<article class="postBox">
<div class="images">
<noindex><a href="/windows-7/programma-calibre-upravlenie-bibliotekoi-i-universalnyi-konverter/"><img width="370" height="190" src="/uploads/54812a8ec09b2f9ce9ad669363d2a0f4.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Управление библиотекой и универсальный конвертер электронных книг" / loading=lazy></a></noindex>
</div>
<div class="info left">
<div class="category_name" style="margin:6px 0 0;"><a href="/category/windows-7/" rel="category tag">Windows 7</a></div>
<strong><a href="/windows-7/programma-calibre-upravlenie-bibliotekoi-i-universalnyi-konverter/" rel="bookmark" title="Управление библиотекой и универсальный конвертер электронных книг">Управление библиотекой и универсальный конвертер электронных книг</a></strong>
</div>
</article>
<article class="postBox">
<div class="images">
<noindex><a href="/software/programma-otkrytiya-failov-package-chto-takoe-rasshirenie-faila-package-programmy-dlya/"><img width="370" height="190" src="/uploads/4339ef78cb6f3d912d9493982d7331c9.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Что такое расширение файла PACKAGE?" / loading=lazy></a></noindex>
</div>
<div class="info left">
<div class="category_name" style="margin:6px 0 0;"><a href="/category/software/" rel="category tag">Software</a></div>
<strong><a href="/software/programma-otkrytiya-failov-package-chto-takoe-rasshirenie-faila-package-programmy-dlya/" rel="bookmark" title="Что такое расширение файла PACKAGE?">Что такое расширение файла PACKAGE?</a></strong>
</div>
</article>
<article class="postBox">
<div class="images">
<noindex><a href="/drivers/fotokonkursy-fotokonkursy-fotokonkursy-s-prizami/"><img width="370" height="190" src="/uploads/f0f4bf4c43b8dd2241ed7720303137fe.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Фотоконкурсы Фотоконкурсы с призами" / loading=lazy></a></noindex>
</div>
<div class="info left">
<div class="category_name" style="margin:6px 0 0;"><a href="/category/drivers/" rel="category tag">Драйверы</a></div>
<strong><a href="/drivers/fotokonkursy-fotokonkursy-fotokonkursy-s-prizami/" rel="bookmark" title="Фотоконкурсы Фотоконкурсы с призами">Фотоконкурсы Фотоконкурсы с призами</a></strong>
</div>
</article>
</div>
</div>
</div>
</div>
<div class="soc_buttons clearfix">
<div class="pluso" data-background="#ebebeb" data-options="medium,square,line,horizontal,counter,theme=01" data-services="vkontakte,odnoklassniki,facebook,twitter,google,moimir,email,print" data-user="1187196371"></div>
</div>
</div>
<noindex>
<div id="smartrotator_ad_14"></div>
<div id="smartrotator_ad_15"></div>
</noindex>
</div>
<aside class="right-sidebar">
<div class="rightBox">
<div id="nav_menu-2" class="rightBoxMid widget_nav_menu"><div class="menu-right-menu-container">
<ul id="menu-right-menu" class="menu">
<li id="menu-item-" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-"><a href="/category/software/"><img src="/assets/m1.png" loading=lazy>Software</a>
</li>
<li id="menu-item-" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-"><a href="/category/windows/"><img src="/assets/m3.png" loading=lazy>Windows</a>
</li>
<li id="menu-item-" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-"><a href="/category/windows-10/"><img src="/assets/m4.png" loading=lazy>Windows 10</a>
</li>
<li id="menu-item-" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-"><a href="/category/windows-7/"><img src="/assets/m5.png" loading=lazy>Windows 7</a>
</li>
<li id="menu-item-" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-"><a href="/category/windows-server/"><img src="/assets/m2.png" loading=lazy>Windows Server</a>
</li>
</ul>
</div></div>
</div><div class="rightBox">
<div id="enhancedtextwidget-27" class="rightBoxMid widget_text enhanced-text-widget"><div class="textwidget widget-text"><div id="smartrotator_ad_40"></div>
</div></div>
</div><div class="rightBox">
</div><div class="rightBox">
<div id="enhancedtextwidget-35" class="rightBoxMid widget_text enhanced-text-widget"><div class="textwidget widget-text"><div id="smartrotator_ad_32"></div></div></div>
</div><div class="rightBox">
<div id="enhancedtextwidget-10" class="rightBoxMid widget_text enhanced-text-widget"><div class="textwidget widget-text"><div id="smartrotator_ad_41"></div></div></div>
</div>
</aside>
<div class="clear"></div>
</div>
</div>
<footer>
<div class="top">
<noindex><div class="block_width">
<a href="/" class="logo left"><img src="/img/logo.svg?1" alt="Windows. Железо. Интернет. Безопасность. Операционные системы. Драйверы" loading=lazy></a>
<div class="send right">
<div class="left">
<span class="title">Подписаться на обновления</span>
<span class="small">работы в саду и огороде</span>
</div>
<div class="form_block right">
<div class="Subscribers" id="Subscribers">
<div>
<form class="es_widget_form" data-es_form_id="es_widget_form">
<div class="es_lablebox"><label class="es_widget_form_email">Email *</label></div>
<div class="es_textbox">
<input type="text" id="es_txt_email" class="es_textbox_class" name="es_txt_email" value="" maxlength="225">
</div>
<div class="es_button">
<input type="button" id="es_txt_button" class="es_textbox_button es_submit_button" name="es_txt_button" value="Subscribe">
</div>
<div class="es_msg" id="es_widget_msg">
<span id="es_msg"></span>
</div>
</form>
</div>
</div>
</div>
</div>
</div></noindex>
</div>
<div class="bottom1">
<div class="block_width">
<div class="link">
<div id="footerInner">
<div class="boxFooter"> <div class="textwidget">
<a href="/category/android/">Android</a>
<a href="/category/apple/">Apple</a>
<a href="/category/hardware/">Hardware</a>
<a href="/category/malware/">Malware</a>
<a href="/category/networks/">Networks</a>
<a href="/category/software/">Software</a>
<a href="/category/windows/">Windows</a>
<a href="/category/windows-10/">Windows 10</a>
<a href="/category/windows-7/">Windows 7</a>
<a href="/category/windows-server/">Windows Server</a>
<a href="/category/windows-xp/">Windows XP</a>
<a href="/category/drivers/">Драйверы</a>
<a href="/category/educational-program/">Ликбез</a>
<a href="/category/social-networks/">Социальные сети</a>
<a href="">О проекте</a>
<a href="/feedback/">Обратная связь</a>
</div>
</div></div>
</div>
</div>
</div>
<div class="bottom2">
<div class="block_width">
<div class="copyright left">
<span>Windows. Железо. Интернет. Безопасность. Операционные системы. Драйверы</span>
</div>
<div class="counter right">
<noindex>
</script>
</noindex>
</div>
</div>
</footer>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://raw.githubusercontent.com/robflaherty/jquery-scrolldepth/master/jquery.scrolldepth.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//We initially hide the all dropdown menus
$('#dropdown_nav li').find('.sub-menu').hide();
//When hovering over the main nav link we find the dropdown menu to the corresponding link.
$('#dropdown_nav li').hover(function() {
//Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
$(this).find('.sub-menu').fadeIn(400);
} , function() {
//Do the same again, only fadeOut this time.
$(this).find('.sub-menu').fadeOut(100);
} );
} );
</script>
<script type="text/javascript">
/* использование: <a class='scrollTop' href='#' style='display:none;'></a>
------------------------------------------------- */
$(function(){
var e = $(".scrollTop");
var speed = 5000;
e.click(function(){
$("html:not(:animated)" +( !$.browser.opera ? ",body:not(:animated)" : "")).animate({ scrollTop: 0} , 2500 );
return false; //важно!
} );
//появление
function show_scrollTop(){
( $(window).scrollTop()>300 ) ? e.fadeIn(300) : e.hide();
}
$(window).scroll( function(){ show_scrollTop()} ); show_scrollTop();
} );
</script>
<script type="text/javascript">jQuery(function($) { $(document).on("click", ".pseudo-link", function(){ window.open($(this).data("uri")); } );} );</script><link rel='stylesheet' id='yarppRelatedCss-css' href='/assets/related.css' type='text/css' media='all' />
<link rel='stylesheet' id='metaslider-flex-slider-css' href='/assets/flexslider.css' type='text/css' media='all' property='stylesheet' />
<link rel='stylesheet' id='metaslider-public-css' href='/assets/public.css' type='text/css' media='all' property='stylesheet' />
<link rel='stylesheet' id='su-box-shortcodes-css' href='/assets/box-shortcodes.css' type='text/css' media='all' />
<link rel='stylesheet' id='su-media-shortcodes-css' href='/assets/media-shortcodes.css' type='text/css' media='all' />
<script type='text/javascript'>
/* <![CDATA[ */
var wpcf7 = { "apiSettings":{ "root":"http:\/\/plodovie.ru\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"} ,"recaptcha":{ "messages":{ "empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."} },"cached":"1"} ;
/* ]]> */
</script>
<script type='text/javascript' src='/assets/scripts.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var es_widget_notices = { "es_email_notice":"Please enter email address","es_incorrect_email":"Please provide a valid email address","es_load_more":"loading...","es_ajax_error":"Cannot create XMLHTTP instance","es_success_message":"Successfully Subscribed.","es_success_notice":"Your subscription was successful! Within a few minutes, kindly check the mail in your mailbox and confirm your subscription. If you can't see the mail in your mailbox, please check your spam folder.","es_email_exists":"Email Address already exists!","es_error":"Oops.. Unexpected error occurred.","es_invalid_email":"Invalid email address","es_try_later":"Please try after some time","es_problem_request":"There was a problem with the request"} ;
/* ]]> */
</script>
<script type='text/javascript' src='/assets/es-widget.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var es_widget_page_notices = { "es_email_notice":"Please enter email address","es_incorrect_email":"Please provide a valid email address","es_load_more":"loading...","es_ajax_error":"Cannot create XMLHTTP instance","es_success_message":"Successfully Subscribed.","es_success_notice":"Your subscription was successful! Within a few minutes, kindly check the mail in your mailbox and confirm your subscription. If you can't see the mail in your mailbox, please check your spam folder.","es_email_exists":"Email Address already exists!","es_error":"Oops.. Unexpected error occurred.","es_invalid_email":"Invalid email address","es_try_later":"Please try after some time","es_problem_request":"There was a problem with the request"} ;
/* ]]> */
</script>
<script type='text/javascript' src='/assets/es-widget-page.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var supertoc = { "smooth_scroll":"1"} ;
/* ]]> */
</script>
<script type='text/javascript' src='/assets/front.js'></script>
<script type='text/javascript' src='/assets/polls-js.js'></script>
<script type='text/javascript' src='/assets/postratings-js.js'></script>
<script type='text/javascript'>
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = { "sidebar" : "sidebar-1", "margin_top" : 20, "margin_bottom" : 360, "stop_id" : "", "screen_max_width" : 800, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['enhancedtextwidget-10'] } ;
</script>
<script type='text/javascript' src='/assets/q2w3-fixed-widget.min.js'></script>
<script type='text/javascript' src='/assets/wp-embed.min.js'></script>
<script type='text/javascript' src='/assets/jquery.flexslider-min.js'></script>
<script type='text/javascript' src='/assets/jquery.fancybox-1.3.8.min.js'></script>
<script type='text/javascript' src='/assets/jquery.easing.min.js'></script>
<script type='text/javascript' src='/assets/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
jQuery(document).on('ready post-load', function(){ jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create/button"]').addClass('nolightbox'); } );
jQuery(document).on('ready post-load',easy_fancybox_handler);
jQuery(document).on('ready',easy_fancybox_auto);</script>
<script type="text/javascript">
$(function(){
$('aside .menu > li a').click(function(e){
//e.preventDefault();
$('aside .menu > li a').removeClass('active');
$(this).addClass('active');
var submenu = $(this).next().css('display');
if($(this).next().css('display') == 'none'){
$(this).next('.sub-menu').fadeIn(300);
} else {
$(this).next('.sub-menu').fadeOut(300);
}
} );
$("aside .menu > li a").one("click", false);
$('.menu_block .fa').click(function(){
$(this).next().fadeToggle(300);
} );
$('.tab_module .tab_link span').click(function(){
$('.tab_module .tab_link span').removeClass('active');
$(this).addClass('active');
var data_href = $(this).attr('data-href');
var data_id = $('.tab_module .tab_block > div').attr('data-id');
//alert(data_id);
$('.tab_module .tab_block > div').fadeOut(100);
$('.tab_module .tab_block div[data-id='+data_href+']').fadeIn(500);
} );
} );
</script>
<script type="text/javascript">
(function($) {
$('.without-link a:first-child').removeAttr('href');
} (jQuery));
</script>
<script type="text/javascript">
$(document).ready(function(e) {
// мои скрипты
$('aside #content4 .wp-polls a[title="Результаты голосования"]').text('Результат');
$('#tab4').attr("checked", "checked");
$('#enhancedtextwidget-7 #tab1').click(function(){
$('#enhancedtextwidget-7 #tab2,#enhancedtextwidget-7 #tab3').attr("checked", "");
} );
$('footer .form_block input[type=text]').val('Введите Ваш e-mail...');
$('footer .form_block input[type=text]').focus(function(){
if($(this).val()=='Введите Ваш e-mail...'){
$(this).val('');
}
} );
$('footer .form_block input[type=text]').blur(function(){
if($(this).val()==''){
$(this).val('Введите Ваш e-mail...');
}
} );
$('.category_page .box-descr h2 span').text($('#archive-title span').text());
$('.menu_block .fa').click(function(){
$(this).next().fadeToggle(300);
} );
// обрамление картинок в <span class="images clear">
var html = document.documentElement;
if(html.clientWidth <=1024){
var block_img = $('.page_post .cont p img');
block_img.wrap('<span class="images clear"></span>');
$('.tab_module .tab_link span').click(function(){
$('.tab_module .tab_link span').removeClass('active');
$(this).addClass('active');
var data_href = $(this).attr('data-href');
var data_id = $('.tab_module .tab_block > div').attr('data-id');
//alert(data_id);
$('.tab_module .tab_block > div').fadeOut(100);
$('.tab_module .tab_block div[data-id='+data_href+']').fadeIn(500);
} );
$('.menu_block #dropdown_nav div > ul > li').click(function(){
var l_link = $(this).children('a').attr('href');
//alert(l_link);
location.href = l_link;
} );
} );
</script>
</body>
</html>
