Друзья, всех приветствую на блоге bloguspeh.ru. Сегодня, я хочу показать вам, как установить форму подписки в конце статьи на Блоггере. Все кто ведёт свой блог или сайт, прекрасно знают и понимают, что наши подписчики являются, так называемым, "золотым активом", то есть основным ядром аудитории. Это наши друзья, наши партнёры и наши клиенты.Забежавши на наш ресурс, в большинстве случаев, посетитель нашёл нужную ему информацию (надеюсь), может быть нажал на рекламный блок, и в попыхах и на радостях покинул наш блог, хорошо если добавил в закладки. А ведь хотелось бы, что бы он стал нашим подписчиком и постоянным читателем, ведь он нашёл то что искал, значит остался доволен. Но ведь формы подписки рядом нет, а искать её, крутить колёсико на мышке, на это нет времени, или желания, или ещё что-нибудь.
Кто ведёт свои блоги на Вордпресс, для них существуют готовые плагины, которые легко можно установить в несколько кликов. А как же быть пользователям Blogspot? Ведь в интернете существует множество качественных блогов на этой платформе. И вот тут-то на помощь приходят умельцы, которые создают рукописные виджеты. И я в очередной раз обратился к англоязычному блоггингу.
Так вот, взяв такой виджет за основу, немного переделав его. Кое-что убрал, кое-что добавил, руссифицировал. И получилась вроде бы неплохая форма подписки, которую вы теперь можете увидеть у меня на блоге, в конце каждого поста. И если вам друзья, такой вариант подходит, то ниже я подробно опишу как установить такую форму подписки в конце статьи у себя на блоге.
И так приступим:
1) Заходим в панель управления Блоггер => Дизайн => Изменить HTML
2) Обязательно, на всякий случай, делаем резервное копирование шаблона
3) Устанавливаем галочку "Расширить шаблон виджета"
4) Далее, с помощью кнопок Ctrl+F находим этот код: <data:post.body/>
5) И ниже него вставляем этот код:
<b:if cond='data:blog.pageType == "item"'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.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 #D3D3D3;
-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 #D3D3D3;
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%);
}
#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>
<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<tr>
<td align='left'> <p style='color:#000000; font-style:italic; margin:0px 0px 5px 0px; '>Хотите получать свежие статьи?</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloguspeh/JrXo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='bloguspeh/JrXo'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == "") {this.value = "Введите Ваш E-mail...";}' onfocus='if (this.value == "Введите Ваш E-mail...") {this.value = ""}' type='text' value='Введите Ваш E-mail...'/>
<input alt='' class='mbtbutton' title='' type='submit' value='Хочу!'/>
</form>
</td>
<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '/>
<a href='http://feeds.feedburner.com/bloguspeh/JrXo' rel='nofollow' target='_blank' title='Подпишитесь на RSS'><img src='http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaXDrh48I/AAAAAAAAAVM/zLmcNtCgi9Y/s40/w2bRSS+.png'/></a>
<a href='https://twitter.com/#!/olymp63' rel='nofollow' target='_blank' title='Добавляйтесь в Twitter'><img src='http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaUf7v0CI/AAAAAAAAAU8/7vfe8Iw3ohc/s40/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/ifedorchuk' rel='nofollow' target='_blank' title='Добавляйтесь в Facebook'><img src='http://1.bp.blogspot.com/_nDNgmK8FIyI/TUJaWNBkZnI/AAAAAAAAAVE/nZ0byXaqur8/s40/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.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 #D3D3D3;
-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 #D3D3D3;
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%);
}
#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>
<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<tr>
<td align='left'> <p style='color:#000000; font-style:italic; margin:0px 0px 5px 0px; '>Хотите получать свежие статьи?</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloguspeh/JrXo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='bloguspeh/JrXo'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == "") {this.value = "Введите Ваш E-mail...";}' onfocus='if (this.value == "Введите Ваш E-mail...") {this.value = ""}' type='text' value='Введите Ваш E-mail...'/>
<input alt='' class='mbtbutton' title='' type='submit' value='Хочу!'/>
</form>
</td>
<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '/>
<a href='http://feeds.feedburner.com/bloguspeh/JrXo' rel='nofollow' target='_blank' title='Подпишитесь на RSS'><img src='http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaXDrh48I/AAAAAAAAAVM/zLmcNtCgi9Y/s40/w2bRSS+.png'/></a>
<a href='https://twitter.com/#!/olymp63' rel='nofollow' target='_blank' title='Добавляйтесь в Twitter'><img src='http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaUf7v0CI/AAAAAAAAAU8/7vfe8Iw3ohc/s40/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/ifedorchuk' rel='nofollow' target='_blank' title='Добавляйтесь в Facebook'><img src='http://1.bp.blogspot.com/_nDNgmK8FIyI/TUJaWNBkZnI/AAAAAAAAAVE/nZ0byXaqur8/s40/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>
Теперь вам нужно внести некоторые изменеия, и настроить форму подписки под себя.
Замените bloguspeh/JrXo на свой идентификатор в Feedburner.
Замените olymp63 на свой логин в Твиттере
Замените ifedorchuk на свой логин в Фейсбуке
Теперь, когда вы всё сделали, внесли все необходимые изменения, нажмите на кнопку "сохранить шаблон". И можете переходить на свой блог и любоваться этим полезным новшеством в конце каждой своей статьи.
Ну вот друзья, пожалуй и всё, чем я хотел поделиться. Сегодня мы с вами познакомились ещё с одним виджетом и узнали как установить форму подписки в конце статьи на Блоггере. А если вы хотите придать своим статьям какую-то изюминку, то предлагаю посмотреть мою недавнюю статью о том, как установить подпись в конце статьи на Blogspot. А я с вами прощаюсь, желаю удачи и до скорой встречи.
|
Хотите получать свежие статьи? |
|
0 коммент.:
Отправить комментарий