Widget – “Страницы” (вертикальное меню)

Widget – “Страницы” (вертикальное меню)

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

Для добавлении этого виджета - вам надо:


1. Зайти в Дизайн ---> Элементы страницы ---> Добавить гаджет ---> HTML/jvascript

2. В строке Содержание в вашем гаджете - вставьте следующий код :
1 вариант

<style type="text/css">
#bluetd{
border: 1px solid #000000; /*Цвет границы */
border-bottom-width: 0;
width: 100%;
}

#bluetd ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#bluetd a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%;
text-decoration: none;
color: #ffffff; /* Цвет шрифта меню */
background-color: #2175bc; /*Цвет фона меню */
border-bottom: 1px solid #90bade; /*Цвет нижней границы */
border-left: 7px solid #1958b7; /*Цвет левый границы */
list-style-type:none;
}

* html #bluetd a{ /*Только для IE */
width: 94%;
width: 94%;
}

#bluetd a:hover {
background-color: #2586d7; /*Цвет фона при наведении курсором мышки*/
border-left-color: #1c64d1; /*Цвет фона левой границы при наведении курсором мышки*/
}

#bluetd div.menutitle{
color: #ffffff; /* Цвет шрифта, названии меню */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #000000; /*Цвет фона, названии меню*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
</style>

<div id="bluetd">

<div class="menutitle">Страницы</div>
<ul>
<a href="http://blogger.com.md/">Главная страница</a>
<a href="http://blogger.com.md/tutorials/">Уроки</a>
<a href="http://blogger.com.md/widgets/">Виджеты</a>
<a href="http://blogger.com.md/money/">Коммерция</a>
<a href="http://blogger.com.md/soft/">Полезный Софт</a>
<a href="#">Изменить</a>
</ul></div>

2 вариант
<style type="text/css">
#greentd{
border: 1px solid #000000; /*Main Border Color */
border-bottom-width: 0;
width: 100%;
}

#greentd ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#greentd a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff; /* Menu Font Color */
background-color: #267F00; /*Menu background Color */
border-bottom: 1px solid #90bade; /*Bottom border color */
border-left: 7px solid #4CFF00; /*Left border color */
list-style-type:none;
}

* html #greentd a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}

#greentd a:hover {
background-color: #FF4300; /*Menu background Color On Hover*/
border-left-color: #1c64d1; /*Left border color On Hover*/
}

#greentd div.menutitle{
color: #ffffff; /* Title Font Color */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #000000; /*Menu Tite Background Color*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
</style>

<div id="greentd">

<div class="menutitle">Страницы</div>
<ul>
<a href="http://blogger.com.md/">Главная страница</a>
<a href="http://blogger.com.md/tutorials/">Уроки</a>
<a href="http://blogger.com.md/widgets/">Виджеты</a>
<a href="http://blogger.com.md/money/">Коммерция</a>
<a href="http://blogger.com.md/soft/">Полезный Софт</a>
<a href="#">Изменить</a>
</ul></div>