Красивое вертикальное меню для блогов 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> На этом все, всего доброго. Если понравилась статья, поделитесь со своими друзьями и знакомыми в социальных сетях.





Автор статьи ✎ Olga Protasova Выпуск ✹ 12/15/2013 Ярлыки ►


Открыть комментарии →

2 коммент. :

  1. Как я понял, 2 кода - это составляющего одного виджета меню?

    ОтветитьУдалить
    Ответы
    1. Правильно поняли Сергей. Первый вставляете в шаблон блога, а второй гаджетом и вписываете URL адреса ссылок.

      Удалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *