Красивые формы подписки

формы подписки

 

 

Как сделать красивые формы подписки на канал Ютуба, группу вКонтакте и конечно на Смартреспондер. Если делать по моей инструкции, то легко, быстро и красиво.

Красивые формы подписки

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

Сегодня в статье, Вы узнаете про:

[—ATOC—]
[—TAG:h2—]

Ознакомились? Кому какой пункт надо, можете смело кликать и переходить. Потому как я поставил сегодня первый раз оглавление, благодаря плагину Bainternet Simple TOC про который я прочитал у Игоря в этой статье. Спасибо друг, мне плагин понравился и я принял его на вооружение. Как он смотрится решать Вам, мои дорогие  читатели. Надеюсь Вы напишите про это в комментариях.

 А я продолжу. И первое что мы с Вами сделаем это красивая подписка на канал Ютуба.

1. Подписка на ютуб

000220Хотите и себе такую форму подписки? Давайте как всегда детально рассмотрим и сделаем такую же форму, но только на Ваш канал. Да не забудьте подписаться на новые статьи в самом низу, так как скоро будет еще много полезных советов и статей. Поэтому я хочу чтоб Вы не пропустили интересный материал, будьте первыми.

Для начала Вам надо зарегистрировать свой канал на Ютубе. Как это делать, я объяснять не буду, надеюсь с этим этапом проблем у Вас не возникнет. Зарегистрировались? Теперь переходим вот сюда.

Ytub1Нажимаем выделенный пункт и попадаем дальше.

Ytub2Теперь жмем Дополнительно и нам открывается наконец то, что нам и нужно.

Ytub3Вот именно этот самый Идентификатор Вам и надо. Копируете его и вставляете в форму подписки, которую надо скачать вот здесь.

Форма подписки Ютуба

Скачали распаковали архив и получили вот такой текстовый файл.

Ytub4

Вот в это место Вам и надо вставить Идентификатор, который Вы скопировали как я и говорил выше.  А теперь идете в Админку своего блога и вставляете этот код, в нужный Вам сайдбар. Как вставлять код или картинку в сайдбар, я думаю Вы знаете. Все на этом данный урок закончен. Простите меня за мою забывчивость, но лучше поздно, чем никогда. Просто в коде вот эти параметры ( height: 105px; width: 300px;) надо подогнать под размер своего сайдбара.

Так что теперь у Вас есть возможность подписаться на мой канал или же просто смотреть когда появятся новые видео.

Теперь давайте перейдем ко второй части, это виджет вКонтакте.

2. Виджет вКонтакте

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

000221После того как группа создана, нажимаем на название группы и спускаемся в самый низ страницы. Там нажимаем разработчикам.

vidgetА после жмем сюда.

vidget2Потом выбираем то, что мы хотим отобразить в самом виджете. Я выбрал этот пункт, а Вы как хотите.

vidget3После нажатия нас перекидывает на уже готовый код.

vidget4Здесь отмечаем то, что мы хотим увидеть. То есть Участники. Новости. Только название. Потом копируем код. При этом можете подогнать размер под свой шаблон, а также выбрать цвет. Здесь полная Ваша фантазия. Все, легко и быстро. Ну а для того чтоб поставить виджет, идем в админку блога или сайта, а там как обычно. Выбираем место для виджета и вставляем туда скопированный код. Я себе виджет не ставил, так как у меня мало подписчиков. Поэтому как это выглядит у меня не покажу. Но если у Вас что то не получится, то пишите помогу обязательно.

Да, кто-то говорит, что надо верхнюю часть кода, прописывать в какой то файл. Я этого не делал и мой совет, попробуйте сразу так как  показал я, но а если не будет работать, пишите будем разбираться. На этом у меня  все.

Теперь переходим к последней части нашей статьи.

 

Красивая форма подписки для сервиса Смартреспондер. Это довольно просто. Читайте инструкцию и применяйте на практике.

3. Как сделать красивую форму подписки для Смартреспондера

Скажу честно, перерыл почти весь интернет, при этом искал где то часа два, пока не наткнулся на блог для начинающих вебмастеров. Автор блога Денис, вот как раз у него я и нашел наконец то что искал. Как Вы все знаете я не очень разбираюсь в кодах, но мне так захотелось сменить вот эту мою старую форму подписки,

Screenshot_193что я решил рискнуть. И вот теперь, давайте я покажу Вам как сделать то, что у меня получилось. Кому не терпится, можете перемотать в низ и посмотреть. А остальных я приглашаю принять участие в создании данного шедевра.

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

<form onsubmit="return SR_submit(this)" method="post" action="http://smartresponder.ru/subscribe.html" target="_blank" name="SR_form_2_61"> <input type="hidden" value="1" name="version"><input type="hidden" value="0" name="tid"><input type="hidden" value="" name="uid"><input type="hidden" value="ru" name="lang"><input type="hidden" value="000000" name="did[]"> /* меняем на свой индетификатор*/<div id="optin"><h3>Подпишись</h3><input type="text" tabindex="900" onblur="if(this.value==)this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=;" value="Введите Ваше Имя" class="name" name="field_name_first"><input type="text" tabindex="901" onblur="if(this.value==)this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=;" value="Введите Ваш E-Mail" class="email" name="field_email"><input type="submit" value="ПОДПИСАТЬСЯ!" name="SR_submitButton"></div> </form>

Единственное что надо сделать, так это поменять в вот эти шесть нолей «000000» на свой идентификатор, который можно посмотреть на сервисе вот здесь.

Screenshot_195Вот такие 6 цифр у меня.

Screenshot_194Вы же, находите свой, копируете и меняете нули на цифры. Вот и вся премудрость, наша форма уже готова и полностью в рабочем состоянии. Денис еще в придачу к коду, предлагал и файл стилей, но и без них форма вполне работоспособна. И так как я в кодах не сильно, то и файл стилей показывать не буду. Хотите можете заглянуть к нему и в этой статье посмотреть сам файл.

Что же я сделал дальше? Да просто взял и заключил данный код в рамку и добавил туда обычную фотографию. Делал я это по принципу красивого HTML письма, о котором я писал ранее. Просто в связи с переездом, некоторые статьи еще не восстановил. Так что подпишитесь на обновления, чтоб не пропустить. А принцип действия простой. Делаете таблицу. Вот код таблицы.

<table align="center" bgcolor="f7f5f8" border="1" cellpadding="20" cellspacing="4" width="365">

<tbody>

<tr>

<td>

И вот в это место вставляем фото, а потом и форму подписки.

</td>

</tr>

</tbody>

</table>

Вот теперь все. Единственное что еще я сделал, так это создал отдельную страничку подписки, потому как  в сайдбаре, форма нормально работать отказалась. Но тем не менее при клике на форму, Вы сразу попадете туда куда нужно. Как говорят, все гениальное просто. Надеюсь данный пост помог Вам поменять и сделать себе красивые формы подписки.  А я на этом говорю до свидания. Да и не забудьте подписаться через красивую форму на обновления блога, дабы не пропустить нового и интересного.

Автор блога Андрей Косолапов.

Комментируйте, делитесь с друзьями и подписывайтесь на новые статьи.

Подпишись и не пропусти нового и интересного.

  Привет, любимая ! Чем сейчас занимаешься?

— Рыбу заливную делаю…

— Ого! А ты умеешь?!
— А ,то! Кусок воблы, глоток пива…!!!

 

Подписка на новые статьи здесь. Просто нажми. 

11940_1000

65 комментариев: Красивые формы подписки

    • andrey говорит:

      Привет! Просто прописал тег h2 и все,мне пока хватит. А что ты еще можешь посоветовать. Мне даже интересно. Плюс все это содержание, я взял в рамку 

      • Аааааааааааааааа Это другой плагин, не тот что у меня! Сейчас понятно! Тогда всё нормально, вот только не знаю, стоит ли его прописывать в тег h2

          • andrey говорит:

            Игорь, а по другому он не работает Так что прописывать надо. Нумерацию конечно добавить можно, но не хочу. 

        • andrey говорит:

          Кстати о птичках. Только что еще раз перечитал твою статью и именно из за этой фразы

          в каждой статье появится блок с меню

          Я и поставил другой плагин. Мне он понравился тем, что если надо ставим содержание, если нет то не ставим

  • Людмила говорит:

    Андрей, добрый день. По совету Галины Некрасовой попала на Ваш блог. Уж очень мне понравилась ее подписка, она мне сказала, что Вы ей помогали. Сижу над Вашими статьями тремя статьями уже не час, и так не разобралась- как правильно сделать такую подписку. Во-первых, не пойму какого размера она должна быть? Хочу поставить в сайтбар, надо наверное, как-то определить ширину сайтбара. Картинку положим найду свою, вообщем пока не могу разобраться. Подписалась на Ваш блог, давно мечтаю о красивой подписке, но не очень все понятно. Может как-то сможете мне помочь разобраться?

    • andrey говорит:

      Людмила, здравствуйте! Давайте попробуем разобраться с Вашей подпиской. Я напишу Вам на почту.

  • И вот тут я встряну со своими 5-ю копейками…
    Цитата:

    Единственный минус, так это приходиться самому отправлять письма о новых статьях.

    На UniSender, который я использую, автоматическая рассылка есть и бесплатном тарифе.
    Что касательно самой формы… Мне кажется неудобным в данной реализации то, что она открывается в другой вкладке. Почему-бы не сделать во всплывающем окне, например?
    Ну и да, посмотрел видео — честно позавидовал… Природа! Это совсем не то, что жизнь в душном городе, где стекло, бетон… И сам ролик сделан довольно на высоком профессиональном уровне, я считаю. Браво, Андрей!

    • andrey говорит:

      Саша, привет! Я и не спорю на счет UniSender, потому как там не был. Далее, всплывающие окна жуть как не люблю. А на счет ролика, так это не я. Его делали в программе Кантазия, а я с ней не знаком. Так что лавры на этот раз не мне.

      • Цитирую Андрей Косолапов:

        всплывающие окна жуть как не люблю

        Я не про те окна, которые всплывают сами по себе. Они меня тоже крайне раздражают. Я про то, когда ты кликаешь кнопку "Подписаться", вот тогда оно всплывает с формой. Посмотри, как у меня сделано…

        • andrey говорит:

          Саша, я видел. У меня для этого есть в  сайдбаре форма подписки. А такие окна, я пока делать не умею.

  • Алексей говорит:

    Помню эту статью, по моему я еще тогда только сделал на своем блоге новую форму подписки. Кстати, кто не видел, приходите и подписывайтесь на обновление новых статей, только у меня feedburner.

  • Галина говорит:

    Я помню, Андрей, как ты мне помог сделать такую форму, мне до сих пор завидуют. И я сама в восторге до сих пор. Спасибо тебе!

      • Нина говорит:

        Надо посмотреть что там у Галины. А то прям таки интрига. Оказывается не только анекдоты легко получаются, но и работа идет правильно.

  • Татьяна Сова говорит:

    Привет, Андрей! Спасибо за разъяснения по поводу формы подписки. У себя недавно сделала новую, давно хотела). У меня давно есть вопрос, сервис Смартреспондер платный или бесплатный? Я пользуюсьFeedBurner, а многие говорят, что он уже "мертв"…

    • andrey говорит:

      Таня, пожалуйста! На счет смарта, он как платный, так и нет. Я пока пользуюсь бесплатным, потому как нет огромной базы подписчиков. Единственный минус, так это приходиться самому отправлять письма о новых статьях. В платном смарте, рассылка работает как на FeedBurner

        • andrey говорит:

          Так разве это проблема? Делов то, 5 минут. Зато вот такие красивые письма

          • andrey говорит:

            А почему бы и нет. У меня как раз и было это. Подписка на смарт, а в самом низу можно было подписаться и на FeedBurner. Хотя все равно, больше подписывались на Смарт. А на счет отправки писем автоматом, так просто нужно оплатить любой пакет на Смарте и полный вперед.

  • Алексей Щукин говорит:

    Андрей, я прочитал вашу статью.
    Я правильно понял, у вас еще старая версия панели управления youtube?
    Но в принципе, я разобрался, спасибо!

    • andrey говорит:

      Спасибо и Вам! А на счет панели управления не знаю. Может и старая, но я привык и мне там все понятно.

    • andrey говорит:

      Конечно. в сайдбаре, есть кнопка моего канала. Переходите посмотреть.

  • Илья Варенцов говорит:

    Спасибо за такую грамотную и подробную инструкцию! Виджеты для сайтов вообще очень полезная штука, помогающая зарабатывать удаленно:)

  • Кстати, Андрей, спасибо за очень полезную для меня информацию! Я про форму подписки на канал Ютуб… У нас есть корпоративный канал, а вот про подписку на него я как-то не подумал. И мне твоя информация очень пригодится…

    • andrey говорит:

      Спасибо Саша! Рад что и моя информация наконец то пригодилась и тебе. А то только ты мне помогал, вот теперь я хоть немного компенсировал

  • Андрей, все правильно, после установки плагина, блог содержания автоматически появится во всех статьях, но…
    Во-первых, он появится только в тех статьях, в которых есть определенное количество заголовков, которые ты отметил в настройках плагина.
    Во-вторых, для того, чтобы блог не появился в определенной статье, нужно в любое место вписать специальный шорткод и тогда содержания не будет.
    Кстати, ты меня прости неблагодарного болвана!!!! Ты упомянул меня и мою статью, всем посоветовал, дал ссылку, а я взял, да еще и наехал на тебя со всякими ненужными настройками!
    Извини друг! Я тебе безмерно благодарен!

    • andrey говорит:

      Так ты и так, благодаришь в каждой статье, так что не парься.А на счет вставки шорткода, так я ж ленивый. Или вдруг забуду. Так что первый плагин мне понравился больше. СЕйчас верну еще один блок подсветки текста, будет вообще супер!

  • Ну да, согласен, первый плагин и проще и меньше грузит и возни с ним поменьше.
    Ладно, посмотрим как будет выглядеть меню с дополнительным блоком подсветки.

    • andrey говорит:

      Иди, смотри. Может опять не понравится, главное скажи, я поменяю не проблема

          • Нет Андрей! Ты меня прости конечно, но если ты не хочешь, чтобы я тебе льстил просто так, только лишь бы не огорчать, то скажу правду! Это плохо, но это только моё мнение (я не показатель) может быть остальным понравится, тогда какая разница что я думаю! На мой взгляд, самый первый вариант меню, тот который был светлый, самый удачный!  

          • andrey говорит:

            Спасибо за честность. Я вообще убрал эти рамки. Без них думаю будет лучше.

          • Спасибо тебе за понимание! Андрей, сейчас намного лучше. Кстати, нежная и светлая рамка совсем не помешает. Так что, если в настройках плагина такую найдёшь, то можешь смело ставить!

          • andrey говорит:

            Игорь там по моему такой нет. Ладно, что нибудь придумаю, не первый раз

          • А ну да, там в настройках нет рамок на выбор, всё правильно! Ну тогда через отдельный плагин оформления текстов, у тебе же их куча установлена cheeky Что-то найдёшь 

          • andrey говорит:

            Тоже мне куча. Для текстов, всего два  Правда можно с настройками поиграться, может что то и выкручу 

  • Михаил ATs говорит:

    …Единственное смутило, это то, что вставка фотки в табелях <td  >  — это для адаптации с мобилами проблематично (я бы сказал не верно), хотя "ковырянием" можно добиться некоего результата.

    …и ещё, мож быть, неплохо бы поменять value="Введите Ваше Имя" на  placeholder="Введите Ваше Имя" — так попроще вводить данные.

    • andrey говорит:

      Михаил, это уже вариации лично каждого. Я показал так сказать шаблон, а приводить в божеский вид каждый должен сам. 

      Но тем не менее спасибо, может кому то и пригодится.

  • Михаил ATs говорит:

    Может, и пригодится…

    А я там уже к Вам направил читателя (он сетовал, что у меня не достаточно подробно показано решение оптимизации кода), а здесь в статье есть пример кода, хотя и от смарта: думаю, поможет в изучении — принцип один.

    • andrey говорит:

      Принцип вроде как один, но на основе его пробовал отредактировать подписку. Увы ничего сходу не получилось, а ковыряться дальше не стал. А за направление читателя отдельное спасибо.

  • Софья говорит:

    Андрей, привет! А Смартреспондер сейчас не актуален, ты сейчас чем пользуешься для рассылки писем?

    • andrey говорит:

      Не а, у меня на нее другие виды. Так что пусть пока висит.  Кстати привет!

        • andrey говорит:

          Привет! Нормально. Снега правда много нет, впрочем как и лыж  Да и ездил я на них, когда мне было лет 9, потом зимой у нас, не было снега. 

          А тебе удачи, главное не сломать лыжи и прочее.

          • Игорь говорит:

            Ну у нас с этим делом обстоит нормально, снега море  А сейчас еще и морозяка приличный.

            За все время две пары лыж поломал и одну ногу

            Я просто первый юношесткий в свое время имел

  • Надежда говорит:

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

    • andrey говорит:

      Надежда, спасибо за оценку подписки. Как надумаете делать себе, то не вопрос, помогу чем смогу. Так что смело обращайтесь.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Поиск по блогу
People group
Рубрики блога
Курсы Евгения Попова

Контекстная реклама, за сатошики при чем платит реально

Подписная страничка за 5 минут

Подписка на обновления

Подписка на новые статьи здесь. Просто нажми. 

11940_1000
Группы Субскрайба

Хочу Всё Знать. Полезные Советы

Мой Ютуб
Старые записи