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

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

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

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


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


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

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 как в телевизионном кадре, чтобы оно привлекало больше пользователей для просмотра.

текст
Всем, привет. С помощью небольшого скрипта можно красиво отобразить цитаты, афоризмы или  важные объявления. Вывести их можно непосредственно в теле поста или гаджете HTML/JavaScript над сообщениями блога. Появляться они будут автоматически сменяя друг друга с заданным интервалом.

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