Вертикальное меню (navbar).

Вы наверно заметили, 4 кнопы у меня слева это вертикальный навбар или меню, кому как привычнее. Я его по заимствовал с другого шаблона Blogger Genkit

А вот и сам код:
Этот код нужно расположить в CSS части

#divStayTopLeft {
left:5px;
position:absolute;
top:15px;
}

.sidetab {
}

.sidetab ul {
list-style-type: none;
margin: 0;
margin-top: 130px;
padding: 0;
}

.sidetab ul li {
border-bottom: 0;
margin-bottom: 0;
padding: 0;
}

.sidetab a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf-10oWi6Vrg9r2aIrLmt4ZThsQvhmnUAlv5EW0twohuH_46uBfmEaM9f5rgsxW5BVGnLVyjUx6HK8hguoTrdZ03uQfUumTEjUePirW_lqZ2YZVL_sa4JjgoFPDH0K_bm-mpQ42x9vM_4/s1600/gtbg_sidetab.gif) no-repeat;
display: block;
height: 60px;
padding-bottom: 6px;
width: 25px;
}

.sidetab a:link, .navlist a:visited {
color: #555;
text-decoration: none;
}

.sidetab a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf-10oWi6Vrg9r2aIrLmt4ZThsQvhmnUAlv5EW0twohuH_46uBfmEaM9f5rgsxW5BVGnLVyjUx6HK8hguoTrdZ03uQfUumTEjUePirW_lqZ2YZVL_sa4JjgoFPDH0K_bm-mpQ42x9vM_4/s1600/gtbg_sidetab.gif) no-repeat 0px -70px;
}

.sidetab .sidetab_alt a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPBRoEQhlfksrd2kG9favGuSjHv0wAvqVFtY3ny9QmjF2JrZGyMDdDpebYerUJOdsKtxmuyT9WRz66uTSXu806P8Q1uFyM_FWxYXjsk1W_FniNBwOL8apqCL8jWUsLdvItj1ivCn8O3Q/s1600/gtfeed.gif) no-repeat;
height: 25px;
}

.sidetab .sidetab_alt a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPBRoEQhlfksrd2kG9favGuSjHv0wAvqVFtY3ny9QmjF2JrZGyMDdDpebYerUJOdsKtxmuyT9WRz66uTSXu806P8Q1uFyM_FWxYXjsk1W_FniNBwOL8apqCL8jWUsLdvItj1ivCn8O3Q/s1600/gtfeed.gif) no-repeat 0px -35px;
}

Ну а этот уже между тегами <body> и </body>

<div id='divStayTopLeft'>
<div class='sidetab'>
<ul class='navlist'>
<li><a expr:href='data:blog.homepageUrl'><img alt='HOME' height='60' src='http://img98.imageshack.us/img98/7128/ererhomebo7.gif' width='25'/></a></li>
<li><a expr:href='data:blog.homepageUrl + "atom.xml"'><img alt='Sitemap' height='60' src='http://img98.imageshack.us/img98/9450/erersitemapbx5.gif' width='25'/></a></li>
<li><a href='#' title='Contact Me'><img alt='Contact' height='60' src='http://img98.imageshack.us/img98/7302/erercontactph2.gif' width='25'/></a></li>
<li class='sidetab_alt'><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'><img alt='' height='25' width='25'/></a></li></ul></div>
</div>

У меня он в самом конце сразу перед </body>, чисто из удобства.
PS Советую скачать все кнопки и залить на свой хост, мало ли. Ну а если захотите русифицировать то тут надо менять само изображение кнопки.
Если возникнут вопросы, прошу в комменты.

4 коммент.:

Анонимный комментирует...: странно, я пытался так сделать в своем блоге, но у меня навбар получался статическим... т.е. он не перемещался по вертикали. В чем ошибка?
Tn Pegas комментирует...: я не экстрасенс, но смею предположить что вы пользуетесь Firefox и у вас установлен плагин NoScript. Добавьте ваш сайт в исключение. Или аналогия в Oper-е. Если не то и не другое, повторите все с начала и по внимательней, если снова не выйдет пишите комментарий, свяжемся помогу.
Анонимный комментирует...: наверно, все же экстрасенс... Только можно уточнить, где лучше расположить в CSS части код. А то я слабо в них разбираюсь
Анонимный комментирует...: видимо экстрасенс =))
только можно уточнить где именно в разделе CSS надо вставлять код, а то я там плохо ориентируюсь. И как можно сайт добавить в исключение?

Отправить комментарий

Tn Pegas