Навигация для блога (Blogspot)

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

Процесс установки очень прост:
1.Войдите под администратором в свой блог.
2.Выберете Настроить - Дизайн - Изменить HTML
3.Найдите тег </body> и перед ним вставте следующий код:

<style type="text/css"> .showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;} .showpage a {float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieGjwf3P4ELkNztsHls9IA4k1Tmh0rj85POPcOMWWd0yFn7mmbUGM9XfJUfT2KxngxkUHOXV5hTEnD1GwyYt2jRBW98B7qveEj35kNKt0_Hnx66ZacFLoKghML-Q5Z85vCDwQccUNdrETW/) no-repeat 0 0;text-align : center;width : 127px;height : 42px;text-align : center;display : block;margin : 0 5px;color : #333;padding-top : 6px;} .showpage a:hover {color : #333;margin : 0 5px;padding-top : 6px;} .showpageOf{float:left;padding-top : 6px;} .showpageNum a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ28u09xtbN5N4ef2oXnXFeEC5uvlbtE3rMf8Mzrg3Ql_FEkSgxjODbkkl6fERCUHnrmpm1blaij6cGV3G2e8shkylzx7UZlUKziiFTkRZcnOg1q92KCSXCmgic5MIui4E81r6rIjuZ03w/) no-repeat 0 0;width : 37px;height : 42px;display : block;text-align : center;float : left;margin : 0 5px;padding-top : 6px;text-decoration : none;color : #333;} .showpageNum a:hover {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ28u09xtbN5N4ef2oXnXFeEC5uvlbtE3rMf8Mzrg3Ql_FEkSgxjODbkkl6fERCUHnrmpm1blaij6cGV3G2e8shkylzx7UZlUKziiFTkRZcnOg1q92KCSXCmgic5MIui4E81r6rIjuZ03w/) no-repeat 0 100%;color : #fff;} .showpagePoint {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ28u09xtbN5N4ef2oXnXFeEC5uvlbtE3rMf8Mzrg3Ql_FEkSgxjODbkkl6fERCUHnrmpm1blaij6cGV3G2e8shkylzx7UZlUKziiFTkRZcnOg1q92KCSXCmgic5MIui4E81r6rIjuZ03w/) no-repeat 0 100%;width : 37px;height : 42px;display : block;float : left;text-align : center;margin : 0 5px;padding-top : 6px;font-weight : bold;color : #fff;} .showpageNum a:link, .showpage a:link {text-decoration : none;color : #cc0000;} </style><br /> <script style='text/javascript'> var pageCount=5; var displayPageNum=1; var upPageWord="Previous"; var downPageWord="Next"; </script><br /> <script type='text/javascript' src="http://bloggerblogwidgets.googlecode.com/files/BeautifulPageNavi.js" /></script><br />

#var pageCount=5; - в данной строчке можно изменить количество страниц которое будет выводится

4.Сохраните шаблон .

Второй вариант навигации для блога

Данный виджет позволяет изменить стандартную навигацию  Blogspot, на пронумерованную, что для навигации по блогу намного удобнее.

Вот примерно такой она будет выглядеть:

Самое главное что вы можете легко подобрать внешний вид под дизайн вашего блога.

Для установки блога идем по пути:

Настроить - Элементы страницы - Добавить гаджет и вставте следующий код:

В коде стиль .showpageNum a и т.д, меняем вид навигации.

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

Сгенерировать код и подобрать дизайн вы можете и здесь.

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