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

По моему нормально получилось. Для установки меню копируем код ниже и вставить дизайн-добавить гаджет HTML/JavaScript, сохранить в нужном месте макета блога.
HTML код
<style type='text/css'> #v_mnu_01 ul { list-style: none; margin: 0; padding: 0; font-family: Arial; font-size: 16px; font-style: italic; text-decoration: none; }
#v_mnu_01 {background-color: #0a9e08; width: auto; margin: 3px; }
#v_mnu_01 li a:link, #v_mnu_01 li a:visited { color: #FFFFFF; display: block ; background-color: #000; border-radius:10px;-moz-border-radius:10px;
-webkit-border-radius:10px; outline: 2px dashed #fff; outline-offset: -7px; padding: 10px; min-height: 35px; padding:15px 0 0 15px;}
#v_mnu_01 li a:hover {color: #FFFF00; background: #03b4cc; padding:15px 0 0 15px;}</style>
<div id="v_mnu_01">
<ul>
<li><a href="адрес ссылки">Главная</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Карта блога</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Социальные сети</a></li></ul>
</div>
Настройки: выделено жирным: размер шрифта; italic-наклонный шрифт (курсив). если нужно обычный. замените на normal; ширина меню автоматически; margin:3px-расположение меню от левого края;
Выделено жирным сиреневым цветом: color: #FFFFFF цвет шрифта названия ссылок; background-color: #000; цвет поля вкладки (черный); border-radius:10px; радиус закругления углов поля; 2px dashed #fff; размер, форма и цвет прошивки; outline-offset: -7px выводим рамку внутри элемента; padding:10px; отступ пунктира от полей;
Выделено зеленым цветом: цвет ссылки и поля вкладки при наведении мыши; padding:15px 0 0 15px; расположение текста (названия ссылок) верх-низ, слева-справа;
Выделено синим: url адрес ссылки и пишем название. Вместо решеток также вставьте адрес ссылок;
Если вместо черного фона вкладок вставить фон градиент, получится супер меню, посмотрите в демо блоге. По ссылке ниже почитайте статью "меню для блоггер с фоном градиента".
Выделено зеленым цветом: цвет ссылки и поля вкладки при наведении мыши; padding:15px 0 0 15px; расположение текста (названия ссылок) верх-низ, слева-справа;
Выделено синим: url адрес ссылки и пишем название. Вместо решеток также вставьте адрес ссылок;
Выделено красным: вставьте любой цвет, и меню будет с внешним фоном, пример

Немного неудачно получился коллаж скриншотов, такой вид будет иметь меню с добавлением внешнего фона. Меню корректно отображается в браузерах Гугл Хром, Опера, Мазила, Яндекс браузер. В ИЕ11 у меня не отображается прошивка.
Надеюсь, информация Вам пригодится, спасибо за визит. На все вопросы по настройке отвечу в комментариях или воспользуйтесь формой для связи. Всего доброго.
Читать также:
Надеюсь, информация Вам пригодится, спасибо за визит. На все вопросы по настройке отвечу в комментариях или воспользуйтесь формой для связи. Всего доброго.
Читать также:
Рекомендуемый контент:
Оленька приветик! Сто лет в обед , как я не появлялась... здорово ты придумала, надо будет заняться усовершенствованием своего блога..но уже по осени... Оленька а как комментарии сделать в блоге?
ОтветитьУдалитьВаля, здравствуй. Спасибо, что заглянула и за отзыв. По комментам, у тебя в блоге включены комментарии Google+, надо отключить.
УдалитьНастройки-перейти Сообщения, комментарии и настройки доступа. Далее "Включить комментарии Google+ в этом блоге"-поставить Нет.
В блоге появятся комментарии блоггер, а в админке строка "Комментарии"
Здравствуйте. Скажите пожалуйста, а как сделать такое меню как у Вас с правой стороны сайта (об авторе, персональный домен и т.д.). Буду очень признательна, если опишите подробно
ОтветитьУдалитьsergeevna, здравствуйте. У меня установлен гаджет "Страницы". Дизайн-добавить гаджет "страницы". Добавила внешние ссылки. Можно установить гаджет "Список ссылок". Далее, используя CSS изменила дизайн. Почитайте в статье по ссылке:
Удалитьhttp://www.bdblogov.ru/2016/01/making-gadget-search-Google-and-others-with-using-CSS.html