Да направим допълнително меню в Blogger

Продължаваме да работим и да променяме дизайна на блога и менютата му. След като променихме дизайна на притурката "Страници", ще се опитаме да направим едно просто допълнително меню за блога на Blogger, където можем да поставим хипервръзки към важни етикети или отделни публикации, за които смятаме, че има нужда от бърз достъп.


За да създадем допълнително меню, се нуждаем от познатата ни HTML / JavaScript притурка. В нея ще бъде вписан кодът на нашето допълнително меню.
И първо ще изберем местоположението му. Имаме следните възможности:
Ако притурката "Страници" не се използва и CSS свойства не са зададени за нея, можете да я поставич над или под заглавката на блога.
Заедно с притурката "Страници" - над или под полето за публикации, или в страничните колони.
CSS за всички варианти е еднакъв, само ширината и височината на целия блок и елементите вътре, като бутонните за връзки, се задават в зависимост на желаните размери.
HTML структурата е най-обикновена:

<ul class="CssMenu">
<li class="CssMenu"><a href="#" title="">Link</a></li>
<li class="CssMenu"><a href="#" title="">Link</a></li>
<li class="CssMenu"><a href="#" title="">Link</a></li>
<!--всички наши хипервръзки-->
<li class="CssMenu"><a href="#" title="">>Link</a></li>
</ul>

А сега и CSS кода :

ul.CssMenu {
 list-style:none;
 padding:0px;
 margin:0px;
}
li.CssMenu {
 float:left;
 padding: 0px;
}
li.CssMenu a{
 display:block;
 vertical-align: middle;
 text-align:center;
 font: normal normal 12px Tahoma;
 text-decoration:none;
 color: #fff;
 margin: 0px;
}
li.CssMenu a{
 height:50px; /*височина на бутоните – избира се*/
 background-image:url(../image.jpg); /*фоново изображение за бутоните-хипервръзки*/
 background-repeat: no-repeat;
 width:90px; /*ширина на бутоните – избира се*/
}
li.CssMenu a:hover{
 background-position:-90px 0;
}

За този стил като фоново изображение е използвано следното изображение:

За повече информация относно използването на изображения (sprites) като фон на бутоните прочетете тази публикация.

След като изберете местоположението на притурката с менюто в темата, може да се наложи да регулирате височината - height и ширината - width на блоковете. За да намалите или увеличите броя на бутоните, просто изтрийте или добавете нови хипервръзки към притурката с менюто.

 <li class="CssMenu"><a href="#" >Link</a></li>

При използване на двете менюта в блога – допълнителното меню и притурката „Страници“, е необходимо задаване на допълнителни CSS свойства, за да премахнете разстоянието между бутоните и на двете менюта.

.tabs .widget ul a, .tabs .widget ul a:hover, .tabs .widget li a, .tabs .widget li a:hover {
 margin: 0;
 border: 0;

Това е всичко. Ще се радвам на вашите коментари.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: