БлогСфера

Доброго всем времени суток! В прошлом уроке мы зажгли наш feedburner и поставили на сайт форму подписки по электронной почте.

Как кому, но мне эта форма подписки fedburner не нравится и я решил её улучшить. Для этого нам понадобится немного терпения и фантазии. Знания кода HTML в минимум варианте, или вообще не понадобится, «Делайте как я, делайте со мной, делайте лучше меня» — была такая передача родом из ГДР (Германия) в советские времена .

Если вы уже ставили форму то знаете, что она имеет вот такой не затейливый вид.

Я немного поработал и получил вот такую форму, она не ахти какая из себя, но всё же лучше оригинала…

Если хотите нечто подобное, тогда следуйте за мной.

Для начала возьмём форму подписки feedburner на своём аккаунте этого ресурса. Зайдём в Feedburner во вкладку «Публикуй» и пункт «Подписки по электронной почте»

выбрать русский язык и скопировать код подписки. Можете сразу вставить в виджет на своём блоге пройдя в консоль —  виджеты и выбрав виджет текст 

вставив его в сайдбар, раскрыть виджет, вставить код и приступить к редакции кода формы подписки.

Или второй вариант вставьте скопированный код в обычный блокнот и приготовьтесь к редакции.

Итак начнём…

Заменим сперва кнопку которая не имеет привлекательности. Для этого мы найдём подходящую в гугл картинки или других ресурсах с изображениями. Если там варианты вас не устраивают, то перейдите на онлай ресурс который и создан производить красивый текст и кнопки, мы зайдём в функцию производства конопок, выбираем подходящий вариант и делаем кнопку

Здесь невероятное количество подбора вариантов вида кнопки можно произвести самому. Потренируйтесь, даю гарантию вам понравится. На этом ресурсе можно не только кнопки делать , но и Крутой текст, так этот ресурс и называется Cool Text. Готовый вариант  кнопки скачиваем себе на компьютер, можно конечно и взять HTML код или послать себе на email, но это надо регистрироваться и потом нам HTML не важен мы сами его пропишем.

Итак кнопка готова и загрузим её на свой хостинг. Я надеюсь вы не забыли как это делается. Через FTP — доступ, например Filezilla в папку либо «www»,  либо «public.html», название папки зависит от вашего хостинга/ Картинка на хостинге, берём её адрес, адрес таков

http:www. ваш домен/название картинки.jpeg , готово. Также можно загрузить картинку через wordpress и не проставляя в текст просто взять ссылку на медиафайл. Дальше идём к нашему коду который вставили в блокнот или виджет для редакции.

Нам нужно поменять несколько строчек. Для начала нужно их найти, затем поменять на другие. Или  код у вас в блокноте, или в виджете, без разницы, кликаете комбинацию клавиш «Ctrl» + «F» откроется форма поиска и введёте  строчку кода которую нужно заменить. В нашем случае это кнопка

Меняем на такую строчку

Ясное дело что размер 220 х 51 выбирайте по вашему сайдбару, либо меньше, либо больше…

Следующее что мы можем сделать это поменять цвет заливки нашей формы подписки.

Находим вот такой код, если вы помните, кликнув по HTML тексту левой кнопкой мыши и набрав  комбинацию клавиш «Ctrl» + «F»

и меняем на этот

• width:236px — это ширина нашей окантовки с заливкой,
• background-color: #F9FABE — это цвет заливки,
• border:3px — это окантовка, бордюр (толщина),
• solid #C0C409 — цвет бордюра

цвета заливки и окантовки можно выбрать подходящий именно вам. Вот возьмите для помощи таблицу кодов цвета и выбирайте

Выбрав нужный цвет пропишите в коде вместо моего предложенного.

Наше следующее действие, пропишем надпись «Введите ваш email» ? для этого находим код

и меняем его на этот

теперь добавим » Хотите получать обновление блога на e-mail? «, находим

и меняем на:

теперь уберём ссылку на FeedBurner:

Чтобы не портила нам всю картину. Вот и готова наша собственная  форма подписки feedburner 

Как видите ничего сложного, проще пареной репы 🙂

Всем удачи, успехов в блогостроении и вообще вжизни!