Стилей навигации достаточно много. Можно добавить верхнюю панель навигации.
Сделаем сегодня кнопки, которые скользят по мере прокрутки страницы и будут всегда на виду у посетителей. Таким образом, используя их, вы можете легко снизить показатель отказов, поскольку у людей будет более простой вариант просмотра большего количества сообщений.
![плавающие кнопки навигации Блоггер кнопки навигации](https://2.bp.blogspot.com/-s6-cgf1v5rg/WeNxd0at9FI/AAAAAAAAIH0/kAbjD_lLJw0qXuNjqW6Ekj7jkjTb9eEVgCLcBGAs/s400/%25D0%25BD%25D0%25B0%25D0%25B2%25D0%25B8%25D0%25B3%25D0%25B0%25D1%2586%25D0%25B8%25D1%258F.jpg)
Посмотрите наглядно на тестовом блоге как это будет выглядеть.
Для реализации такого варианта идём во вкладку ТЕМА. Для начинающих советую сделать резервную копию или потренироваться на тестовом блоге.
1 шаг. С помощью клавиш CTRL+ F(пост как найти строку в шаблоне правильно) находим вот такой тег
<b:includable id='nextprev'>
Теперь просто выберите весь код от <b:includable id='nextprev'>до </b:includable>
и замените его на код прведённый ниже.
![](https://4.bp.blogspot.com/-i4zAfymY6yQ/WeN-6grWocI/AAAAAAAAIIE/83LTeBlH4EorMDB-fHfCB8dOxF09ln6WwCLcBGAs/s640/%25D0%25BD%25D0%25B0%25D0%25B2%25D0%25B8%25D0%25B3%25D0%25B0%25D1%2586%25D0%25B8%25D1%258F.jpg)
и замените его на код прведённый ниже.
<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% работать не будет. Что - то не то делаешь. Или опять с переводов на русский вставляла. На новом даже не пробуй.
ОтветитьУдалить