Красивое вертикальное меню для блогов Blogspot

---

Как сделать красивое вертикальное меню для блога

Всем здравствуйте, давайте рассмотрим урок по созданию вертикального меню для нашего блога. Желающим сделать такое меню, смотрите скриншот слева, нужно скопировать коды ниже. Напоминаю, что информация только для блогов на blogspot.

Код 1 вставляете дизайн-изменить HTML, перед закрывающим тэгом </head> Комбинацией клавиш Ctrl + F вызываем поиск и вписываем тэг </head>, нажимаем поиск. Ищем в шаблоне выделенный тэг.У кого не получится вызвать поиск, ищем закрывающий тэг вручную. 

Копируем код 1:

  <style type="text/css">  #v_mnu_01 ul {  list-style: none;  margin: 0;  padding: 0;  font-family: Arial, Helvetica, sans-serif;  font-size: 12px;  font-style: normal;  font-weight: bold;  text-decoration: none;  }  #v_mnu_01 {  width: 200px;  margin: 10px;  border-top-width: 0;  border-right-width: 0;  border-bottom-width: 0;  border-left-width: 0;  border-top-style: solid;  border-right-style: solid;  border-bottom-style: solid;  border-left-style: solid;  border-top-color: #000000;  border-right-color: #000000;  border-bottom-color: #000000;  border-left-color: #000000;  }  #v_mnu_01 li a {  text-decoration: none;  border-top-width: 1px;  border-right-width: 1px;  border-bottom-width: 1px;  border-left-width: 1px;  border-top-style: none;  border-right-style: none;  border-bottom-style: solid;  border-left-style: none;  border-bottom-color: #000000;  } #v_mnu_01 .notopbrdr0xNone {  border-top-style: none;  border-right-style: none;  border-bottom-style: none;  border-left-style: none;  }  #v_mnu_01 li a:link, #v_mnu_01 li a:visited {  color: #FFFFFF;  display: block;  background-color: #000000;  padding-top: 3px;  padding-right: 0;  padding-bottom: 3px;  padding-left: 10px;  }  #v_mnu_01 li a:hover {  color: #FFFF00;  background:  #AA0000;  padding-top: 3px;  padding-right: 0;  padding-bottom: 3px;  padding-left: 10px;  }   </style> 

Можно изменить высоту и ширину меню, изменить фоновый цвет и цвет текста. Поэкспериментируйте с цветовой гаммой.

Копируем код 2:

Этот код вставляете дизайн-добавить гаджет-Html/Javascript-вставить-сохранить.

<div id="v_mnu_01">

  <ul>

<li><a href="/">Home</a></li>

<li><a href="ссылка на страницу 1">название</a></li>

<li><a href="ссылка на страницу 2" class="notopbrdr0xNone">название</a></li>

</ul>

</div>

Home - главная или любая другая страница.; Ссылка на страницу - URL адрес ссылки; Название - заголовок поста;

Добавляйте ссылки на сообщения, добавьте строку

  <li><a href="адрес ссылки>название</a></li> 

На этом все, всего доброго. Если понравилась статья, поделитесь со своими друзьями и знакомыми в социальных сетях.   Почитайте похожие статьи: 

• Анимированное меню; 
• Вертикальное меню в прокрутке; 
• Как скопировать не копируемый код;

Рекомендуемый контент: