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

Установка в Блоггере совершенно простая - гаджет HTML/JavaScript. Единственное что вам нужно сделать, это указать свои ID в соц.сетях и RSS потока. Как их просто узнать читаем в этом сообщении.



Код.
<style>.hu-subscribe-box a{-moz-border-radius:2px;-moz-transition:border .218s;-o-transition:border-color .218s;-webkit-border-radius:2px;-webkit-transition:border-color .218s;background: #f3f3f3;background:-webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));border:solid 1px #dcdcdc;border-radius:2px;color:#6e6e6e;display:inline-block;font:bold 12px Helvetica, Arial, sans-serif;padding:7px 12px;position:relative;text-decoration:none;text-shadow:0 1px 0 #fff;transition:border-color .218s}.hu-subscribe-box a:hover{-moz-box-shadow:0 2px 0 rgba(0,0,0,0.2) 0 2px 5px rgba(0,0,0,0.2);border-color:#999;box-shadow:0 1px 2px rgba(0,0,0,0.15);color:#333}.hu-subscribe-box a:active{border-color:#444;color:#000}.hu-subscribe-boxbar{float:left;margin-left:3px;margin-top:5px;padding:0;width:280px}.hu-subscribe-boxbar .emailsub{border-bottom:0 solid #e6e6e6;float:left;font-family:Helvetica, Arial;padding:0 0 15px;width:100%}.hu-subscribe-boxbar .emailsub .emailupdatesform{float:right;padding:0;width:100%}.hu-subscribe-boxbar .emailsub .emailupdatesform input.emailupdatesinput{-moz-border-radius:2px;-webkit-border-radius:2px;background:#F3F3F3;border:1px solid #dcdcdc;border-radius:2px;color:#989898;float:left;font-size:12px;height:18px;padding:5px 10px;width:130px}.hu-subscribe-boxbar .emailsub .emailupdatesform input.emailupdatesinput:hover{-moz-box-shadow:0 2px 0 rgba(0,0,0,0.2) 0 2px 5px rgba(0,0,0,0.2);border-color:#999;box-shadow:0 1px 2px rgba(0,0,0,0.15)}.hu-subscribe-boxbar .emailsub .emailupdatesform input.joinemailupdates:hover{-moz-box-shadow:0 2px 0 rgba(0,0,0,0.2) 0 2px 5px rgba(0,0,0,0.2);border-color:#666;box-shadow:0 1px 2px rgba(0,0,0,0.15);cursor:pointer}.hu-subscribe-boxbar .emailsub .emailupdatesform input.joinemailupdates{-moz-border-radius:2px;-webkit-border-radius:2px;background:#F3F3F3;border:solid 1px #dcdcdc;border-radius:2px;color:#989898;font-family:Helvetica, Arial;font-size:14px;font-weight:700;height:30px;margin:0 0 0 5px;padding:0 5px;text-transform:none}</style>

<div class="hu-subscribe-box" style="padding: 0pt 0pt 0pt 5px;"><table><tbody><tr><td><a href="http://feeds.feedburner.com/shpargalochkiru" rel="nofollow" target="_blank"><img src="http://2.bp.blogspot.com/-g7FaIJ1OjgQ/Ttd3DAAytbI/AAAAAAAAEGI/ifepI3TXqhg/s1600/rss.png" border="0"/></a></td><td><a style="margin-left:5px;"href="http://www.twitter.com/VikserV" rel="nofollow" target="_blank"><img src="http://4.bp.blogspot.com/-82yXf2C2f7Y/Ttd3DvVP5-I/AAAAAAAAEGQ/9YRURg-wrPY/s1600/twitter.png" border="0"/></a></td><td><a style="margin-left:5px;"href="http://www.facebook.com/viktoria.barad" rel="nofollow" target="_blank"><img src="http://3.bp.blogspot.com/-bnswEL1l4bI/Ttd3CJ0oSNI/AAAAAAAAEGA/MNN2fh77H4Q/s1600/facebook.png" border="0"/></a></td></tr></tbody></table><div class="hu-subscribe-boxbar"><div class="emailsub"><div class="emailupdatesform"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Введите Ваш email..." onblur="if (this.value==''){this.value='Submit email...';}" onfocus="if (this.value=='Submit email...'){this.value='';}" type="text"/><input value="shpargalochkiru" name="uri" type="hidden"/><input value="Подписатся" class="joinemailupdates" type="submit"/></form></div></div></div></div>


В строке красного цвета введите адрес RSS. Посмотрите на снимке ниже, где его взять - панель администратора - настройки - другое. Скопируйте всю строчку. У меня он такой http://feeds.feedburner.com/shpargalochkiru"


В двух местах кода, где отмечено shpargalochkiru вставьте только то, что идёт у вас в адресе после слеша (/) . И, соответственно ваши адреса в социалных сетях twitter и facebook.

Готовый код кнопок с формой подписки можно установит в сайдбаре блога или прямо в конце сообщения. Пользователи будут иметь возможность сразу подписаться на вас и стать вашими друзями.

Спасибо всем за визит и до встречи.

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

Введите Ваш email


кнопки навигации
Доброго времени суток, друзья. Думаю вы согласитесь со мной, что навигация в стандартных шаблонах Блоггер вообще не привлекает к себе никакого внимания. Еле заметная панелька в конце страницы не каждый и заметит. Поэтому любой новый посетитель может не увидеть ссылку на предыдущие или следующие статьи блога.

Стилей навигации достаточно много. Я уже писала как изменить навигацию в блоге в этом посте. Ещё можно добавить верхнюю панель навигации.

Сделаем сегодня кнопки, которые скользят по мере прокрутки страницы и будут всегда на виду у посетителей. Таким образом, используя их, вы можете легко снизить показатель отказов, поскольку у людей будет более простой вариант просмотра большего количества сообщений.

кнопки навигации


Посмотрите наглядно на тестовом блоге как это будет выглядеть.


Для реализации такого варианта идём во вкладку ТЕМА. Для начинающих советую сделать резервную копию или потренироваться на тестовом блоге. 

1 шаг. С помощью клавиш CTRL+ F(пост как найти строку в шаблоне правильно) находим вот такой тег

<b:includable id='nextprev'>

Теперь просто выберите весь код от <b:includable id='nextprev'>до </b:includable>



и замените его на код прведённый ниже.

<b:includable id='nextprev'><div class='blog-pager' id='blog-pager'><div class='arrowNav'><b:if cond='data:newerPageUrl'><span id='blog-pager-newer-link'><div class='arrowLeft'><a class='prev' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' id='nextLink'><span class='arrow'/><span class='prevnext'><img src="http://i.imgur.com/4sieEVz.png"/></span></a></div></span></b:if><b:if cond='data:olderPageUrl'><span id='blog-pager-older-link'><div class='arrowRight'><a class='next' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle' id='prevLink'><span class='arrow'/><span class='prevnext'><img src="http://i.imgur.com/1uAQUbN.png"/></span><br/></a></div></span></b:if></div><a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a><b:if cond='data:mobileLinkUrl'><div class='blog-mobile-link'><a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a></div></b:if></div><div class='clear'/></b:includable>


2 шаг. Там же в шаблоне найдите строку ]]></b:skin> и сразу над ней устанавливаем код 

.arrowLeft a {-moz-transition: .2s ease-in; -o-transition: .2s ease-in; -webkit-transition: .2s ease-in; left: -5px; padding: 25px 20px; position: fixed , верх: 45%, переход: .2s ease-in; z-index: 100} .arrowLeft a: hover {-moz-transition: .2s ease-in; -o-transition: .2s ease-in; -webkit -переход: .2s ease-in; color: #fff; left: 0; переход: .2s ease-in} .arrowRight a {-moz-transition: .2s ease-in; -o-transition: .2s ease- в: -webkit-transition: .2s ease-in; padding: 25px 20px; position: fixed; right: -5px; top: 45%; переход: .2s ease-in; z-index: 100} .arrowRight a: hover {-moz-transition: .2s ease-in; -o-transition: .2s ease-in; -webkit-transition: .2s ease-in; color: #fff; right: 0; transition: .2s ease- in} .arrowNav a {background: # 000; color: #fff; font-size: 25px; text-decoration: none}

Теперь просто нажмите «Сохранить шаблон» и обновите свой блог, чтобы увидеть плавающие кнопки со стрелками влево и вправо. Отмеченное background: # 000; можно изменить на другой цвет копок. Воспользуйтесь этой таблицей.

И у меня сегодня всё. Спасибо всем. Увидимся.

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

Введите Ваш email


списки
Всем, привет! При создании веб-страниц бывает  необходимо как-то упорядочить представленную на них информацию. Когда мы хотим использовать список на блоге, в редакторе сообщений у нас 2 типа на выбор: маркированный и нумерованный.

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

Предложу вам сегодня ещё несколько идей по оформлению списков. Как они выглядят, посмотрите на тестов блоге.


Коды каждого варианта выкладываю ниже. Здесь же я предоставлю картинки для наглядности. Для начинающих блогеров объясню, как их установить в сообщение.

Вариант1. С анимацией при наведении на номер списка.

списки

Код.

<li><a href="### ">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
</ul>
<style>
@import url(http://fonts.googleapis.com/css?family=Fredericka+the+Great|EB+Garamond);
.older {
  list-style: none;
  margin: 0 auto;
  width: 360px;
  counter-reset: li;
}
.older li {
  border-bottom: dashed 1px #006699;
  margin-top: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  padding: 5px;
}
.older a {
  text-decoration: none;
  padding: 10px;
  display: block;
  line-height: 30px;
  color: #3A3A3A;
  font-family: 'EB Garamond', serif;
  font-size: 20px;
}
.older a:before {
  display: inline-block;
  content: counter(li);
  counter-increment: li;
  height: 30px;
  width: 30px;
  text-align: center;
  border: solid 1px #dedede;
  margin-right: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;
  font-family: 'Fredericka the Great', cursive;
  font-size: 24px;
  -webkit-transition: .4s linear;
  transition: .4s linear;
}
.older a:hover:before {
  color:#D72F2C;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}</style>



Вариант 2. С Анимированными кружочками справа.

списки

Код.
<ul class="beads">
 <li><a href="###">Элемент списка</a>
</li> <li><a href="###">Элемент списка</a></li>
 <li><a href="###">Элемент списка</a>
</li> <li><a href="###">Элемент списка</a></li>
 <li><a href="###">Элемент списка</a></li>
 </ul>
 <style> .beads { list-style: none; background: #EEE3DB; margin: 0; padding-left: 40px; border-radius: 5px; } .beads li { text-transform: uppercase; font-family: 'Montserrat', sans-serif; line-height: 40px; border-bottom: 1px solid #D4D7D6; position: relative; } .beads a { text-decoration: none; color: #464643; display: block; line-height: 40px; position: relative; } .beads a:before { content:""; position: absolute; left: -20px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #A58063; } .beads li:last-child {border-bottom: none;} .beads li:before,  .beads li:after { content:""; position: absolute; border-radius: 50%; } .beads li:before { top: calc(50% - 5px); background: #E0926E; left: -22px; width: 10px; height: 10px; transition: 0.5s linear; } .beads li:after { bottom: 6px; left: -20px; width: 6px; height: 6px; background: #A58063; } .beads li:hover:before {background: #FFCE08;} </style>


Вариант 3. Анимированные разноцветные полоски.

списки


Код.

<ul class="border">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
<style>
.border {
list-style: none;
padding: 0;
}
.border li {
font-family: "Trebuchet MS", "Lucida Sans";
padding: 7px 20px;
margin-bottom: 10px;
border-radius: 5px;
border-left: 10px solid #f05d22;
box-shadow: 2px -2px 5px 0 rgba(0,0,0,.1),
     -2px -2px 5px 0 rgba(0,0,0,.1),
    2px 2px 5px 0 rgba(0,0,0,.1),
    -2px 2px 5px 0 rgba(0,0,0,.1);
font-size: 20px;
letter-spacing: 2px;
transition: 0.3s all linear;
}
.border li:nth-child(2){border-color: #8bc63e;}
.border li:nth-child(3){border-color: #fcba30;}
.border li:nth-child(4){border-color: #1ccfc9;}
.border li:nth-child(5){border-color: #493224;}
.border li:hover {border-left: 10px solid transparent;}
.border li:nth-child(1):hover {border-right: 10px solid #f05d22;}
.border li:nth-child(2):hover {border-right: 10px solid #8bc63e;}
.border li:nth-child(3):hover {border-right: 10px solid #fcba30;}
.border li:nth-child(4):hover {border-right: 10px solid #1ccfc9;}
.border li:nth-child(5):hover {border-right: 10px solid #493224;}
</style>


Вариант 4. Можно применить в качестве меню или придумать что - то своё.




Код.

<ul class="menu">
<li>МЕНЮ</li>
<li>"Салат Греческий"<em>120 руб</em></li>
<li>"Солянка"<em>130 руб</em></li>
<li>"Гуляш"<em>300 руб</em></li>
<li>"Рыба заливная"<em>250 руб</em></li>
<li>"Отбивные"<em>450 руб</em></li>
</ul>
<style>
.menu {
list-style: none;
padding: 0;
border: 1px solid rgba(0,0,0, .2);
}
.menu li {
overflow: hidden;
padding: 6px 10px;
font-size: 20px;
}
.menu li:first-child {
font-weight: bold;
padding: 15px 0 10px 15px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(0,0,0, .2);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
color: #679bb7;
font-size: 24px;
box-shadow: 0 10px 20px -5px rgba(0,0,0, .2);
}
.menu li:first-child:before {
content: "\2749";
margin-right: 10px;
}
.menu span {
float: left;
width: 75%;
color: #7C7D7F;
}
.menu em {
float: right;
color: #9c836e;
font-weight: bold;
}</style>


Вариант 5. С эффектом лёгкой анимации при наведении.


Код.

<ol class="rectangle">
<li><a href="###">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
</ol>
<style>
.rectangle {
counter-reset: li;
list-style: none;
font: 14px "Trebuchet MS", "Lucida Sans";
padding: 0;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.rectangle a {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
margin: .5em 0 .5em 2.5em;
background: #D3D4DA;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
}
.rectangle a:hover {background: #DCDDE1;}     
.rectangle a:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #9097A2;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.rectangle a:after {
position: absolute;
content: "";
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.rectangle a:hover:after {
left: -.5em;
border-left-color: #9097A2;
}</style>


В некоторых кодах, где вы видите вот такие ##решётки вставьте адреса страниц (URL), на которые должна вести ссылка. Если нет такой необходимости, убираем в коде то, что отмечео синим цветом.

<li><a href="###">Элемент списка</a></li>


И наоборот, если нужно сделать переход по ссылке - добавляем их (в кодах, где нет таковых). Например вариант 3.

Так же добавляйте дополнительные пункты при необходимости.

<li><a href="###">Элемент списка</a></li>

Чтобы ссылки открывались в новом окне браузера, нужно к коду добавить-

<a href="###" target="_blank">Элемент списка</a>

В сообщении блога, перейдите в режим HTML и вставьте выбранный код в нужное место. Такие списки можно применить в качестве вертикального меню. Установите код в гаджет HTML/JavaScript в сайтбаре блога и дайте в нём ссылки на ваши страницы. Оригинальная менюшка получается без лишней мороки. В сайтбаре тестового блога, для наглядности установила. Ссылка выше.

Вот так красиво можно оформить скучные списки с помощью стилей CSS. Меняйте цвет фона, размеры, стили шрифта, высоту блочных элементов и другое.

Всем удачи, спасибо за внимание и до встречи.

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

Введите Ваш email


книга
Здравствуйте, дорогие мои подписчики, читатели и гости блога. Хочу представить вам свою первую книгу. 

BLOGGER для каждого - краткое руководство по созданию и настройкам блога на платформе Блоггер

 Хотела закончить её ко дню рождения своих шпаргалок, но процесс создания оказался настолко увлекательным, что к срокам немного не успела. Да ещё было большое желание наглядно всё показать. Так что вся книга вышла с пояснительным текстом и массой скриншотов.

На днях опубликовала её в социальных сетях на своей фан - странице Фейсбук. Дебют состоялся.

Задумка возникла давно и в основном она ориентирована на начинающих блогеров. Которые только хотят создать свой блог на  BLOGGER или недавно пришли в блоговедение. Это скорее инструкция, пошаговое руководство, где я попыталась подробно остановиться на основных настройках блога. Обычно на них спотыкаются многие начинающие. Даже если вы уже ведёте свой блог, возможно, некоторые детали и вам будут интересны. Все необходимые настройки собраны в одном месте.

Книга эта абсолютна бесплатна и если вы посчитаете нужным, можете поделиться ей со своими читателями и друзьями. Скачать книгу можно с Яндекс диска здесь. Или через баннер в сайтбаре блога.

У кого нет возможности воспользоваться Яндексом, вот ещё ссылочка книги "BLOGGER для каждого" в формате PNG.

Любое ваше мнение и отзывы приветствую. Строго не судите, я старалась.

И ещё я совсем недавно создала группу ВКонтакте, под таким же названием - BLOGGER для каждого. Буду рада видеть вас в числе участников.

Всем спасибо, приятного чтения и удачи. Будем дальше работать.


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

Введите Ваш email


видео
Есть несколько вариантов вставки видеороликов из YouTube в блоги на платформе Blogger. Прямо в панели редактора, нажав на такую функцию вверху. Можно вставить и открыть видео в новом окне. Сегодня предлагаю вам ещё один вариант - добавление видео YouTube как в телевизионном кадре, чтобы оно привлекало больше пользователей для просмотра.

Пользовательский поиск
Foto Saya
My Photo