Blogerské vychytávky #5

Léto. Léto je čas odpočinku i příležitost dát si do těla, válení se u vody a popíjení vychlazených drinků, tři kopečky zmrzliny a večerní filmové maratony, knížka v klíně a sluneční brýle na nose, výlety a srazy s přáteli a hlavně a především prázdniny. Krom celého tohoto výčtu se ale také jedná o čas vhodný pro zkoušení nových věcí, období změn a experimentování. A právě proto se vám může hodit další díl Blogerských vychytávek, v němž vás opět seznámím s několika novými tipy a triky, jak si již stávající nebo zcela nový blog vylepšit k obrazu svému. 

A jak už jsem řekla - kdy je lepší čas to zkusit než teď?

Jak změnit barvu označení textu?

Rozdíl mezi prvním a druhým způsobem zvýraznění textu je prakticky vzato nulový. Nicméně pevně věřím, že nejsem jediná, komu už po letech ta otravná modrá tak trochu leze na mozek - a přitom existuje opravdu jednoduchý a efektivní způsob, jak se jí během několika málo vteřin zbavit!

Nejprve si v Šabloně blogu otevřete Personalizovat.

Zde klikněte na Pokročilé, potom na Přidat CSS. Sem zkopírujete následující kód:

::-moz-selection{

background:#BDBEBF ;color:#FFFFFF

}

::selection{

background:#BDBEBF; color:#FFFFFF

}

× barva podkladu zvýraznění

× barva písma

Nyní už stačí jen Použít na blog a máte hotovo!

Jak na tvorbu rozbalovacího menu?

Rozbalovací menu je praktická vychytávka, která vašemu blogu dodá na přehlednosti a profesionalitě. Jestliže nemáte návod, může se ale jeho "tvorba" zdát složitá, nicméně pokud víte, jak postupovat, ve skutečnosti se nejedná o nic zásadně těžkého.

Nejprve kliknete na Rozvržení a posléze na Nový gadget. Zvolíte HTML/Java Script.

Do něho vložíte tento kód:

<div id='menubar'>

    <ul id='menus'>

<li>

        <a href='#'>RUBRIKA1</a>

      </li>

<li>

        <a href='#'>RUBRIKA2</a>

         <ul>

<li><a href='#'>PODRUBRIKA1</a></li>

<li><a href='#'>PODRUBRIKA2</a></li>

</ul>

<li>

        <a href='#'>RUBRIKA3</a>

      </li>

<li>

        <a href='#'>RUBRIKA4</a>

        <ul>

<li><a href='#'>PODRUBRIKA1</a></li>

<li><a href='#'>PODRUBRIKA2</a></li>

<li><a href='#'>PODRUBRIKA3</a></li>

</ul>

</li>

</ul>

</div>

Do kódu si dosadíte názvy vašich rubrik a podrubrik, můžete si libovolně přidávat nové nebo naopak ubírat. Ale dejte pozor, aby základní vzorec zůstal zachován!

Nakonec dáte uložit a gadget myší přetáhnete na vyznačené místo (viz předchozí obrázek). Pokud si ale nyní otevřete blog, jednotlivé rubriky se vám zobrazí jaksi "rozházené". Proto si nyní otevřete Šablonu blogu, posléze Pokročilé a Přidat CSS, kam vložíte celý tento dlouhý kód:

 /*-------- ZAČÁTEK ROZBALOVACÍHO MENU -------*/

#menubar {

    background: #ffffff; ***Pozadí celého panelu menu***

    width: 840px;

    color: transparent;

        margin: 10px;

        padding-left: 105px; 

        position: relative: center;

        border-top: none;

        height:35px;

}

#menus {

    margin: 0;

    padding: 0;

}

#menus ul {

    float: left;

    list-style: none;

    margin: 0;

    padding: 0;

    }

#menus li {

    list-style: none;

    margin: 0;

    padding: 0;

        border-left: none;

        border-right:none;

        height:35px;

display:inline;

}

#menus li a, #menus li a:link, #menus li a:visited {

    color: #ffffff; ***Barva textu menu*** 

    display: block;

   font:normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 0;

      text-decoration: none;

    padding: 10px;

        

}

#menus li a:hover, #menus li a:active {

    background: #ffffff;  /***Pozadí při najetí myší***/

    color: black;

    display: block;

    text-decoration: none;

        margin: 0;

    padding: 9px 12px 10px 12px; 

}

#menus li {

    float: left;

    padding: 0;

}

#menus li ul {

    z-index: 9999;

    position: absolute;

    left: -999em;

    height: auto;

    width: 160px;

    margin: 0;

    padding: 0;

}

#menus li ul a {

    width: 140px;

}

#menus li ul ul {

    margin: 0px 0 0 0px;

}

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {

    left: -999em;

}

#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul {

    left: auto;

}

#menus li:hover, #menus li.sfhover {

    position: static;

}

#menus li li a, #menus li li a:link, #menus li li a:visited {

    background: #......; ***Pozadí rozbaleného sloupce***

    width: 120px;

    color: #ffffff; ***Barva textu rozbaleného sloupce***

    display: block;

    font:normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;

    margin: 0;

    padding: 9px 12px 10px 12px;

        text-decoration: none;

z-index:9999;

border-bottom: none;

}

#menus li li a:hover, #menusli li a:active {

    background: #ffffff; ***Barva pozadí rozbaleného sloupce při najetí myší***

    color: transparent;

    display: block;     margin: 0;

    padding: 9px 12px 10px 12px;

        text-decoration: none;

}

/*-------- KONEC ROZBALOVACÍHO MENU -------*/

Kód si můžete snadno upravit a vylepšit podle sebe, ať už se to týká barev (hexadecimální kód barvy - dá se snadno zjistit na googlu nebo v libovolném grafickém editoru), velikosti písma a dalších detailů.

hexadecimální kód barvy 
(z PhotoFiltre Studio X)

Pomohly vám návody? 
Znáte nějaké další blogerské vychytávky?