Привет, друзья. Небольшая фишка ━ как отобразить и красиво оформить описание для поисковых систем ниже заголовка поста.
Привет, друзья. Небольшая фишка ━ как отобразить и красиво оформить описание для поисковых систем ниже заголовка поста.
Привет, друзья. Небольшая фишка ━ как отобразить и красиво оформить описание для поисковых систем ниже заголовка поста.
Всем, доброго времени суток. И опять для вас красивая элегантная форма подписки для блога. У меня уже достаточно много статей о вариантах формы подписки, ссылки на некоторые дам в конце поста. Сегодня добавлю в копилку ещё два.
Основная задача формы подписки – дать возможность пользователям, которые выразили желание получать новостную рассылку, быстро её оформить. И конечно, сам блок для оформления подписки, должен быть привлекательным и находиться в поле зрения посетителей.
Пользователь подписался на рассылку, значит ему понравился Ваш материал, и он будет всегда получать самые свежие материалы блога(сайта) прямо на электронную почту.
Выберете ту форму, которая понравиться вам, скопируйте готовый код и устанавливайте в гаджет HTML/JavaScript в видимой части вашего блога.
Вариант 1. Блог подписки с анимированной кнопкой.
Код.
<style>#subscribe-box {width: 250px;height: auto;border-radius: 2px;background-color: #95a5a6;box-shadow: 0px 3px 0px 0px #7f8c8d;padding-bottom:10px}
#subscribe-box .title {padding: 10px 25px;line-height: 30px;font: 26px Oswald;color: #555;text-align: center;background: #ecf0f1;text-transform:uppercase;border-radius:2px 2px 0 0;}
#subscribe-box p {font-family: 'Droid Serif';font-size: 13px;color:#555;line-height: 20px;padding: 10px 20px 0 20px;margin: 0;}
#subscribe-box .emailfield {padding: 0px 20px 10px;}
#subscribe-box .emailfield input {color: #777;padding: 10px;margin-top: 10px;font-size: 15px;font-family: 'Droid Serif';width: 92%;border:0;border-radius: 2px;box-shadow: 0px 3px 0px 0px #bbb;}
#subscribe-box .emailfield input:focus {outline: none;}
#subscribe-box .emailfield .submitbutton {background: #F4836A;color: #fff!important;border:none;outline: none;width: 100%;cursor:pointer;border-radius: 2px;box-shadow: 0px 3px 0px 0px #e23b16;}
#subscribe-box .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;box-shadow: 0px 1px 0px 0px #3293ba;}
#subscribe-box .emailfield .submitbutton:hover{background: #DD7761;}</style>
<div id='subscribe-box'>
<div class='title'>
Форма подписки
</div>
<p>Получайте на свою почту новые статьи блога.</p>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input type='text' name='name' onblur='if (this.value == "") {this.value = "Ваше имя ";}' onfocus='if (this.value == "Ваше имя") {this.value = "";}' value='Ваше имя'/>
<input type='text' name='email' onblur='if (this.value == "") {this.value = "Ваш Email";}' onfocus='if (this.value == "ВаEmail") {this.value = "";}' value='Ваш Email'/>
<input name='uri' type='hidden' value='shpargalochkiru'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Подписаться!'/>
</form>
</div>
</div>
Поменяйте в двух местах shpargalochkiru на ваш адрес фида. Посмотрите, где его можно увидеть и что именно менять. На снимке я подчеркнула красным. Именно то, что идёт за слешем (/ )/
В первом коде CSS можно поиграться с цветовыми вариантами и размерами, чтобы подогнать под дизайн вашего блога. Воспользуйтесь этой таблицей цветов.
Второй вариант.
Код.
Также замените в трёх местах shpargalochkiru на свой адрес. Смотрите скриншот выше, что именно нужно.
Последний вариант может подойти и для формы подписки в конце каждого поста. Скопируйте код полностью и проверьте на этом генераторе. Ширина задана width:auto. Можно установить нужный вам размер ширины в px. Вставляйте код в конце каждого вашего сообщения. Как просто можно это сделать прочитайте в этом сообщении. Это намного упростит задачу и не будет отнимать время в дальнейшем.
Красивая форма подписки под каждым постом блога
Красивая форма подписки с иконками социальных сетей
Всплывающая форма подписки
Основная задача формы подписки – дать возможность пользователям, которые выразили желание получать новостную рассылку, быстро её оформить. И конечно, сам блок для оформления подписки, должен быть привлекательным и находиться в поле зрения посетителей.
Пользователь подписался на рассылку, значит ему понравился Ваш материал, и он будет всегда получать самые свежие материалы блога(сайта) прямо на электронную почту.
Выберете ту форму, которая понравиться вам, скопируйте готовый код и устанавливайте в гаджет HTML/JavaScript в видимой части вашего блога.
Вариант 1. Блог подписки с анимированной кнопкой.
<style>#subscribe-box {width: 250px;height: auto;border-radius: 2px;background-color: #95a5a6;box-shadow: 0px 3px 0px 0px #7f8c8d;padding-bottom:10px}
#subscribe-box .title {padding: 10px 25px;line-height: 30px;font: 26px Oswald;color: #555;text-align: center;background: #ecf0f1;text-transform:uppercase;border-radius:2px 2px 0 0;}
#subscribe-box p {font-family: 'Droid Serif';font-size: 13px;color:#555;line-height: 20px;padding: 10px 20px 0 20px;margin: 0;}
#subscribe-box .emailfield {padding: 0px 20px 10px;}
#subscribe-box .emailfield input {color: #777;padding: 10px;margin-top: 10px;font-size: 15px;font-family: 'Droid Serif';width: 92%;border:0;border-radius: 2px;box-shadow: 0px 3px 0px 0px #bbb;}
#subscribe-box .emailfield input:focus {outline: none;}
#subscribe-box .emailfield .submitbutton {background: #F4836A;color: #fff!important;border:none;outline: none;width: 100%;cursor:pointer;border-radius: 2px;box-shadow: 0px 3px 0px 0px #e23b16;}
#subscribe-box .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;box-shadow: 0px 1px 0px 0px #3293ba;}
#subscribe-box .emailfield .submitbutton:hover{background: #DD7761;}</style>
<div id='subscribe-box'>
<div class='title'>
Форма подписки
</div>
<p>Получайте на свою почту новые статьи блога.</p>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input type='text' name='name' onblur='if (this.value == "") {this.value = "Ваше имя ";}' onfocus='if (this.value == "Ваше имя") {this.value = "";}' value='Ваше имя'/>
<input type='text' name='email' onblur='if (this.value == "") {this.value = "Ваш Email";}' onfocus='if (this.value == "ВаEmail") {this.value = "";}' value='Ваш Email'/>
<input name='uri' type='hidden' value='shpargalochkiru'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Подписаться!'/>
</form>
</div>
</div>
Поменяйте в двух местах shpargalochkiru на ваш адрес фида. Посмотрите, где его можно увидеть и что именно менять. На снимке я подчеркнула красным. Именно то, что идёт за слешем (/ )/
В первом коде CSS можно поиграться с цветовыми вариантами и размерами, чтобы подогнать под дизайн вашего блога. Воспользуйтесь этой таблицей цветов.
Второй вариант.
<style>#sidebar-subscribe-box{background:url(http://1.bp.blogspot.com/-IyEBRR8yOQQ/UBhYdBd23PI/AAAAAAAAFTU/aeW3JdAlrCs/s1600/colored-strip.png) repeat scroll 0 0 transparent;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-tUlo5p5gP8o/UBhYciGNgwI/AAAAAAAAFTM/x22pIuNLVPw/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}</style>
<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Оформите подписку на обновления блога и получайте новые статьи прямо на почту</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="shpargalochkiru" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Введите ваш email адрес :)" required="required"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Подписаться !" /></form></div></div></div>
<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Оформите подписку на обновления блога и получайте новые статьи прямо на почту</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="shpargalochkiru" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Введите ваш email адрес :)" required="required"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Подписаться !" /></form></div></div></div>
Также замените в трёх местах shpargalochkiru на свой адрес. Смотрите скриншот выше, что именно нужно.
Последний вариант может подойти и для формы подписки в конце каждого поста. Скопируйте код полностью и проверьте на этом генераторе. Ширина задана width:auto. Можно установить нужный вам размер ширины в px. Вставляйте код в конце каждого вашего сообщения. Как просто можно это сделать прочитайте в этом сообщении. Это намного упростит задачу и не будет отнимать время в дальнейшем.
Красивая форма подписки под каждым постом блога
Красивая форма подписки с иконками социальных сетей
Всплывающая форма подписки
Здесь вы можете оформить подписку на новые шпаргалки
Как сделать обновление и публикацию старого сообщения в Блоггер с текущей датой. Иногда мы просматриваем свои ранее опубликованные посты и возникает ситуация когда нужно что - то подкорректировать. Изменить или добавить.
Приветствую всех, кто читает шпаргалки блогерши. Сегодня вернёмся к картинкам. Ещё один красивый эффект анимации изображений при наведении курсора. Точнее предлагаю к просмотру 3 варианта такого эффекта. Всё работает полностью на CSS3 и поэтому установка будет лёгкой.
Пользовательский поиск
