Сегодня 9 июня, понедельник ГлавнаяНовостиО проектеЛичный кабинетПомощьКонтакты Сделать стартовойКарта сайтаНаписать администрации
Поиск по сайту
 
Ваше мнение
Какой рейтинг вас больше интересует?
 
 
 
 
 
Проголосовало: 7281
Кнопка
BlogRider.ru - Каталог блогов Рунета
получить код
Блог для блогов - создание блога на blogspot
Блог для блогов - создание блога на blogspot
Голосов: 1
Адрес блога: http://bdblogov.blogspot.com/
Добавлен: 2013-06-02 03:52:18 блограйдером Olga28
 

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

2013-12-15 22:31:00 (читать в оригинале)

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


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

Этот код вставляете дизайн-изменить 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> 
На этом все, всего доброго.

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



Тэги: меню

 


Самый-самый блог
Блогер ЖЖ все стерпит
ЖЖ все стерпит
по количеству голосов (152) в категории «Истории»


Загрузка...Загрузка...
BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.