pondělí 25. července 2016

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?

7 komentářů:

  1. Super článek, to rozbalovací menu vypadá užitečně, ale já s HTML zrovna nekamarádím, tak nevím, jestli se mi to podaří. No, až přestanu být taková nenapravitelná konzerva, co se vzhledu blogu týče, mohla bych zkusit si tím trochu pohrát. :D

    OdpovědětVymazat
  2. Výborný článek :) Hlavně návod na rozbalovací menu :) To bych chtěla zkusit :) Návod vypadá malinko dlouze a děsivě, ale věřím ti :D tvoje blogerské triky vždycky fungovaly :D

    OdpovědětVymazat
  3. těm, co mají blogspot se to určitě hodí :) máš pravdu, modrá na zvýraznění textu už mě vážně štve :D a ta nabídka, která se tak efektivně ukazuje je báječná ♥

    OdpovědětVymazat
  4. Parádní návod :D A to rozbalovací menu možná vyzkouším :D

    OdpovědětVymazat
  5. To je skvělý návod, věřím, že spoustě lidem to pomůže! :) Škoda, že nemáš podobný i pro Webnode! :D

    http://boook-planet.webnode.cz/

    OdpovědětVymazat
  6. Jsem asi debil, ale to rozbalovací menu mi nejde! Jinak mám tvůj blog moc ráda

    OdpovědětVymazat

Děkuji za komentář, nezapomeňte za sebou nechat stopu v podobě odkazu na blog a přidat se k mým pravidelným čtenářům, aby vám nic nového na blogu neuniklo. Hezký zbytek dne přeji! ♥

Related Posts Plugin for WordPress, Blogger...