Навигация для Blogger (часть_1)

Как-то все руки не доходили до работы над своим блогом, точнее, над его дизайном.

Давно хотела поменять навигацию по страницам на сайте. А то стандартная навигация в виде ссылок "Следующее; Главная страница; Предыдущее;" не нравилась мне, да и, думаю, посетителям было не удобно. Сама, когда захожу на сайты и блоги с подобной навигацией - бывает путаюсь.

Очень много чего перечитала в сети и сделала это сама, методом проб и ошибок. 

Итак, очень часто в статьях пишут, что начинать работу нужно с того, что зайти нужно в панель администратора. И потом выбираем Дизайн-> изменить HTML:

но я там этого не нашла, потом зашла в раздел "Шаблон", где и есть эта самая кнопка "изменить HTML". После чего и выдается код HTML для людей, которые далеки от этого, становится жутко, так как не знаешь с чего начать и боишься нечаянно что-то не туда вставить или что-то где-то удалить... Но на страницах интернета, так же, как и на страницах офисных программ, действуют одни и те же команды и сочетания клавиш. Вот и тут, для того, чтобы найти определенную строчку, нужно нажать Ctrl+F, при этом курсор должен быть в окне с HTML-кодом:

мы ищем код ]]></b:skin> и найдя его, над ним вставляем код:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

продолжение...