Пример красивой формы подписки для feedburner

Всем привет! Что-то я давно ничего не писал… Все времени нет, работа, работа, работа… Сегодня я предоставлю вам пример простого кода для формы подписки. Код будет мой, но если понять суть, а по точнее — где что вставляется и редактируется, у Вас получится уникальная форма подписки, которой нет ни на едином блоге!

Сам код я взял стандартный, feedburner’овский, только немного усовершенствовал его:

Вот код CSS стилей:

#sub-mail input.s {
background: url(«../img/subscribe.png») no-repeat scroll -140px -120px transparent;
background-image: url(http://allproall.com/wp-content/themes/CrazyLab/img/subscribe.png);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: scroll;
background-position-x: -140px;
background-position-y: -120px;
background-origin: initial;
background-clip: initial;
background-color: transparent;
border: medium none;
color: black;
float: left;
font-family: Georgia;
font-size: 12px;
font-style: italic;
height: 34px;
margin-left: 5px;
margin-top: 5px;
padding: 0px 10px;
width: 200px;

}

Его мы должны разместить в редакторе:

 

Разместить в таблице стилей в любом месте. Просто скопировать и вставить, ничего сложного нет.

 

Потом разместить код HTML в нужном Вам месте. Я разместил его, как видите, сразу после поста. Вот и сам код:

<div class=»subscribe»>
<strong>Понравился материал? Подпишись на обновления!</strong>
<p><form style=»" action=»http://feedburner.google.com/fb/a/mailverify» method=»post» target=»popupwindow» onsubmit=»window.open(‘http://feedburner.google.com/fb/a/mailverify?uri= ССЫЛКА НА ВАШ RSS ‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true»>

<div id=»sub-mail»>
<input onfocus=»if(this.value==this.defaultValue)this.value=»;» onblur=»if(this.value==»)this.value=this.defaultValue;» class=»s» name=»email» value=»Введите em@il адрес» type=»text»>
<input value=» ССЫЛКА НА ВАШ RSS » name=»uri» type=»hidden»>
<input name=»loc» value=»ru_RU» type=»hidden»>
<input value=»Subscribe» class=»btn2″ src= http://www.it-world.pp.ua/» ССЫЛКА НА КАРТИНКУ КНОПКИ » type=»image»>
</div>
</form></div>

 

В том месте, где потребуется вставить ссылку на ленту, Вы должны вставить только префикс, тоесть то, что идет после слэша!

Например: ссылка моего RSS «http://feeds.feedburner.com/It-worldrss», но вставить мне нужно только It-worldrss.

Там где нужно вставить ссылку на картинку кнопки, соответственно вставляйте заранее подготовленную картинку, размещенную на Вашем сервере. Кнопку можно сделать двумя способами: нарисовать в фотошопе или сделать в генераторе кнопок. Я выбрал второй вариант

Вот хороший генератор кнопок на любой вкус: http://cooltext.com/Buttons. Выбирайте понравившийся дизайн, форму, цвет, вписывайте свою надпись и… и вообщем-то все! Скачивайте кнопку и грузите на сервер!

Теперь покажу, куда я разместил хтмл код на своем блоге:

Опять заходим в редактор, выбираем файл «Одна запись» (англ. single.php), добавляем под код после окончания контента. В большинстве шаблонов код следует добавлять после строчки <?php the_content(); ?> .

Вот и все. Экспериментировать с этим кодом можно много, главное знать, чего хочешь! Например я, когда писал этот пост, придумал как заключить форму в табличку средствами css-кода. Посмотрите как было/

и как стало сейчас…

Кому нужен код с табличкой, пишите в комментах