[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 11
Форум обучение с помощью интернета » Блогосервисы, социальные сети, standalone блоги » Бесплатные площадки » Blogger (Blogspot) » Горизонтальное меню в блоггер (html)
Горизонтальное меню в блоггер
NatalkaДата: Вторник, 12.04.2011, 16:01 | Сообщение # 1
Авторитет
Группа: Администраторы
Сообщений: 1113
Репутация: 12
Статус: Offline

Скопируйте код, поставьте свои значения цвета кнопок, цвет шрифта, ссылки и вставьте в гаджет HTML/JavaScript
Код
<style>  
  <!--  
  div#menunav {  
  float: left;
border-top: 0px solid #EB7777;
border-bottom: 0px solid #ffffff;
font-size: 18px;
background-color: #340B09;
padding: 5px 5px 5px 5px;
margin: 5px 0;
  }  
  div#menunav ul {  
  margin: 0px;  
  padding: 5px;  
  }  
  * html div#menunav ul {  
  float: left;  
  border-left: 1px solid #ffffff; /* левая вертикальная черта к ul */  
  margin-left: 15px;  
  }  
  * html div#menunav a {  
  display: block;  
  }  
  div#menunav li {  
  float: left;  
  list-style-type: none; /* без маркеров списка */  
  background-color: #340B09; /* цвет кнопки до наведения */  
  border-right: 1px solid #FFFFFF; /* разделительные линии между li */  
  }  
  div#menunav li:first-child {  
  border-left: 1px solid #FFFFFF; /* первая вертикальная линия меню */  
  }  
  div#menunav a {  
  text-decoration: none; /* без подчёркивания ссылок */  
  padding: 5px 18px;
  color: #ffffff;/* цвет шрифта */  
  }  
  div#menunav a:hover {  
  color: #ffffff;  
  }  
  div#menunav li:hover {  
  background-color: #57130F; /* цвет кнопки после наведения */  
  }  
  -->  
  </style>  
  <div id="menunav" style="width: 100%;"> <!-- shirina menu -->  
  <ul>  
  <li><a href="ссылка на страницу блога" title="всплывающая подсказка">Главная</a></li> <!-- vasi ssilki -->  
  <li><a href="ссылка на страницу блога" title="всплывающая подсказка">Контакты</a></li>  
  <li><a href="ссылка на страницу блога" title="всплывающая подсказка">Разное</a></li>  
  <li><a href="ссылка на страницу блога" title="всплывающая подсказка">Уроки</a></li>  
  <li><a href="ссылка на страницу блога" title="всплывающая подсказка">Свежее<sup><font color="#ff0000">new</font></sup></a></li>  
  <li><a href="http://www.blogger.com/home?pli=1" title="Войти">Войти</a></li>  
  </ul>  
  </div>
 
NatalkaДата: Понедельник, 07.04.2014, 23:38 | Сообщение # 2
Авторитет
Группа: Администраторы
Сообщений: 1113
Репутация: 12
Статус: Offline

Как редактировать код с горизонтальным меню на css?

Код состоит из двух частей html:

Код
<div id="menunav" style="width: 100%;"> <!-- shirina menu -->  
  <ul>  
  <li><a href="ссылка на страницу блога" title="всплывающая подсказка">Главная</a></li> <!-- vasi ssilki -->  
  <li><a href="ссылка на страницу блога" title="всплывающая подсказка">Контакты</a></li>  
  <li><a href="ссылка на страницу блога" title="всплывающая подсказка">Разное</a></li>  
  <li><a href="ссылка на страницу блога" title="всплывающая подсказка">Уроки</a></li>  
  <li><a href="ссылка на страницу блога" title="всплывающая подсказка">Свежее<sup><font color="#ff0000">new</font></sup></a></li>  
  <li><a href="http://www.blogger.com/home?pli=1" title="Войти">Войти</a></li>  
  </ul>  
  </div>


и css (заключен междутегами style):

Код
<style>  
  <!--  
  div#menunav {  
  float: left;
border-top: 0px solid #EB7777;
border-bottom: 0px solid #ffffff;
font-size: 18px;
background-color: #340B09;
padding: 5px 5px 5px 5px;
margin: 5px 0;
  }  
  div#menunav ul {  
  margin: 0px;  
  padding: 5px;  
  }  
  * html div#menunav ul {  
  float: left;  
  border-left: 1px solid #ffffff; /* левая вертикальная черта к ul */  
  margin-left: 15px;  
  }  
  * html div#menunav a {  
  display: block;  
  }  
  div#menunav li {  
  float: left;  
  list-style-type: none; /* без маркеров списка */  
  background-color: #340B09; /* цвет кнопки до наведения */  
  border-right: 1px solid #FFFFFF; /* разделительные линии между li */  
  }  
  div#menunav li:first-child {  
  border-left: 1px solid #FFFFFF; /* первая вертикальная линия меню */  
  }  
  div#menunav a {  
  text-decoration: none; /* без подчёркивания ссылок */  
  padding: 5px 18px;
  color: #ffffff;/* цвет шрифта */  
  }  
  div#menunav a:hover {  
  color: #ffffff;  
  }  
  div#menunav li:hover {  
  background-color: #57130F; /* цвет кнопки после наведения */  
  }  
  -->  
  </style>
 
NatalkaДата: Понедельник, 07.04.2014, 23:38 | Сообщение # 3
Авторитет
Группа: Администраторы
Сообщений: 1113
Репутация: 12
Статус: Offline

Редактируем html код, поставляя свои ссылки, анкоры и встплывающие подсказки:
Код

<div id="menunav" style="width: 100%;"> <!-- shirina menu -->
<ul>
<li><a href="ссылка на страницу блога" title="всплывающая подсказка">ваш текст ссылки</a></li>  
<li><a href="ссылка на страницу блога" title="всплывающая подсказка">ваш текст</a></li>
<li>....</li>
...
<li>....</li>
<li><a href="ссылка" title="подсказка">текст ссылки</a></li>
</ul>
</div>


Отредактируйте цвета кнопок и текста в css части кода.

Вставьте в гаджет html/javascript и сохраните изменения.
 
NatalkaДата: Понедельник, 07.04.2014, 23:42 | Сообщение # 4
Авторитет
Группа: Администраторы
Сообщений: 1113
Репутация: 12
Статус: Offline

Что должно получиться (нажмите для просмотра анимации):

Прикрепления: 5825695.gif(9Kb)
 
Форум обучение с помощью интернета » Блогосервисы, социальные сети, standalone блоги » Бесплатные площадки » Blogger (Blogspot) » Горизонтальное меню в блоггер (html)
Страница 1 из 11
Поиск: