Můj blog - Blogger - 16. Kapitola - Vlastní styl štítků

Další díly najdete v rozcestníku.
Seznam štítků na blogu většinou nevypadá příliš hezky a proto je dobré ho trochu upravit.

Najděte si Blogger -> Šablona -> Upravit HTML a klikněte na textové pole, které se vám otevře. Poté na své klávesnici stiskněte klávesovou zkratku Ctrl + F. Do vyhledávacího pole zkopírujte tento kód:

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

A kód, který se vám vyhledá, změňte na tento:

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;' id='rub'>

Poté jděte na Blogger -> Šablona -> Personalizovat, z levého seznamu vyberte Pokročilé a poté si najděte Přidat CSS. Do tohoto pole vložte tento kód:

#rub ul {
padding-left: 0px;
width: 100%;
}

#rub ul li {
background: #00B1BD; /*barva pozadí štítků*/
border-color: #08E4FF; /*barva rámečku štítků*/
border-width: 1px; /*velikost rámečku*/
border-style: solid;
list-style-type: none;
margin: 0 0 5px 0px;
padding: 5px 5px 5px 10px !important;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

#rub ul li:hover {
background: #00F7BD; /*barva pozadí štítku po najetí myší*/
border-color: #99E4FF; /*barva rámečku štítků po najetí myší*/
border-width: 1px; /*velikost rámečku po najetí myší*/
border-style: solid;
}

#rub ul li a {
text-decoration: none;
color: #000000;
padding: 0 5px;
}

#rub ul li a:hover {
color: #000000;
text-decoration: underline;
}

*červeně zvýrazněné části můžete upravovat
Pokud nevíte jak zadávat kód barev, klikněte sem, vyberte si vhodnou barvu a zkopírujte si notaci HTML.