Lily of the valley

Lily of the valley

Menu

Blog tips #2: Pages


Vítam vás v dnešnú krásnu slnečnú nedeľu pri pokračovaní blogových tipov. V prvej časti, som vám napísala čo to o celkovom dizajne, či sa už rozhodnete použiť bloggerove nastavenia alebo si stiahnete nejakú šablónu.

Druhým krokom sú pages, ktoré treba nastaviť a na to sú 2 návody:
1. Pokiaľ si chcete vytvoriť stránku ako „about,“ stačí ak pôjdete do položky stránky, kliknete na vytvoriť novú, do nej napíšete čo chcete a uložíte. Potom prejdete do rozloženia v headeri pridáte modul gadget vyberiete si ten so stránkami a zvolíte si, ktoré ste si vytvorili. 

Avšak ak chcete použiť tie, ktoré sa nachádzajú pod nejakou menovkou, kliknite na vašom blogu danú label okopírujete odkaz a tento krát v gadgete so stránkami zvolíte pridať externý odkaz. Do neho prilepíte okopírovanú adresu a nazvete ju napríklad looks.   



2. Druhý spôsob je, asi trošku zložitejší, no pokiaľ chcete mať aj takzvané „submenu,“ je to najjednoduchší spôsob ako si ho spraviť. Submenu je vlastne to, ako máte na blogu stránky a dáte na nich kurzor, zoscrollujú sa vám ďalšie možnosti. Napríklad ho nazvete categories a pod nim si nájdete tipy, recepty atď. Čiže idete opäť do rozloženia v headeri zvolíte modul gadget a tam vyberiete HTML/JAVA SCRIPT, tam skopírujete toto (nemôžem vám to tu dať ako text lebo mi potom zobrazuje toto menu v príspevku :D, čiže iba ako fotku, no môžete si to stiahnuť tuto):



Tam kde je http:// a xxx doplníte vašu adresu blogu s menovkou.  Ďalej prejdete do šablony, ktorú si pred tým zálohujte, stlačte CTRL+F, kde vám vyskočí hľadáčik, do ktorého napíšte: ]]&gtb:skin>; a nad to skopírujte tento kód:

/*——– Zaciatok ——-*/

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; 
        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; 
        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; (pozadie pri ukázaní, mozete zmenit aj na vlastnu)
    color: #666; (farba pisma pri ukazani)
    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; 
    width: 120px;
    color: #666666;
    display: inline-block;
    font: normal 12.9px PT Sans Narrow, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0 ; 
    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; 
    color: #666;
    display: inline-block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

/*——– Koniec ——-*/

#menus {
  margin: right;
  padding: 9px 120px 10px 359px; 
}

Ak to chcete mať na stred vymažte ten koniec. Samozrejme nie je zaručené, že to bude fungovať, keďže ma každý iné prednastavenia šablón, ak s tým budete mať problém, pokojne ma konaktujte na môj mail lianajanek@gmail.com a ja vám s tým rada pomôžem, teda s čímkoľvek ohľadom programovania. Veľa šťastia! 🙂


-xoxo Lily

18 comments

Lu Beres

Boze ja som z tychto veci uplne mimo, chcela by som si vytvorit novy dizajn na stránke…ale ako tak vidim to html…a tieto veci mám z toho nocne mory. To je skvele, ze sa do toho vyznas 🙂 Inak mas velmi pekny blog, nechcela by si sa navzájom sledovat? 🙂

Lily of the valley

Možno to vyzerá tak, že sa v tom vyznám, no veľa krát v tom blúdim a keď som si menila aj svoj dizajn mala som z toho už teplotu!:D Ďakujem krásne:))

bee.

Keď si teraz spomeniem, koľko som sa natrápila, keď som iba začínala s blogovaním a zaumienila som si, že budem mať také submenu 😀 A práve tak sa človek učí 😀
BEELIEVIN

Anonymný

ahoj mna by velmi zaujimalo ako prejst na vlastnu domenu
dakujem ;))

Lily of the valley

Vlastnú dómenu si musíš zakúpiť cez nejakú stránku, ja som si ju kúpila cez active24.sk 🙂

Lily of the valley

No toto čo ja trošku poprogramujem je nič, ty si s tým musela mať 10-krát viac námahy. Ja som v bloggeri nevedela ani na krok 😀

Kateřina Rodová

Super návod. Máš to krásně popsané.
A moc krásný blog! :))
Zvu tebe a tvé čtenářky k sobě na giveaway. 🙂
KattyLife
GIVEAWAY

Dominica

Vždy, keď sa s niečím takýmto trápim, trvá mi to dosť dlho, kým na to nejakým spôsobom prídem. možno to menu skúsim ešte raz urobiť podľa tohto návodu a uvidím, že ako… Ale takéto tipy sú fakt super, je fajn, že ak sa niekto do niečoho vyzná, pomáha ostatným. 🙂
DominicaLand

Lily of the valley

Ďakujem krásne:)

Lily of the valley

Aj ja sa s tým trápim dosť a najhoršie je, že nemám žiadnu trpezlivosť! Ak sa ti to nepodarí určite mi napíš!!! Rada ti pomôžem:)

31 shadesofaubergine

Skvelý článok! Vždy som chcela mať takéto submenu, no nikdy mi to nesedelo, takže hneď idem skúsiť tento tvoj návod! ♥

31shadesofaubergine

Malá Dominika

Pamauju si, ještě pár let dozadu, když jsem se s tím mořila a vůbec, ale vůbec mi to nešlo a hrozně jsem se u toho vztekala 😀 Hlavně protože mi to nešlo zarovnat a střed a já na to vůbec nemohla přijít a v té době nebyl ještě internet plný návodů. Bylo to šílené 😀

Gabrielle Crystal RoseBonniee

Pekný návodík, určite niekomu pomôže ♡

♡ Giveaway ♡

Lily of the valley

Juuuj len dúfam, že ti to vyjde a nebude môj návod ďalším zlým :/ Držím palce!

Lily of the valley

Veru veru, teraz je internet plný všetkého:)

►Nadush

Och, na začiatkoch, keď som začínala s blogovaním, veľmi dobre si pamätám, aké ťažké boli pre mňa tie HTML kódy 😀 Veľmi pomocný článok ! 🙂
my blog : THE COLORFUL THOUGHTS

Sofie futó

To abych si k tomu zase sedla a pustila se do toho! Děkujuuuu

Leave a reply