20 марта 2014 г.

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

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

Здравствуйте дорогие блоггеры. Сегодня предлагаю Вам код горизонтального меню для Ваших блогов. Установка простая, копируете код и в черновике blogger-дизайн-добавить гаджет-Html/JavaScript-вставить-сохранить. Смотрите на скриншоте вид меню. Кликните по рисунку, чтобы увеличить.

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



<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />



<style>

#RWGmenu-wrapper {

background:#215175 url(http://4.bp.blogspot.com/-coCMCoV_-dY/UhynitYW75I/AAAAAAAAGVI/7Ozc50Sh7jw/s1600/RWGmenu-bg.PNG) repeat;

width:1000px;

height:43px;

font:normal 15px 'Oswald', sans-serif;

text-transform:uppercase;

margin-bottom:15px;

}


#RWGmenu ul {
text-align:center;
padding:12px 0 8px;
}

#RWGmenu li {
display:inline;
margin-right:10px;
}

#RWGmenu li a {
color:#fff;
text-decoration:none;
padding:8px 10px;
}

#RWGmenu li.selected a {
color:#fff;
font-weight:700;
background:url(http://1.bp.blogspot.com/-DsiAiuk3gpo/TXVGE2JGkOI/AAAAAAAACrA/cg1mbaxAxXw/s1600/bgmenu_a.jpg) no-repeat center center;
}

#RWGmenu li a:hover {
text-decoration:none;
background:url(http://1.bp.blogspot.com/-DsiAiuk3gpo/TXVGE2JGkOI/AAAAAAAACrA/cg1mbaxAxXw/s1600/bgmenu_a.jpg) no-repeat center center;
}

</style>

<div id='RWGmenu-wrapper'>
<div class='RWGmenu section' id='RWGmenu'>

<ul>
<li><a href='http://адрес главной страницы'>Home</a></li>
<li><a href='http://адрес ссылки'>название</a></li>
<li><a href='http://адрес ссылки'>название</a></li>
<li><a href='http://адрес ссылки'>HTML</a></li>

<li><a href='#'>AdSense</a></li>
<li><a href='#'>CSS</a></li>

<li><a href='#'>RSS</a></li>
</ul></div></div>

Настройки: width:1000px;-ширина меню; height:43px;-высота меню; background:#215175-фон меню; впишите URL адреса ссылок и название заголовков. На этом у меня все. Всего Вам доброго. 
Открыть комментарии →

2 комментария:

Кнопки

--


ВК

Защита