Как сделать красивое вертикальное меню для блога
Код 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>
На этом все, всего доброго. Если понравилась статья, поделитесь со своими друзьями и знакомыми в социальных сетях. Почитайте похожие статьи:
Как я понял, 2 кода - это составляющего одного виджета меню?
ОтветитьУдалитьПравильно поняли Сергей. Первый вставляете в шаблон блога, а второй гаджетом и вписываете URL адреса ссылок.
Удалить