amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} /* Inline styles */ h2.acss2f015{text-align:center;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}

Categories: Дизайн сайтаНовичкам

Красивая форма подписки FeedBurner

В одной из наших статей мы говорили о том, как сделать форму подписки FeedBurner на своём сайте. Но тот, кто попробовал создать такую, наверняка заметил скудность её дизайна. Форма подписки Feed Burner представляет собой просто белое поле с местом для ввода электронной почты, подтверждающей кнопкой и коротким призывным сообщением.

Эта очень грустная форма может быть легко преобразована в яркую, красивую и привлекательную форму подписки. Для того чтобы разобрать этот вопрос, нам придётся окунуться в кодовые дебри.

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

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

Первая строка должна начинаться на <form style… Здесь следует убрать ненужную рамку border:1px solid #ccc; и вместо неё написать фон background-color: #000000; Параметр #000000 можно настроить по собственному желанию – это цвет фона.

Вторая строка должна представлять собой надпись <p>Enter your email address:</p>. Её надо заменить на следующий код:
<img style=”width: 000px; height: 000px;” src=”адрес картинки”/></p><p>сообщение о призыве подписаться<strong></p>
Width и height – это показатели высоты и ширины картинки. Необходимую картинку надо сначала загрузить на хостинг, а потом указать её адрес. Сообщение о призыве подписаться следует написать на самой картинке или перед этим кодом. При этом к надписи могут быть применены соответствующие коды, характеризующие стиль текста: жирность, курсив, размер и т.п.

Третья строка начинается с <p><input type=”text”… Она отвечает за поле ввода адреса почты. Её надо удалить и вместо неё написать:

<p>input id=”src” style=”width: 000 px; background-color: #fff;” type=”text” name=”email” value=”Введите email” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;” /></center></p>

Width – показывает ширину поля ввода электронной почты. Можно отредактировать надпись в поле ввода.

Четвертая строка начинается на <input type=”hidden… Её оставляем как есть.

Пятая строка начинается на <input type=”hidden”… Её заменяем на:

Эта строка на кнопку, на которую надо будет нажать, чтобы подписаться. Её картинку надо загрузить на хостинг и указать в коде адрес к ней. Width и heigh показывают размеры картинки.

Шестая строка начинается на <p>Delivered by <a href… Её полностью удаляем и вместо неё пишем конец формы </form>.

Всё. Если полученный код поставить в виджет, то вы получите красивую форму подписки на свой сайт, вместе с вашими картинкам. Помните, что от цветов и картинок значительно зависит успешность формы. Мы писали об этом в статье о рекламе.

Адель Гадельшин