4. 4. 2015

Blogger Tips | Ako na navigačné menu

Ahojte! :) 


V dnešnom článku blogger tips vám ukážem návod ako na navigačné menu. Viem, že som na ask-u niekomu sľúbila, že najbližšie urobím návod na čiary v bočnom panely ale myslím si, že tento návod je niečo, čo potrebuje viac ľudí. Takže sľúbený návod bude nabudúce :)

1.) 
Ako prvé je to, že pod hlavičkou vášho blogu v Rozložení by ste nemali mať žiadny gadget. Vložte ho tam v podobe HTML/JavaScript. 

2.) 
Do je obsahu vložte tento kód:

<center>
<div id='menubar'>
    <ul id='menus'>
<li>
        <a href='http://www.danycuks.com'>home</a>
      </li>
<li>
        <a href='http://www.danycuks.com/p/about.html'>about</a>
      </li>
<li>
        <a href='http://www.danycuks.com/p/contact.html'>contact</a>
      </li>
<li>
        <a href='http://www.danycuks.com'>categories</a>
        <ul>
<li><a href='http://www.danycuks.com'>categorie1</a></li>
<li><a href='http://www.danycuks.com'>categorie2</a></li>
<li><a href='http://www.danycuks.com'>categorie3</a></li>
</ul>
</li>
</ul>
</div>
</center>

Adresu môjho blogu prepíšete svojou a s jednotlivými odkazmi, kde chcete aby vás po kliknutí presmerovalo. Tam kde je "home, about, contact, categories 1, 2, 3" prepíšete na to, čo chcete aby sa zobrazilo na vašom blogu.

3.) Tretí krok je, že pôjdete do Šablóna - Prispôsobiť - Rozšírené - Pridať CSS a vložíte tam toto a uložíte:

}

/*-------- Zaciatok menu -------*/

menudiv {
margin: auto;
}

#menubar {
    background: transparent;
    width: 100%;
    color: transparent;
        margin-left: 0 auto;
margin-right: 0 auto;
        float: center;
padding: 0 10px 0 15px; /* velkost medzi menu a prispevkami */
        position: center;
        border-top:0px solid transparent;
        height:35px;
    display: inline-block;
}

#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:0px solid #666666; /* oramovanie jednotlivych dielov menu */
        border-right:0px solid #666666;
        height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #666666;
    display: inline-block;
   font:normal px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

#menus li a:hover, #menus li a:active {
    background: transparent; /* pri ukazani pozadie */
    color: #666; /* pri ukazani farba pisma menu */
    display: inline-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: 100%px;
}

#menus li ul ul {
    margin: -25px 0 0 160px;
}

#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: #fff; /* farba pozadia categorie 123 */
    width: 120px;
    color: #666666;
    display: inline-block;
    font: normal 12.9px PT Sans Narrow, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0 ; /* pismo categorie 123 */
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:0px solid #fff;
}

#menus li li a:hover, #menusli li a:active {
    background: #F5F5F0; /* farba ukazania pri categorie 123 */
    color: #666;
    display: inline-block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

/*-------- Koniec menu -------*/

#menus {
  margin: right;
  padding: 9px 120px 10px 359px; /* posledne cislo je posuvanie do stran */
}

Pri jednotlivých kódoch som napísala aj čo ktoré znamená. Nájdete ich zvyčajne na konci riadku v zátvorkách typu: /* text text text */ (Ak by ste však niečo s vaším menu nevedeli spraviť, ozvite sa mi a ja vám pomôžem. )
Ak by ste však nechceli svoje menu na stred - vymažte všetko, čo sa nachádza pod 'Koniec menu'.


Pomohol vám môj návod? Ak áno, potešíte ma komentárom alebo odberom :) 
Dajte mi vedieť, čo si myslíte, aký blogger tip by sa tu mal objaviť nabudúce:)
Krásny večer :)


_______________________________________________________
Sledujte ma aj na: 
Facebooku  |  Instagrame  |  Tumblr  |  Bloglovin  |  G+
Ak máš nejaké otázky, opýtaj sa ma (môžeš aj anonymne):
ask.fm/danycuks
alebo email
danycuks@gmail.com

9 komentárov:

  1. Super tip, az si budu zase hrat nekdy s designem, tak ho treba vyuziji :-)

    OdpovedaťOdstrániť
  2. Jéj, to je super! Ja tiež takto zbieram nejaké tie html kódy a na toto som dlho nevedela prísť.. ďakujem naozaj veľmi pekne! :) Určite využijem!
    Inak, kódy získavaš celkovo na google? Lebo ja som ani na tie čiarky nemohla nájsť. Budem si musieť zase vyčleniť na to čas :)
    Ps: máš super blog :)

    OdpovedaťOdstrániť
  3. Skvelý návod, veľmi pekne ďakujem :) Ešte sa s tým idem trocha pohrať, tak dúfam, že výsledný efekt bude stáť za to.

    OdpovedaťOdstrániť
  4. je to super, ale mne to veľmi nevyšlo. tak som chcela či by si mi s tým pomohla, písala som ti aj na facebook :/ ďakujem

    OdpovedaťOdstrániť
  5. Nedá sa to skopírovať a prepisovať je to ťažko, takže moc mi to nepomohlo :-/

    OdpovedaťOdstrániť
    Odpovede
    1. Ako sa to nedá skopírovať? Ved to je všetko v tých obdlznickoch vpísané...

      Odstrániť
    2. Neviem ako to nešlo skopírovať, ale tak z textového poľa som povyberala to čo tam bolo, a dala to takto zvýraznené žltým.

      Odstrániť
  6. já nemám na rozvržení HTML/javascript

    OdpovedaťOdstrániť
  7. Dlho som si s tým lámala hlavu ako to mám spraviť :-) Ďakujem za návod :-) Cez víkend sa nato musím pozrieť a vyskúšať :-)

    http://suesanqa7.blogspot.cz/

    OdpovedaťOdstrániť

Ďakujem za komentár a prajem krásny deň! :)