Як встановити красиву форму підписки rss на блог

Вітаю Вас на своєму блозі!
У цій статті я вирішив показати і пояснити, як встановити красиву форму підписки rss на блог, щоб надати своєму сайту унікальність і зробити його більш привабливим зовні.
Ця тема підійде не тільки для сайтів на WordPress, але і для інших двигунів, так як код RSS не відрізнятиметься друг від друга на різних движках, та й файл * .css працює за єдиним правилом для всіх двигунів.

Скажу відразу, це не моя розробка, я знайшов цей варіант в мережі, не знаю хто автор, але цей варіант працює, я його перевірив на декількох шаблонах і різних формах підписки rss.
Я постараюся більш детально пояснити, як це робиться, щоб в цьому зміг розібратися кожен початківець веб-майстер.

Тут я розгляну два варіанти, як можна встановити красиву форму підписки rss на блог, простий і складніший.
Красивих форм для підписки в мережі багато, на будь-який смак, так що вибирайте те, що вам подобається і встановлюйте її на свій блог. Особливо це відноситься до універсальних шаблонах загального користування, так як надання йому унікальності, це окрема тема для статті.

Найпростіший спосіб зробити форму підписки унікальною, це поставити в якості фону гарне зображення.
Ви встановлюєте стандартну форму, укладаєте її в div блок і фоном для цього блоку встановлюєте картинку.

Наприклад так:

Цей код в віджет або файл шаблону:

XHTML1class="Podpiska"gt;

Цей код в файл css:

CSS1.podpiska {background:url(images / podpiska_post.jpg)no-repeat# f7f7f7-}

В результаті цього у вас буде форма приблизно такого вигляду:

Як встановити красиву форму підписки на блог



Але якщо ви хочете встановити форму з гарним дизайном, текстом і кнопкою, то простий зміною фону тут не обійтися. Але складного і тут нічого немає, просто потрібно зрозуміти, як все працює.

Ось приклад готових форм для підписки, які я встановив на різні сайти:

Як встановити красиву форму підписки на блог

Відео: Як зробити і встановити красиву форму підписки на сайт

Як видно з цього прикладу, обмежень на вид форми немає ніяких, встановити можна абсолютно будь-яку форму.

При установці нової форми, дотримуйтесь послідовно, підганяючи кожен елемент по порядку:
1. Основна форма.
2. Форма введення даних.
3. Кнопка підписки.

Як встановити красиву форму підписки на блог

На зображенні все наочно зображено.

Тепер від теорії перейдемо до практики, а точніше до самого коду, який і потрібно буде редагувати.
Спочатку потрібно буде змінити стандартний код форми підписки сервісу feedburner.
Нижче на зображенні я показав, як його потрібно змінити.

Як встановити красиву форму підписки на блог

Те, що виділено червоним, то видаляєте, то що зеленим, то дописуєте.
Зверніть увагу, якщо ви будете встановлювати свою кнопку, то напис "Підписатися", або що у вас там буде написано, потрібно буде видалити і залишити просто лапки.

Ось код rss, тільки адресу свого фида не забудьте поставити.

XHTML123456789101112class="Cell-subscription"gt; class="Cell-subscription-info"gt;

Далі додайте код css в шаблон свого сайту.

CSS123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960/ * Форма Підписатися на E-Mail ------------------------------------------* / .cell-subscription { float:left- width:245px- height:156px- text-align:center- background:url(images / tab.jpg)no-repeat- margin:-15px020px-13px- } .cell-subscription-info { float:left- width:200px- padding:10px15px- margin:5px6px5px5px- border-radius:3px- } .cell-subscription-info input { font:11pxVerdana, Arial, Helvetica,sans-serif- padding:5px10px- border-radius:3px- margin:70px0px0px21px- width:140px-

Відео: Як поставити красиву форму підписки в колонку WordPress?

height:13px- }

Відео: Налаштування RSS стрічки і форми підписки в WordPress

.cell-subscription-info p { float:left- width:100%- padding:0px- margin:0px- } .subscription-input{ float:left- width:180px- margin:10px0px- background:#FAFAFA- border:1pxsolid# CAD3DA- color:# 555- } .subscription-input: focus {box-shadow:inset0px0px3px# e6e6e6!important-} .subscription-button { cursor:pointer- background:url(images / button.jpg)no-repeat!important- border:1pxsolid# 8d592c!important- text-shadow:1px1px1px# 258b10!important- font-weight:bold!important- color:#fff!important- width:120px!important- height:30px!important- margin:7px0px0px5px!important- } .subscription-button: active {box-shadow:inset0px0px3px# 23880e!important-} .subscription-button: hover {background:url(images / button2.jpg)no-repeat!important-}

Тільки врахуйте, що це тільки початковий шаблон коду, який потрібно буде змінювати і підганяти форму за місцем на сайті.
Як я вже говорив, починайте підганяти по порядку коду, зверху вниз.
Всі назви файлів замініть на свої, кольору і оформлення зробіть на свій смак.

Обов`язково перевірте, як виглядає ваша форма в різних браузерах, це позбавить вас від неправильної настройки форми. Наприклад Mozilla і Chrome можуть по різному показувати вашу форму, ну це тільки в тому випадку, коли ви не правильно встановіть параметри у файлі css.
Сподіваюся, що ця стаття вам допоможе зробити ваш блог більш красивим і унікальним.

Якщо у вас виникнуть труднощі з установкою форми на блог, то за невелику оплату, я допоможу вам його налаштувати, пропозиції пишіть в коментарях, я їх прочитаю, але публікувати не буду.

Якщо ви хочете відмовитися від отримання розсилки rss з будь-якого блогу, то прочитавши цю статтю, ви дізнаєтеся, як це зробити.

І під кінець найсолодше ...

конкурс коментаторів

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!