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

Посмотрите наглядно на тестовом блоге как это будет выглядеть.
Для реализации такого варианта идём во вкладку ТЕМА. Для начинающих советую сделать резервную копию или потренироваться на тестовом блоге.
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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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; можно изменить на другой цвет копок. Воспользуйтесь этой таблицей.
И у меня сегодня всё. Спасибо всем. Увидимся.
И у меня сегодня всё. Спасибо всем. Увидимся.
здесь можно оформить подписку на новые шпаргалки
Вика,привет,вроде всё правильно сделала,но у меня не работает,на старых шаблонах тоже почему-то не работало
ОтветитьУдалитьМонетка, ну у меня ведь работает. Код совершенно простой без всяких наворотов. На новом у тебя 100% работать не будет. Что - то не то делаешь. Или опять с переводов на русский вставляла. На новом даже не пробуй.
ОтветитьУдалить