Новое в блоге
Loading...
9 янв. 2012 г.

Красивое меню для Blogger

Привет дорогие посетители блога "Школа Blogger(а)". Хочу предложить Вам красивое боковое меню для вашего блога. Сильно расхваливать не буду, это видно на картинке. Процесс установки меню в блог достаточно прост,как говорится "проще пареной репы" Виджет легко отредактировать,так что Вы можете настроить его. И так картинки картинками, а посмотреть и пощупать боковое меню надо. Поэтому мне придёться предложить Вам сгонять туда и обратно в блог для демонстрации виджетов. Смотреть. Теперь перейдём к делу.

Как установить виджет боковое меню для Blogger

Заходим Blogge r-- Дизайн -- Нажимаем -- добавить гаджет HTML / JavaScript и вставляем в его поле этот небольшой код:
<center><div id="menu">
<ul>
<li><a class="current" href="http://new-school-blogger.blogspot.com/">Главная</a></li>
<li><a href="http://new-school-blogger.blogspot.com/p/blog-page_18.html">Карта</a></li>
<li><a href="http://new-school-blogger.blogspot.com/p/blog-page_02.html">О блоге</a></li>
<li><a href="http://new-school-blogger.blogspot.com/p/blog-page_3379.html">Контакт</a></li>
<li><a href="#">Меню</a></li>
</ul>
</div></center>
<style>
*{
margin:0;
padding:0;
}
#menu{
background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXsev4OJbTI/AAAAAAAACBc/0EEtXs7ckkg/s1600/menu_026_bg.jpg) no-repeat;
width:172px;
height:191px;
padding:15px;
}
#menu ul{
list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{
list-style:none;
display:block;
background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseueLX9TI/AAAAAAAACBM/BQCk16wweRQ/s1600/menu_026_b.gif) no-repeat left center;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
#menu li .current{
list-style:none;
display:block;
background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
</style>
Теперь создайте своё меню со своими ссылками. Сохраните гаджет и перетащите его в положенное место для вашего меню. Всё.Всего доброго. До новых встреч.

Смотрите также горизонтальное выпадающее меню здесь или изучите термины веб-мастеров тут.

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

6 коммент. :

  1. Спасибо, отличное меню! Так понимаю, можно заменять в коде на свои картинки или коды css :)

    ОтветитьУдалить
  2. Привет!Давненько не заглядавал.Можно менять картинки на свои.

    ОтветитьУдалить
  3. Привет, Сергей! Ну так я ж писал, что скорее после праздников буду бывать ) И у меня ж блог иной тематики, но все твои твиты я  читаю ))

    ОтветитьУдалить
  4. Я помню.Я сам вчера только начал обновлять блог.

    ОтветитьУдалить
  5. а как поменять картинки на свои???

    ОтветитьУдалить
    Ответы
    1. Это же легко. Вставьте ссылки свои на картинки.

      Удалить

 
Footer