Меняем дизайн виджета подписки в блоге

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


Однако меня то дизайн не устраивает, то ссылки на сторонние ресурсы, то ещё какие заморочки. Вот сегодня и хочу поговорить о том как установить и изменить дизайн гаджета подписка по электронной почте.

Ну с установкой всё вполне стандартно. Заходим во вкладку дизайн-добавить гаджет и выбираем нужный

подписка


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


Попробуем его немного изменить. В первую очередь сделаем все надписи на русском языке. Если само название гаджета мы сможем исправить непосредственно при создании, то всё остальное будем править в шаблоне блога. Идём во вкладку шаблон, делаем резервную копию и нажимаем изменить HTML. Нам понадобиться в списке виджетов найти нужный, который мы только создали.  С помощью клавиш CTRL+F ищите вот такую строчку в коде  <b:widget id='FollowByEmail1' locked='false' title='хотите оформить подписку' type='FollowByEmail'>. Она может несколько отличаться у вас, но начало должно всё равно быть таким <b:widget id='FollowByEmail1' 

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

<input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>    
       <input class='follow-by-email-submit' type='submit' value='Submit'/>
       <input expr:value='data:feedPath' name='uri' type='hidden'/>
       <input name='loc' type='hidden' value='en_US'/>

В нём мы и меняем то, что я выделила красным. Email address...впишите своё. Например "введите ваш Email" или что-то типа того. Submit-поменяете на подписаться. И заменим   en_US на  ru_RU. Вот и все настройки. Если вам этого достаточно, сохраните шаблон и увидите изменённую форму подписки.

Однако, можно ещё немного поменять внешний вид. Задать ширину поля ввода адреса. Изменить основной фон кнопки подписаться и её фон после наведения.

Для этого тут же в шаблоне найдите строку  ]]></b:skin> и над ней вставьте следующий CSS код.


.FollowByEmail .follow-by-email-inner .follow-by-email-address {
.width:100%;
height:22px;
font-size:13px;
border:1px inset
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
background:#d3d3d3 !important;
background:rgba(0,0,0,.6);
color: #cd5c5c;
font-size:13px;
height:24px;
z-index:0
}
.follow-by-email-inner .follow-by-email-submit:hover {
background:#fdf5e6 !important;
}


Строчки, выделенные красным цветом, отвечают за поле ввода адреса, синим цветом-фон и размеры кнопки подписаться. И зелёным - это цвет кнопки при наведении на неё курсора. В итоге, если захотите поменять значения на свои, получиться ваш уникальный блок подписки по электронной почте. Удобно вам, удобно вашим посетителям, которые захотят подписаться на все обновления блога.

Всё на сегодня. Скоро увидимся снова.
Удачи нам всем.


Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :

6 комментариев:

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

    ОтветитьУдалить
  2. Не совсем поняла. О какой кнопке подписки ты говоришь. Зашла к тебе на блог и не вижу этой кнопки.

    ОтветитьУдалить
    Ответы
    1. Этот комментарий был удален автором.

      Удалить
    2. Стандартный блогеровский гаджет в конце бокового столбца: поле поиска и кнопка "поиск".

      Удалить
    3. Меняй в коде background:#d3d3d3 !important;
      background:rgba(0,0,0,.6);
      color: #cd5c5c;
      font-size:13px;
      height:24px
      на свои значения и это тоже. background:#fdf5e6 !important;

      Удалить
    4. В посте есть ссылка на статью где весь код подробно расписан.

      Удалить

Пользовательский поиск