Простое горизонтальное меню для Blogspot
Продолжаю рубрику по 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, ну или просто экспериментировать с переменными.
ПОНРАВИЛАСЬ СТАТЬЯ? ПОДЕЛИСЬ С ДРУЗЬЯМИ!
СТАТЬИ ИЗ РУБРИКИ:
Горизонтальное выпадающее меню в блоге.|шпаргалки блогерши
Привет, друзья. Сделаем сегодня красивое горизонтальное меню с выпадающими вкладками. Информация в блоге постоянно накапливается и иногда, для лучшей навигации, есть смысл добавить в пункты меню ещё и открывающиеся вкладки, подпункты.Здесь вариант вертикального меню с вкладками. Само по себе оно достаточно компактное, а при наведении курсора откроется ещё ссылки на нужные разделы блога. Посмотрите, пожалуйста, как вариант, на тестовом блоге под заголовком.
Ничего сложного с установкой нет. Код устанавливается через гаджет HTML/JavaScript. Для начала советую скопировать предложенный код в черновик или блокнот и сделать свои настройки.
nav {font:bold 11px Arial,Sans-Serif;
text-transform:uppercase;
}
nav ul {
background-color:#336666 ;
color:white ;
margin:0px 0px;
padding:0px 0px;
height:30px;
}
nav li {
list-style:none;
margin:0px 0px;
padding:0px 0px;
float:left;
display:inline;
}
nav li a {
display:block;
text-decoration:none;
color:#FFF ;
line-height:30px;
padding:0px 15px;
}
nav li a:hover,
nav li:hover > a {
background-color: #99CCCC ;
color:white;
}
nav li ul {
position:absolute;
top:100%;
left:0px;
z-index:99;
width:200px;
height:auto;
display:none;
}
nav li ul li {
float:none;
display:block;
}
nav li ul ul {
top:0px;
left:100%;
}
nav li:hover > ul {
display:block;
}</style>
<nav>
<ul>
<li><a href=»## # «>Главная</a></li>
<li><a href=»## # «>Содержание</a></li>
<li><a href=»## # «>Архив</a>
<ul>
<li><a href=»## #»>гаджеты</a></li>
<ul>
<li><a href=» ## #»>2013</a></li>
<li><a href=»## # «>2014</a></li>
<li><a href=»## # «>2015</a></li>
</ul>
</li>
<li><a href=»## # «>январь</a></li>
<li><a href=»## # «>февраль</a></li>
<li><a href=» ## #»>март</a></li>
</ul>
</li>
<li><a href=»## # «>Контакты</a></li>
</ul>
</nav>
Вместо решёток вставляйте адреса своих страниц, добавляйте пункты меню при необходимости-
<li><a href=»## # «>Содержание</a></li>
Подпункты, соответственно.
<li><a href=» ## #»>2013</a></li>
Подберите фон в спокойном положении и при наведении курсора. Всё это отмечено другим цветом в коде.
Вот сколько информации разместится в таком выпадающем горизонтальном меню. Компактно и удобно.
Готовый код устанавливаем в гаджет и перемещаем под заголовок блога.
В Блоггере может возникнуть проблема, с выпадающим меню, которое расположено именно под заголовком блога. Решение в этом сообщении
Не смею больше занимать ваше драгоценное время. Спасибо, что читаете мои шпаргалки. До новых встреч.
Как сделать меню сайта в Blogger
Здравствуйте, дорогие читатели. Сегодня хочу вам рассказать как создать статистические страницы в блоге, как настроить и как сформировать меню из страниц.
Простое меню страниц можно создать с помощью стандартного встроенного гаджета «Страницы».
Сначала добавим гаджет в свой блог. Для этого нужно зайти в Административную панель Blogger Дизайн Добавить гаджет. В открывшемся окне выбираем из списка основных, встроенных гаджетов «Страницы». В настройках гаджета есть хорошая функция «Добавить внешнюю ссылку».
Для чего она нужна? В этой графе можно добавить статистическую страницу с названием веб-ресурса и ссылку на сайт, который будет в меню. На одном блоге видела такую страницу «Мой дневник», на другом страницу «Спонсоры». При нажатии на страницу вас перебрасывает на другой ресурс.
Гаджет «Страницы» в Blogger появится в боковой колонке блога (сайдбаре). Можно по желанию оставить меню и как есть. Мне встречались блоги где меню справа, а у основной массы сайтов и блогов меню страниц под шапкой блога.
Как сделать страницы верхними вкладками
Для того что бы сделать горизонтальное меню в блоге на Blogger, зажимаем гаджет левой кнопкой мышки и перетаскиваем его под название блога, под заголовок. Сохраняем расположение.
Как добавить страницы в блог
Вторым пунктом идет создание статистических страниц.Главная страница в гаджете появляется автоматически, ее создавать не надо, она создана платформой по умолчанию.
Мы будем с вами создавать другие страницы к примеру«Содержание» или «Карта блога», «Обо мне», «Контакты», «Реклама» и так далее.
Статистических страниц можно создавать до 20 штук, но в каждом шаблоне по разному, по ходу обучения вы поймете сколько страниц будет в вашем меню.
И так:
Заходим в >Административную панель (админку) Blogger, нажимаем на вкладку Страницы
Вверху на вкладке с помощью кнопочек можно создать страницу, опубликовать, добавить её в черновик или удалить нажав на значок корзинку. Что бы добавить страницу в черновик или удалить, нужную страницу пометить галочкой и нажать на кнопку.
Справа на вкладке можно увидеть количество комментариев, число просмотров и дату создания страницы.
Следующий этап- создаём страницу. Нажимаем Создать страницу. У нас откроется практически такое окно, как редактор сообщений.
Даем название странице. Заполняем графу Описание для поисковых систем. Часто поисковики если по ключевым словам статья не попадает в ТОП, то Google особенно, берет сниппет с описания.
В графе «Параметры» все можно оставить по умолчанию, а можно запретить комментировать статистические страницы, для комментариев достаточно статей. Публикуем страницу.
Смотрим блог, у нас в меню только одна Главная страница. Что бы добавить все страницы в меню, заходим снова Дизайн Страницы и возле всех страниц ставим галочки Сохраняем.
Читайте также:
Будь вместе с Я Блоггер
Будь в тренде!
Получай материалы прямиком в свою почту
*
ПОДПИШИСЬ!
Я даю согласие на сбор и обработку своих персональных и не персональных данных согласно действующей на сайте — политике конфиденциальности.Поделиться в соцсетях
Горизонтальное меню css примеры для blogger (blogspot)
Здравствуйте, дорогие читатели. В прошлой статье «Горизонтальное меню для блога/cайта» можете узнать как установить горизонтальное анимированное выпадающее меню с подменю.
В этой публикации хочу поделиться еще несколькими вариантами горизонтального меню.
Меню вставляется в блог очень легко, нет надобности делать изменения в шаблоне, в коде есть стили СSS и код HTML, устанавливается одним кодом в тело гаджета.
И так:
Горизонтальное меню css примеры для blogger (blogspot)
Заходим Административная панель инструментов Blogger > HTML/JavaScript > код. Вначале копируем и вставляем в окно стили CSS, а ниже добавляем код HTML. Гаджет устанавливаем под заголовком блога.
Поочередно нажимаем на вкладки СSS > HTML > Result ( смотрим результат ).
Еще одно очень оригинальное красивое горизонтальное анимированное меню Css для blogger
Это меню Css cо скошенными краями и красивой тенью. При наведении мышкой подсвечиваются края.
Анимированное горизонтальное Css меню Прожектор для блога/сайта
При наведении мышки на пункты меню появляется круговой фон вокруг каждого названия.
Строгое горизонтальное СSS меню
Это меню примечательно тем что в нем нет фона. Меню минималистическое, лишь толстое подчеркивание под каждой ссылкой в пунктах меню. Мне такой вариант бесподобно нравится. Чем меньше всего — тем лучше.
Будь вместе с Я Блоггер
Будь в тренде!
Получай материалы прямиком в свою почту
*
ПОДПИШИСЬ!
Я даю согласие на сбор и обработку своих персональных и не персональных данных согласно действующей на сайте — политике конфиденциальности.Меню для Blogger фиксированное | WordPress Mania
(Последнее обновление: 06.03.2017)Здравствуйте, коллеги! Предлагаю вашему вниманию красивое меню для Blogger. Меню для блога можно создать не только стандартным блоггеровским методом (виджет страницы), но и установить его самостоятельно. Делается это, с помощью вставки в шаблон блога — код CSS и HTML код меню. Сегодняшнее фиксированное плавающее меню для вашего сайта будет с фото автора блога и небольшим описанием, социальными кнопками Google Plus, Facebook, Twitter и что естественно, с ссылками на ваши страницы или статьи. При прокрутке страницы блога, меню у вас будет оставаться на месте, всегда присутствовать перед глазами посетителей. Вот оно — красава и я там на фотке:
Фиксированное плавающее меню для блога
Умеют же, зарубежные разработчики делать для платформы Blogger красивые вещи, всё для своих заграничных пользователей стараются, а мы берём у них и распространяем в Рунете. Данное меню от Rivai Silaban из Индонезии. Скажем большое спасибо ему за проделанную работу и приступим к установке меню в блог. А теперь перейдём к делу — оформляем блог Blogspot, добавляем в него нужные элементы.
Фиксированное горизонтальное меню для Blogger
Фиксированное меню будет оставаться всегда неподвижным при прокрутке страниц блога, тем самым привлекая внимание посетителей вашего веб-ресурса. А также, им легче будет ориентироваться в вашем блоге. К тому же, оформление меню выполнено очень красиво и привлекательно. Скриншот выше не передаст такой красоты, сможете увидеть и оценить менюшку только после установки. Вам, друзья, такая панелька навигации точно понравится, обещаю. Установка происходит в два шага, добавляем стили и сам HTML код меню. Ну, поехали, за работу.
Для установки кода стилей CSS для меню, найдите в вашем шаблоне блога такую строку ]]></b:skin> (подробно, как вставлять стили, смотрим — тут) и чуть выше неё добавьте этот код:
/*****************************************
Widget Floating Menu Sosial Media
******************************************/
#BDrs-MENU {
width : 100%;
height : 70px;
margin : 0 auto;
box-shadow : 1px 3px 6px #000;
position : fixed;
z-index : 9999;
overflow : hidden;
top : 0;
left : 0;
background-color : #f0f0f0;
border-bottom : 3px solid #999;
color: #990000;
}
#BDrs-MENU #BDrs-MENU-NAV {
width : 960px;
height : 63px;
margin : 0 auto;
padding : 0;
font-size : 14px;
text-align : left;
}
#BDrs-MENU #BDrs-MENU-NAV p {
width : 90px;
float : left;
padding : 23px 0;
}
#BDrs-MENU #top-BD ul {
margin : 0 auto;
width : auto;
list-style-type : none;
}
#BDrs-MENU #top-BD ul li {
float : right;
margin : 8px 0;
}
#BDrs-MENU #top-BD ul li a {
border : #494949 solid 1px;
position : relative;
line-height : 28px;
margin-top : -1px;
padding : 3px 10px;
color : #990000;
font-size : 13px;
text-shadow : 0 -1px 0 #000;
display : block;
text-decoration : none;
font-weight : 500;
text-transform : none;
margin-right : 3px;
font-family : Georgia, "Times New Roman", Times, serif;
border-radius:10px 10px 0 0;
box-shadow:0 0 2px 1px #FF0000 inset;
font-style: italic;
}
#BDrs-MENU #top-BD ul li a:hover {
color : #666666;
border : #494949 solid 1px;
box-shadow : 0 0 2px #666;
background-color : none;
}
#BDrs-MENU #top-BD .text {
width: 100px;
height:60px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
line-height: normal;
}
#BDrs-MENU #top-BD .pic {
margin:0 15px 0 15px;
text-decoration: none;
color: #0000FF;
}
#BDrs-MENU #top-BD .pic:hover {
opacity:.3;
color: #333333;
}
/*** Blog Design CSS and ***/Если вам нужно вдруг поменять цвет, размер, шрифт и так далее, делайте это в коде выше. Следующий наш шаг, находим в коде шаблона закрывающий тег </body> и чуть выше его вставляем сам HTML код меню:
<!-- kode menu start --> <div> <div> <div> <p><img alt='gambar admin' src='https://lh4.googleusercontent.com/-5DCobLS7IsM/AAAAAAAAAAI/AAAAAAAATNw/0NI7vbXZiv8/s60-p-rw-no/photo.jpg' title='Сергей Загуляев'/> </p><p><span><a href='Ссылка на ваш профиль ' target='_blank' title='Мой профиль'><b>Сергей блогодел</b></a></span><br/>В этом блоге обсуждаются различные советы и обучающие программы, чтобы оптимизировать страницу Blogspot блога в поисковых системах (SEO), валидацию HTML 5, CSS 3.</p> <div > <a href='Ссылка GOOGLE PLUS ' target='_blank' title='google plus'><img alt='gplus' src="http://3.bp.blogspot.com/-ByzOfPrQLpc/UjCkKGJGF8I/AAAAAAAABxE/6kcQFFfdFMc/s1600/GP.png" title='google plus'/></a> <a href='Ссылка FACEBOOK ' target='_blank' title='like on facebook'><img alt='facebook' src="http://3.bp.blogspot.com/-yRUxDt11GnE/UjCkLgaEmdI/AAAAAAAABxU/-3VeWp6a8o4/s1600/fbk.png" title='like в facebook'/></a> <a href='Ссылка TWITTER ' target='_blank' title='follow on twitter'><img alt='twitter' src="http://4.bp.blogspot.com/-xq_h8wkL0jM/UjCkLPHhREI/AAAAAAAABxM/q-eSJoZmE_I/s1600/twk.png" title='follow в twitter'/></a></div> <div> <ul> <li> <a href='Ссылка на страницу ' rel="nofollow" target='_blank' title='Карта блога'> Содержание </a> </li> <li> <a href='Ссылка на страницу ' rel="nofollow" target='_blank' title='Инструменты'> Инструменты </a> </li> <li> <a href='Ссылка на страницу ' rel="nofollow" target='_blank' title='Пункт меню'> Меню </a> </li> <li> <a href='Ссылка на страницу ' rel="nofollow" target='_blank' title='Контакт'> Связь с автором </a> </li> <li> <a href='Ссылка на страницу ' rel="nofollow" target='_blank' title='О блоге'> О блоге </a> </li></ul></div> </div></div> </div> <div/> <br/> <br/> <br/><br/> <!-- menu End -->
Теперь, вам остаётся только заполнить его своими данными, своим текстом, ссылками и так далее. Да, не забудьте заменить моё фото, вставьте ссылку на своё изображение в строке 5. Вот, пожалуй и всё. Сохраните шаблон и смотрите, что у вас получилось. Вроде, ни чего не забыл рассказать. Надеюсь, вы справитесь.
Понравилось сегодняшнее фиксированное меню в Blogger? Пожалуйста, не стесняйтесь, напишите в комментариях и поделитесь записью в социальных сетях с помощью кнопочек ниже. Для меня это важно. Спасибо!
Поделиться в социальных сетях