Страничная навигация для Blogger

Страничная навигация в блогах Blogger.com не очень удобна - если записей в блоге много - приходится долго листать "Предыдущие - Следующие", чтобы найти нужную. Поэтому полноценная страничная навигация – как это реализовано для wordpress, выглядит достаточно симпатично: 
Реализовать такую возможность удалось неким Mohamed Rias и Abu Farhan
Как сделать:


Открываем панель инструментов Blogger » Дизайн » Изменить HTML. "Расширить шаблоны виджета" не нужно.
Найти ]]></b:skin> и вставить выше следующий код CSS:

1.  .showpageArea a {  

2.  text-decoration:underline;  

3.  }  

4.  .showpageNum a {  

5.  text-decoration:none;  

6.  border: 1px solid #cccccc;  

7.  margin:0 3px;  

8.  padding:3px;  

9.  }  

10. .showpageNum a:hover {  

11. border: 1px solid #cccccc;  

12. background-color:#cccccc;  

13. }  

14. .showpagePoint {  

15. color:#333;  

16. text-decoration:none;  

17. border: 1px solid #cccccc;  

18. background: #cccccc;  

19. margin:0 3px;  

20. padding:3px;  

21. }  

22. .showpageOf {  

23. text-decoration:none;  

24. padding:3px;  

25. margin: 0 3px 0 0;  

26. }  

27. .showpage a {  

28. text-decoration:none;  

29. border: 1px solid #cccccc;  

30. padding:3px;  

31. }  

32. .showpage a:hover {  

33. text-decoration:none;  

34. }  

35. .showpageNum a:link,.showpage a:link {  

36. text-decoration:none;  

37. color:#333333;  

38. }  

Который определяет внешний вид навигации. Его можно модифицировать в соответствии с вашими потребностями.
Далее JavaScript часть. Находим </body> и выше добавляем:

1.  <!--Page Navigation Starts-->  

2.  <b:if cond='data:blog.pageType != "item"'>  

3.  <b:if cond='data:blog.pageType != "static_page"'>  

4.  <script type='text/javascript'>  

5.  var pageCount=5;  

6.  var displayPageNum=5;  

7.  var upPageWord ='Предыдущая';  

8.  var downPageWord ='Следующая';  

9.  </script>  

10. <script src='http://rn9.googlecode.com/files/blogger-page-nav.js' type='text/javascript'/>  

11. </b:if>  

12. </b:if>  

13. <!--Page Navigation Ends -->  

Как вы можете видеть, есть некоторые настраиваемые параметры в этом коде

var PageCount = 5;

Этот код определяет количество постов, которые будут отображаться на странице.

var displayPageNum = 5;

Этот код определяет количество отображаемых номеров страниц навигации.

var upPageWord = 'Предыдущая';

var downPageWord = 'Следующая';

Эти две линии определяют текст, который будет показан в ссылке на предыдущую и следующую страницу соответственно.

Для корректной работы навигатора необходимо внести соответствующие изменения в параметры отображения основной страницы (панель инструментов Blogger » Дизайн » Сообщения блога): 

 

На эту тему можно еще почитать:

.