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

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

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

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

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

Попробуем его немного изменить. В первую очередь сделаем все надписи на русском языке. Если само название гаджета мы сможем исправить непосредственно при создании, то всё остальное будем править в шаблоне блога. Идём во вкладку шаблон, делаем резервную копию и нажимаем изменить 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;
}

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

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

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

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