Горизонтальное выпадающее меню для blogger: Как в Blogger Сделать Меню

Простое горизонтальное меню для Blogspot

Рубрика: Практика и кейсы | Время на чтение: 4 мин.

Продолжаю рубрику по Blogspot. Сегодня расскажу, как сделать простое горизонтальное меню для удобной навигации по блогу. Вариант, который будет описан ниже, является самым простым внедрением горизонтального меню и может быть использовано на абсолютно любой платформе с поддержкой CSS. У платформы blogger от Гугла для этого есть гаджет “HTML/JavaScript“.

Техническая часть для blogspot:
1. Создаём в нужном нам месте шаблона гаджет HTML/JavaScript;
2. Вставляем в него следующий код:

<center>
<style>
<!–
div#menunav {
float: left;
border-top: 1px solid #bbbbbb; /* граница сверху */
border-bottom: 1px solid #bbbbbb; /* граница снизу */
font-size: 14px; /* размер шрифта */
background-color: #bbbbbb; /* цвет фона меню */
padding: 0 0 0 5px; /* левый отступ кнопок */
margin: 5px 0;
}
div#menunav ul {
margin: 0px;
padding: 0px;
}
* html div#menunav ul {
float: left;
border-left: 1px solid #bbbbbb; /* левая вертикальная черта к ul */
margin-left: 15px;
}
* html div#menunav a {
display: block;
}
div#menunav li {
float: left;
list-style-type: none; /* без маркеров списка */
background-color: #464451; /* цвет кнопки до наведения */
border-right: 1px solid #bbbbbb; /* разделительные линии между li */
}
div#menunav li:first-child {
border-left: 1px solid #bbbbbb; /* первая вертикальная линия меню */
}
div#menunav a {
text-decoration: none; /* без подчёркивания ссылок */
padding: 0px 10px; /* отступы сверху и снизу */
color: #bbbbbb; /* цвет шрифта */
}
div#menunav a:hover {
color: #ffffff;
}
div#menunav li:hover {
background-color: #45161c; /* цвет кнопки после наведения */
}
/*powered by seo-aspirant*/
–>
</style>
<div id=”menunav” style=”width: 970px;”> <!– shirina menu –>
<ul>
<li><a href=”https://seo-aspirant. ru/seo-aspirant.blogspot.com/2009/08/blog-post_19.html”>название 1 ссылки</a></li> <!– vasi ssilki –>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/09/sape-ucoz.html”>название 2 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/09/sexcash.html”>название 3 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2010/01/blog-post_13.html”>название 4 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/08/blog-post_24.html”>название 6 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/11/wtk.html”>nazvanie 6 ssilki</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/08/blog-post_5609.html”>название 7 ссылки</a></li>
<li><a href=”https://seo-aspirant. ru/seo-aspirant.blogspot.com/2010/01/blog-post_5634.html”>название 8 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2010/01/seo-aspirant.html”>название 9 ссылки</a></li>
</ul>
</div>
</center>

3. Редактируем код:
Сразу нужно сделать отступление по коду для новичков. То, что находится между /* … */ никак не будет влиять на гаджет. Это пояснения, чтобы вам было проще настроить меню.
Теги в начале и конце кода “center” сделают выравнивание вашего меню по центру страницы.
/* granica sverxy */ – первое значение “1px” показывает, сколько пикселей будет отступ, второе “#bbbbbb” – это цвет границы. Аналогично можно поменять и остальные переменные.
Не забудьте заменить в коде https://seo-aspirant.ru/seo-aspirant… на адрес своего блога. Т.к. в данном случае мы редактируем всего лишь код отдельного элемента, то шаблон блога сохранять не обязательно, ведь гаджет можно в любое время удалить.

Чтобы внести изменения нужно обладать базовыми знаниями CSS, ну или просто экспериментировать с переменными.

СТАТЬИ ИЗ РУБРИКИ:

• Добавляем RSS иконку после каждого поста
• Как вставить активную ссылку в комментарий блога
• Как убрать navbar в Blogger
• Читать дальше
• Favicon для Blogger – иконка блога
• Похожие статьи для Blogger
• Сервисы обновления для сателлита на WP
• Sape и Ucoz: установка кода, проблемы, ошибки
• Бесплатный платный хостинг для сателлитов
• Как получить 100 тысяч просмотров в Ютуб, используя только ИИ

Тематика: Blogspot, Блогинг, Кодинг

Дата публикации: 14.07.2010

(некоторые ответы перед публикацией проверяются модератором)

Как сделать меню сайта в Blogger

Здравствуйте, дорогие читатели. Сегодня хочу вам рассказать как создать статистические страницы в блоге, как настроить и как сформировать меню из страниц.

Простое меню страниц можно создать с помощью стандартного встроенного гаджета «Страницы».

Сначала добавим гаджет в свой блог. Для этого нужно зайти в Административную панель Blogger Дизайн Добавить гаджет. В открывшемся окне выбираем из списка основных, встроенных гаджетов «Страницы». В настройках гаджета есть хорошая функция «Добавить внешнюю ссылку».

Для чего она нужна? В этой графе можно добавить статистическую страницу с названием веб-ресурса и ссылку на сайт, который будет в меню. На одном блоге видела такую страницу «Мой дневник», на другом страницу «Спонсоры». При нажатии на страницу вас перебрасывает на другой ресурс.

Гаджет «Страницы» в Blogger появится в боковой колонке блога (сайдбаре). Можно по желанию оставить меню и как есть. Мне встречались блоги где меню справа, а у основной массы сайтов и блогов меню страниц под шапкой блога.

Как сделать страницы верхними вкладками

Для того что бы сделать горизонтальное меню в блоге на Blogger, зажимаем гаджет левой кнопкой мышки и перетаскиваем его под название блога, под заголовок. Сохраняем расположение.

Как добавить страницы в блог

Вторым пунктом идет создание статистических страниц.Главная страница в гаджете появляется автоматически, ее создавать не надо, она создана платформой по умолчанию.

Мы будем с вами создавать другие страницы к примеру«Содержание» или «Карта блога», «Обо мне», «Контакты», «Реклама» и так далее.

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

И так:

Заходим в >Административную панель (админку) Blogger, нажимаем на вкладку Страницы

Вверху на вкладке с помощью кнопочек можно создать страницу, опубликовать, добавить её в черновик или удалить нажав на значок корзинку. Что бы добавить страницу в черновик или удалить, нужную страницу пометить галочкой и нажать на кнопку.

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

Следующий этап- создаём страницу. Нажимаем Создать страницу. У нас откроется практически такое окно, как редактор сообщений.

Даем название странице. Заполняем графу Описание для поисковых систем. Часто поисковики если по ключевым словам статья не попадает в ТОП, то Google особенно, берет сниппет с описания.

В графе «Параметры» все можно оставить по умолчанию, а можно запретить комментировать статистические страницы, для комментариев достаточно статей. Публикуем страницу.

Смотрим блог, у нас в меню только одна Главная страница. Что бы добавить все страницы в меню, заходим снова Дизайн Страницы и возле всех страниц ставим галочки Сохраняем.

Читайте также:

Будь в тренде!

Получай материалы прямиком в свою почту

*

Я даю согласие на сбор и обработку своих персональных и не персональных данных согласно действующей на сайте — политике конфиденциальности.

* Нажимая на кнопку «Отправить«, «Подпишись» или «

Как добавить навигацию в раскрывающемся меню в Blogger • Задеть носом

Автор: Эшли

5 августа 2013 г. 5 ноября 2019 г.

Кодирование

Bitchin ‘Book Blog, Blogger, Coding, Drop Down Menu, Navigation Bar, Tutorial

Я пытался создать раскрывающиеся меню в раскрывающихся меню blogger как ваш блог для ваших обзоров. Я пробовал пару разных учебников, и ничего не работает. Вы знаете, как это сделать? Большое спасибо за помощь, Эшли!
Ребекка Локхарт

Я мучился над этим вопросом НЕДЕЛЮ! Проблема в том, что в Blogger нет простого способа сделать это. Вы должны написать свой собственный HTML и CSS, чтобы заставить его работать, и для меня это не проблема, но пытаться объяснить это не-кодерам ДЕЙСТВИТЕЛЬНО сложно. А еще есть проблема, что я пытаюсь закодировать его для нескольких разных дизайнов блогов… это просто непросто!

Затем я нашел отличный сайт, который внезапно сделал мой урок намного проще!

Но имейте в виду, что вам все равно придется много редактировать CSS и HTML вашего шаблона.

Шаг №1: Создайте свое меню

Сначала перейдите в CSS Menu Maker и создайте свое навигационное меню! Выберите один из готовых стилей и нажмите «Настроить». Затем вы можете добавлять ссылки в меню, перетаскивать их, изменять заголовки и вставлять URL-адреса. Для каждого пункта меню вы должны указать URL страницы. Вам нужно будет скопировать и вставить это со своего сайта Blogger!

Когда вы закончите, нажмите кнопку «Загрузить».

Шаг № 2: Добавление CSS

После нажатия «Загрузить» на вашем компьютере должен быть ZIP-файл. Разархивируйте его, чтобы у вас был доступ к файлам внутри. Там должна быть папка с именем «menu_assets» и файл с именем «style.css». Откройте этот файл в каком-нибудь текстовом редакторе (например, Notepad, Notepad++ или Textwrangler). Вам нужно будет скопировать код и разместить его в своем блоге. Пока оставьте его открытым в текстовом редакторе и откройте новую страницу своего блога Blogger.

Вы должны щелкнуть вкладку, чтобы перейти к «Шаблону». Прежде чем мы что-либо сделаем, вам нужно сделать резервную копию вашего шаблона! Поскольку мы редактируем код, очень важно, чтобы вы заранее сделали его резервную копию на случай, если вы совершите какие-либо ошибки и вам нужно будет их исправить. Итак, в правом верхнем углу нажмите «Резервное копирование / восстановление», а затем нажмите кнопку «Загрузить полный шаблон».

После создания резервной копии шаблона нажмите кнопку «Редактировать HTML». Найдите фрагмент кода вверху, который выглядит следующим образом:

Нажмите на текст с надписью …, чтобы развернуть его. Затем прокрутите aaaaвниз, пока снова не найдете тег .

Создайте новую строку ПЕРЕД строкой . Здесь мы собираемся разместить наш первый фрагмент кода! Итак, вернитесь в текстовый редактор с документом style.css и скопируйте все. Затем вставьте его в свой шаблон в той новой строке, которую мы сделали. Затем сохраните свой шаблон. Возможно, вы захотите обновить домашнюю страницу своего блога, чтобы убедиться, что ничего не сломано. После добавления этого кода ничего не должно выглядеть иначе! Убедитесь, что все работает как положено.

Шаг №3: Добавление HTML

Далее мы должны добавить HTML. Вернитесь к файлам, которые вы загрузили из CSS Menu Maker. Должен быть файл с именем инструкциями.html. Дважды щелкните этот файл, чтобы открыть его в веб-браузере. Игнорируйте все инструкции, кроме №3:

3. Скопируйте и вставьте приведенный ниже HTML-код в любое место, где вы хотите, чтобы ваше меню отображалось.

Скопируйте весь текст в поле под этой строкой. Это ваш HTML! Теперь нам просто нужно поместить его в Blogger…

ЭТО САМАЯ СЛОЖНАЯ ЧАСТЬ ОБУЧЕНИЯ!!

Это буквально одна из причин, почему я боялся писать этот урок. Вопрос в том, куда мы поместим HTML? Ответ: это зависит от вашего шаблона. Вот почему этот учебник отстой. Тем более, если у вас есть собственный шаблон… HTML может отличаться. Итак, мне жаль, что это так сложно объяснить, потому что это серьезно зависит от того, где ВЫ хотите навигацию (над или под заголовком?) и какой шаблон вы используете.

На странице шаблона щелкните Изменить HTML. Теперь вам нужно копаться в шаблоне, чтобы вставить куда-нибудь выпадающий код HTML. Да я даже не шучу. Если вы используете шаблон Blogger по умолчанию и хотите, чтобы раскрывающийся список располагался над вашим заголовком, лучше всего разместить его прямо под этой строкой:

Прямо под ней введите раскрывающийся HTML-текст.

Хотите, чтобы это было под заголовком? Вот хорошее место:

<дел>
 

Вставьте в HTML, где я написал «HTML меню идет прямо здесь». Между закрывающим тегом и тегом