Как сделать свою форму подписки в блоге.

Доброго времени суток, читатели и гости блога. О важности формы подписки для любого сайта говорить не будем. Часто владельцы блогов устанавливают самую простую из них. Ту, что предлагает сервис Feedburner. Или используют сторонние коды.

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

Использовать будем 2 несложных кода - CSS и HTML. Разберём их подробно. В результате можно будет сделать неповторимый стиль формы. Установка в блоге самая элементарная. Гаджет HTML/JavaScript. Смотрим рабочий вариант. При желании можно установить и  в конце сообщения. И выглядеть это будет примерно так.

RSS подписка

Twitter

Facebook

Для начала просто копируйте в блокнот следующий код.

<style>#hsection{border:4px solid #D3D3D3;background-color:#e9e9e9;}
#hsection:hover{border:4px solid #BABABA;background-color:#e9e9e9;}
#sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;
font-weight:bold; }
#sectionmy .sectionmy2 h2.rss { background:url( http://s45.radikal.ru/i109/1406/43/219daaabb709.png) no-repeat top left; }
#sectionmy .sectionmy2 h2.twitter { background:url( http://s019.radikal.ru/i618/1406/76/98d12801cd3d.png) no-repeat top left; }
#sectionmy .sectionmy2 h2.facebook { background:url( http://i069.radikal.ru/1406/d9/74471340c15b.png) no-repeat top left; }
#sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }

</style>

<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">
<h2 class="subscription rss"><a href=" адрес вашего фида">RSS подписка</a></h2>
<h2 class="subscription twitter"><a href=" адрес страницы в twitter">Twitter</a></h2>
<h2 class="subscription facebook"><a href=" адрес страницы в facebook">Facebook </a></h2>
</div></div>
</div>

А сейчас давайте по порядку. Синим цветом я выделила ширину, цвет рамки и основной фон блока. Воспользуйтесь генератором цвета для подбора своего варианта. Красный цвет-это адрес изображения иконки. Вот тут ваша фантазия безгранична. Можете оставить эти же. Или установите свои изображения. Их достаточно много в интернете. Опять тот же сайт https://www.iconfinder.com подойдёт кстати.

Зелёный цвет адреса ваших страниц в соц.сетях и адрес фида. Если не хотите видеть социальные сети в блоке уберите из кода вот такой фрагмент.

#sectionmy .sectionmy2 h2.facebook { background:url( http://i069.radikal.ru/1406/d9/74471340c15b.png) no-repeat top left; }

Или добавьте, если есть желание показать дополнительные ссылки -одноклассники, ВК и прочие. В этом случае также в секции divов необходимо добавить (убрать) эту строчку.

<h2 class="subscription facebook"><a href=" адрес страницы в facebook">Facebook </a>

Можно вообще оставить только рассылку. Вот как-то так.

Сказать к вышеописанному мне больше нечего. Проявите своё терпение и фантазию при создании такой формы подписки. Спрашивайте в комментариях если появятся вопросы. Разберёмся.

До новых встреч. Удачи вам. Увидимся.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email