alt

Всем привет ! Сегодняшний пост будет посвящён RSS, а в особенности форме подписки на новое обновление по E-Mail. Ну это потом а сейчас новости на блоге. Пусть они и не будут релевантны к данной странице, но ничё Улыбаюсь

Новости на блоге.

Для начала хочу сказать, что я принял участие в конкурсе практически одновременно с окончанием принятием заявок. Конкурс называется "Top-10" от Сергея Шелвина (кстати хороший у него блог, советую почитать shelvin.ru ) суть конкурса вы пишите пост/статью содержащую 10 пунктов, заголовок которой должен содержать слова Топ-10. Очень перспективный конкурс, так как даже самый новичок может поучаствовать выложив свою статью которая по сути будет топ чеГо-То. Ах да белое пятно конкурса призовой фонд его 500$. 1-е место 200$, а также куча плюшек: Ретвит поста, прямая ссылка (тИЦ 325) и т.д. И ещё инвайт на MarkDay.ru это второе белое пятно конкурса Смешно.

Пост для конкурса я писал быстро (даже очень) так как окончание принятия 29 марта 23:59, я успел отправить 23:45. По моему скромному мнению ИМХО неплохо получилось, да что там почитайте сами Топ-10 лучших спаленных тем блогосферы.

Да также немного поправил шаблон этого блога возможно этого не заметно, но я изменил немного его ширину, в последствии и правую колонку, для того, чтоб форма подписки на E-Mail выглядела корректно, не вылазела и не переносилась, на следующую строку. Это меня и справоцировало на написание данного поста ! Ах да чуть не забыл завёл twitter. Пока незнаю зачем завёл и для чего он, но думаю он нужен (какая-то тупая логика) Смешно. Скоро его оформлю и размещу на сайте ссылку, ретвитт и т.д (пока в этом плаваю если где то ошибся про твиттер поправьте). Ну а теперь к теме поста, а именно к форме подписки.

Красивая форма подписки по E-Mail

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

Подписка, форма

Меня она не устраивала, 150px (в высоту) безобразия. То, что я предлагаю смотрите скрины ниже. (помацать нельзя не хотел код засорять Улыбаюсь)

1. Первая красивая форма подписки по E-Mail

alt

Для того чтоб настроить форму под ваш FEED надо сделать следующее:

  • Находим эту строчку onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=vsegonet' vsegonet меняем на часть ссылки нашего Feed’а ПОСЛЕ Слеша (/) вот так к примеру у меня http://feeds.feedburner.com/cms-allru в итоге получается onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= cms-allru'

  • Находим input value="vsegonet" name="uri" Опять же vsegonet меняем на часть ссылки Фида после слеша в моём случае это cms-allru.

<div class="subscribe">
<form style="" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=vsegonet', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">


<div id="sub-mail">


<input onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" class="s" name="email" value="Подпишитесь на E-Mail" type="text">


<input value="vsegonet" name="uri" type="hidden">


<input name="loc" value="ru_RU" type="hidden">


<input value="Subscribe" class="btn2" src="http://allproall.com/wp-content/themes/CrazyLab/img/subbtn.png" mce_src="http://allproall.com/wp-content/themes/CrazyLab/img/subbtn.png" type="image">






</div>


</form></div>


Приступаем к красоте нашей формы, добавляем стили к нашему сайту. А именно прописываем стили подписки в файле стилях вашего шаблона. Вот код:

#sub-mail input.s {
background: url("../img/subscribe.png") no-repeat scroll -140px -120px transparent;
background-image: url(http://allproall.com/wp-content/themes/CrazyLab/img/subscribe.png);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: scroll;
background-position-x: -140px;
background-position-y: -120px;
background-origin: initial;
background-clip: initial;
background-color: transparent;
border: medium none;
color: black;
float: left;
font-family: Georgia;
font-size: 12px;
font-style: italic;
height: 34px;
margin-left: 5px;
margin-top: 5px;
padding: 0px 10px;
width: 200px;

}

2. Вторая красивая форма подписки по E-Mail

alt

Для того чтоб настроить форму под ваш FEED надо сделать следующее:

  • Находим эту строчку onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=vsegonet' vsegonet меняем на часть ссылки нашего Feed’а ПОСЛЕ Слеша (/) вот так к примеру у меня http://feeds.feedburner.com/cms-allru в итоге получается onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= cms-allru'

  • Находим input value="vsegonet" name="uri" Опять же vsegonet меняем на часть ссылки Фида после слеша в моём случае это cms-allru.

<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=tntbystc&#39;,
 &#39;popupwindow&#39;, 
&#39;scrollbars=yes,width=550,height=520&#39;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='tntbystc'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input alt='' class='mbtbutton' title='' type='submit' value='Submit'/>
</form>

И добавляем в файл стилей вашего шаблона, эти стили:

.mbttext {

background:
url(http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/s28/w2b-mail.png)
no-repeat scroll 4px center transparent;

padding:
7px 15px 7px 35px;

color:
#666;

font-weight:
bold;

text-decoration:
none;

border: 1px
solid lightGrey;

-moz-border-radius:
4px;

-webkit-border-radius:
4px;

border-radius:
4px;

-moz-box-shadow:
1px 1px 2px #CCC inset;

-webkit-box-shadow:
1px 1px 2px #CCC inset;

box-shadow:
1px 1px 2px #CCC inset;

}

 

.mbtbutton
{

color:
#666;

font-weight:
bold;

text-decoration:
none;

padding:
6px 15px;

border: 1px
solid lightGrey;

cursor:
pointer;

-moz-border-radius:
4px;

-webkit-border-radius:
4px;

-goog-ms-border-radius:
4px;

border-radius:
4px;

background:
#FBFBFB;

background:
-moz-linear-gradient(top, #FBFBFB 0%, #F4F4F4 100%);

background:
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB),
color-stop(100%,#F4F4F4));

background:
-webkit-linear-gradient(top, #FBFBFB 0%,#F4F4F4 100%);

background:
-o-linear-gradient(top, #FBFBFB 0%,#F4F4F4 100%);

background:
-ms-linear-gradient(top, #FBFBFB 0%,#F4F4F4 100%);

filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB',
endColorstr='#F4F4F4',GradientType=0 );

background:
linear-gradient(top, #FBFBFB 0%,#F4F4F4 100%);

}

3. Третья очень красивая форма подойдёт для размещения под постом.

alt

Её плюс в том, что не использовано ни одной картинки, всё сделано при помощи CSS, что даёт малый вес !
Для того чтоб настроить форму под ваш FEED надо сделать следующее:

  • Находим эту строчку onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=vsegonet' vsegonet меняем на часть ссылки нашего Feed’а ПОСЛЕ Слеша (/) вот так к примеру у меня http://feeds.feedburner.com/cms-allru в итоге получается onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= cms-allru'

  • Находим input value="vsegonet" name="uri" Опять же vsegonet меняем на часть ссылки Фида после слеша в моём случае это cms-allru.

<div id='mbt-sub-box'><h1>Subscribe To Get FREE Tutorials!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=tntbystc&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'><center>
<input name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' size='30' type='text' value='Enter Your Email Address...'/>
<input name='uri' type='hidden' value='tntbystc'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submit' type='submit' value='Subscribe'/></center></form></div>

Для корректного отображения формы подписки требуется добавить следующие стили в файл со стилями вашего шаблона:

#mbt-sub-box {
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1A2638));
border: 1px solid #1A2638;
border-radius: 10px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
background: -moz-linear-gradient(top, #333, #1A2638);
}


#mbt-sub-box input {
background: -moz-linear-gradient(center top , white, #EFEFEF) repeat scroll 0 0 transparent;
border: medium none;
border-radius: 10px 10px 10px 10px;
font-size: 14px;
padding: 10px;
text-shadow: 1px 1px 0 white;
width: 280px;
color: #666;
font-family: georgia;
margin-bottom: 5px;
}


#mbt-sub-box .submit {
background: -webkit-gradient(linear, left top, left bottom, from(#369A18), to(#205F0D));
background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;
color: white;
cursor: pointer;
font-weight: bold;
margin-left: 20px;
text-shadow: 0 1px 2px black;
width: 120px;
font-family: georgia;
margin-left: 5px;
}


#mbt-sub-box h1 {
margin-top: 5px;
color: white;
font-family: georgia;
font-size: 25px;
margin-bottom: 5px;
padding: 0;
text-shadow: 0 2px 3px black;
line-height: 35px;

}

P.S. Совсем забыл это мой первый конкурс в котором я принимаю участие когда-либо. Для меня будет счастье если займу место.

Normal 0 false false false MicrosoftInternetExplorer4

Для того чтоб настроить форму под ваш FEED надо сделать следующее:

  1. Находим эту строчку onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=vsegonet' Красный текст меняем на часть ссылки нашего Feed’а ПОСЛЕ Слеша (/) вот так к примеру у меня http://feeds.feedburner.com/cms-allru в итоге получается onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= cms-allru'
  2. Находим input value="vsegonet" name="uri" Опять же красное меняем на часть ссылки Фида после слеша в моём случае это cms-allru.

 

 

 


 

Всё правка закончена, пишем отзывы на http://cms-all.ru/sozdanie-saita/60-krasivaya-forma-podpiski.html и вопросы. Да и не забудьте CSS во втором файле архива добавить в ваш файл со стилями.