Горизонтальное меню с иконками

В нашей теме горизонтальное меню с возможностью вставки всплывающих картинок или иконок, кому как нравится. Меню работает с использованием CSS стилей. Идем в шаблон-изменить шаблон, ищем строку <b:skin>...</b:skin>. Нажимаем на стрелку слева, спускаемся вниз и выше строки ]]></b:skin> вставляем CSS. /* The CSS Code for the menu starts here bloggertrix.com */ #btrix-nav {margin: 100px auto;list-style: none;width: 100%;height: 70px;overflow-y: hidden;} #btrix-nav li {float: left;} #btrix-nav li a {display: block;color: white;width: 120px;height: 51px;margin-top: 5px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;} #btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);} #btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;} #btrix-nav li a:hover {cursor: pointer;} #btrix-nav li a:hover img {top: -85px;} #btrix-nav li a:hover .aname {top: 85px;} #btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 10px 0 0 10px;border-left: 1px solid #bbb;} #btrix-nav li:nth-child(2) a {background: #9bc704;} #btrix-nav li:nth-child(3) a {background: #0dc3ff;} #btrix-nav li:nth-child(4) a {background: #51a2ec;} #btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 10px 10px 0;border-right: 1px solid #555;} Здесь Вы можете изменить фон и размер вкладок. Выделенное фиолетовым-фон; оранжевым-толщина окантовки слева и справа; зеленым-размер загругления углов; коричневым-высота вкладок.  Далее нам надо перейти в дизайн-добавить гаджет и вставить скопированный ниже HTML код <div id="btrix-nav"> <li> <a href="#"><span class="aname">Главная</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKxlDezXLYjdZ-zuWkGD-6PKVYZuXbOHocnAHzJiVfYUXojQfo4cgN-Gqmzt8tnMjrysZ9kvfB2EgVuXwB-kbrb28N35bRZC6gJ2ZcnqSnZsN35K3Clpbndyi2IYYrjiLJUlFR9Fhefx0/s1600/btrix-home.png" /> </a> </li> <li> <a href="#"> <span class="aname">Скачать</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbbVC643GPIbWkA8jircCxr9Jdb7I63sKcUFveBqYHmh0woi1_aSAqYlfCUgIel7-BD2KhGDjEv_RpyEGyZhs6RWQIfTOt2cCaQJykTCThBwSX5E66WoElffAAmsHlwRaw4eLvXehjiRU/s1600/btrix-download.png" /> </a> </li> <li> <a href="#"> <span class="aname">Обо мне</span> <img src="http://www.iconsearch.ru/uploads/icons/musthave/128x128/mail.png" /> </a> </li> <li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6soOEJtyDeLXQPmqmOEiYj2ER651Al7KqwbpgCYCCubkE8_COl6BI4AqbRphb9QeXRHg_t5UKNwD6Xq-amxWjNLqS-vD1D71OoYfSrDL7es7z1NUYAwAm6LSoB2qLQ2YHxi697LTXQIg/s1600/Btrix-html.png" /> </a> </li> <li> <a href="#"> <span class="aname">Контакты</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpZYTsga7QJX_8CDbXRPZeT1mrOHi_w7bel_HyHgXXIsQZ76IhR0bu0mDd1Lw-UbisSB6mK6-bdLI-HDPR8kSPtg8ZYM_e5beI2ejoRt7CFbk-vJnNdVUvwTPuuV5hyefshXHhyphenhyphenNzaUzM/s1600/btrix-contact.png" /> </a> </li> </div> Выделенное лиловым-URL адрес ссылки; красным-название ссылки; синим-URL адрес иконки; Для большего количества вкладок добавьте строки: CSS: #btrix-nav li:nth-child(6) a {background: #51a2ec;}-измените фон;  HTML: <li> <a href="#"> <span class="aname">Обо мне</span> <img src="http://www.iconsearch.ru/uploads/icons/musthave/128x128/mail.png" /> </a> </li>-измените название и адрес ссылки, вставьте адрес нужной иконки. источник:https://demo-q.blogspot.com/2014/06/blog-post.html