Плавающие кнопки навигации в BLOGGER

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

Стилей навигации достаточно много. Можно добавить верхнюю панель навигации.

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

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


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


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

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 комментария:

  1. Вика,привет,вроде всё правильно сделала,но у меня не работает,на старых шаблонах тоже почему-то не работало

    ОтветитьУдалить
  2. Монетка, ну у меня ведь работает. Код совершенно простой без всяких наворотов. На новом у тебя 100% работать не будет. Что - то не то делаешь. Или опять с переводов на русский вставляла. На новом даже не пробуй.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML