Создаем горизонтальное меню для blogger

Ну, наконец-то, мы дошли до этой темы: создание горизонтального меню! Сегодня мы научимся создавать самое простое горизонтальное меню. Для наглядности я буду делать вместе с вами, потом вставлю скрины в это сообщение.

Будем рассматривать примеры на моем блоге. Допустим, мне нужно создать такое горизонтальное меню со следующими рубриками: HTML, Для blogger, Раскрутка сайта, Заработок в сети.

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

Но для начала нам необходимо составить правильный HTML-код для этого. Делаем следующее:

1. Создаем наши рубрики и разделяем их с помощью вертикальных разделителей, которые можно найти на клавиатуре после буквы Э:

HTML | Для blogger | Раскрутка сайта | Заработок в сети

2. Теперь на создаем для каждого раздела свое сообщение, в котором у нас будет перечень всех наших тем. Делаем это путем вставки простых ссылок. Об этом мы говорили в предыдущих темах. Это будет выглядеть примерно так:

<a href="http://ty-blogger.blogspot.com/.........html"> Обязательные HTML теги (тэги)</a>
<br/>
<a href="http://ty-blogger.blogspot.com/..........html"> Вставляем коды HTML в сообщение блога или сайта</a>

Сохраняем соощение под названием нашей рубрики "ШПАРГАЛКИ ПО HTML". Дату устанавливаем самую раннюю, например, прошлого года. Это делается для того, чтобы это сообщение не вылезло на главную страницу блога.

Сразу же при этом ставьте запрет на комментарии. Это делается тут же в "Настройках сообщения" во время набора поста.

Вот, что у вас должно получится:

Такие сообщения создаем для КАЖДОЙ рубрики.

3. Теперь возвращаемся к п.1. Нам нужно за каждой рубрикой закрепить свое сообщение. Делается это элементарно, например, для каждой рубрики:

<a href="http://ty-blogger.blogspot.com.......html"> HTML </a>

Такие ссылки создаем для каждого раздела. Не забывайте менять мои данные на свои!

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


<a href="http://ty-blogger.blogspot.com.......html"> HTML </a> |
<a href="http://ty-blogger.blogspot.com.......html"> Для blogger </a> |
<a href="http://ty-blogger.blogspot.com.......html"> Раскрутка сайта</a> |
<a href="http://ty-blogger.blogspot.com.......html"> Заработок в сети </a>

Не забудьте разделить ссылки вертикальными палочками!

4. Этот код вставляем в новый гаджет: Макет--Элементы страницы---Добавить новый гаджет--HTML/JavaScript--Вставляем. Помещаем гаджет прямо под заголовком блога. Вот что имеем:

У меня на рисунке только первый раздел имеет вид ссылки, а у вас они все будут с ссылками.

5. Можно немного поэкспериментировать с форматированием. Например, сделать их цветными:

HTML

Для этого добавляем в код цвет фона и шрифта: background:silver; color:maroon

<a style="background:silver; color:maroon" href="http://ty-blogger.blogspot.com/..............html">
HTML</a>

Можно увеличить размер шрифта:


HTML

<font size="+2"><a style="background:silver; color:maroon" href="http://ty-blogger.blogspot.com/2008/09/html.html">
HTML</a></font>

Ну, на сегодня всё!

------------------------------------
Посмотрите бесплатный гороскоп и узнайте, что вас ждет сегодня, в этом месяце и в 2010 году! Звезды подскажут!

Акция! Портал Медиа Микс LTD разместит ваши статьи на своих ресурсах! Спешите!
------------------------------------

С этой темой еще читают:

.