Tutoriál (4) - jak na rolovací menu (stránky)

Ahoj,
v dnešním tutoriálu se podíváme na menu se stránkami. Všechny kódy najdete zde ve článku i s menším vysvětlením, ale doporučuji stejně shlédnout video :D Doufám, že se Vám to podaří :)

V html kódech blogu si najdete slovo <header>. Asi po 11 řádcích je to ukončené slovem </b:section> - POD toto slovo umístíte následující kód:

<!-- Začiatok - Navigačné Menu  -->
<nav>
                  <ul>
                    <li>
                      <a expr:href='data:blog.homepageUrl'>
                        Home
                      </a>
                    </li>
                    <li>
                      <a class='sf-with-ul' href='#'>
                        Menu 1
                        <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje2itYsQ7I-XH_al3vg_UWxoctFSU6xoDevGpzltxbIZW9Y6xkHa5nBuV0RByxOYqTbzssGFpwLlKXiFgXeC2zz3bT0hPdc7tgNUh5apOfEiWhYducZgA_W8eU5ml2QbCOPlqSjS8j-2ul/s5/menu_down.gif' style='position: absolute; top: 18px; right: 8px;'/>
                      </a>
                      <ul>
                        <li>
                          <a href='ZDE bude adresa (odkaz)'>
                            1. podkategorie
                          </a>
                        </li>
                        <li>
                          <a href='ZDE bude adresa (odkaz)'>

                            2. podkategorie
                          </a>
                        </li>
                        <li>
                          <a href='ZDE bude adresa (odkaz)'>

                           3. podkategória
                          </a>
                        </li>
                        <li>
                          <a href='ZDE bude adresa (odkaz)'>

                            4. podkategorie
                          </a>
                        </li>
                     
                      </ul>
                    </li>
                    <li>
                      <a href='ZDE bude adresa (odkaz)'>

                        Menu 2
                      </a>
                    </li>
                    <li>
                     <a href='ZDE bude adresa (odkaz)'>

                        Menu 3
                      </a>
                    </li>
                  </ul>
</nav>

      <!-- Koniec - Navigačné Menu  -->

Místo slov ZDE bude adresa (odkaz) vložíte odkaz, kam se chcete po kliknutí dostat. Nevím jestli jsem to ve videu dostatečně vysvětlila, ale musíte si nastavit, že nechcete zobrazovat stránky (nebudete je mít v horní liště ani z boku). Ty stránky pořád budou existovat, jen se nebudou zobrazovat v té liště. Zkopírujete si jen adresu té stránky a vložíte jí sem. Slova "podkategorie a menu" nahraďte svými názvy, podle toho, jak chcete aby se stránky jmenovali.

Když popojedete kousek nad předtím vyhledané slovo header, tak tam najdete slovo <b:skin>, vedle kterého najdete takovou šipku (vše vysvětlené ve videu). Tu rozkliknete a objeví se Vám tam spousta modrého textu. Pojedete až na konec toho textu, který je zakončen slovem        ]]></b:skin>. NAD toto slovo umístíte následující kód:

/* Css pre navigačné menu
-------------------------------*/

nav {
position: relative;
background-color:#000; /* BARVA Lišty*/
width: 980px; /* nastavení šírky */
display: inline-block;
padding: 0 19px;
margin-top: -15px;
clear: both;
line-height: 1em;
}

nav ul {
list-style: none;
}

nav a {
display: block;
padding: 14px;
color: #fff; /* BARVA PÍSMA */
}

nav a:hover {
text-decoration: underline;
color: #fff; /* BARVA PÍSMA */
}

nav ul ul a {
display: block;
padding: 14px;
position: relative;
}

nav li {
float: left;
position: relative;
z-index: 100;
}

nav ul ul {
position: absolute;
z-index: 120;
width: 200px;
background: #000; /* černá barva "rolovací lišty"*/
display: none;
z-index: 200;
}

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
color:#fff; /* BARVA PÍSMA */
}

nav ul {
color: #fff; /* BARVA PÍSMA */
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}

nav ul:after {
content: ""; clear: both; display: block;
}

nav a:link {
text-decoration:none;
color: #fff; /* BARVA PÍSMA */
}

nav a:visited {
text-decoration:none;
color: #fff; /* BARVA PÍSMA */
}

nav a:hover {
text-decoration:underline;

Místo barev, které jsou uvedené před slovy /* BARVA PÍSMA */ si můžete sami zvolit barvu. Na stránce http://www.colourlovers.com/palettes můžete najít kódy barev. Kód vložíte za dvojitý křížek. Můžete si taky nastavit šířku, podle toho jak máte blok široký. Potom nezapomeňte úpravy uložit a máte to :D 

Tutoriál (3): Jak vytvořit link na inLinkz.com

Ahoj,
tak dneska Vás potrápím s dalším tutoriálem, který se týká výroby linku na blog přes stránku inLinkz.com. Doufám, že někomu z Vás pomůže ;) 

Tutoriál (2): Design blogu - záhlaví + pozadí

Ahoj,
v minulém video tutoriálu jsme se podívali na vytváření blogu. Dnes jsem znovu natočila video o designu blogu, ve kterém se podíváme na záhlaví (nadpis blogu) a pozadí. Někdo se mě ptal, zda bych natočila video jen o programu Gimp. Samozřejmě, určitě Vám moc ráda vyhovím, jen trpělivost prosím. Do konce tohoto týdne, bych to ale chtěla stihnout :D Jako vždy můžete psát pokud by jste cokoliv nechápali, nebo potřebovali s něčím pomoc pište. Popřípadě, že by jste chtěli pomoc se svým blogem obraťte se na mě přes email, nebo pokud to chcete probrat, tak na fb, kde si mě můžete přidat do přátel :D
Program Gimp si můžete stáhnout zde.

Tutoriál pro blogovací začátečníky

Ahoj, 
před pár týdny mi napsala slečna, která chtěla poradit s blogem a designem. To mě trklo a já si řekla, že bych mohla natočit video. Bohužel můj počítač nespolupracoval, proto jsem se vrátila ke kameře a nahrávala obrazovku na foťák. Tímto se tedy omlouvám za nižší kvalitu videa. Videa jsou tu dvě.
První video je pro začátečníky. Je tam podrobný návod jak založit blog a popsané základní funkce a úpravy. 
Druhé video je o slibovaném designu blogu. Design blogu je dost individuální záležitost, proto kdyby jste chtěli nějak poradit, nebo pomoci můžete psát i na email a já Vám moc ráda pomohu. Nebo pokud jsem něco ve videu zapomněla zmínit - napište mi a já natočím video dle vašeho přání. Ať už přes nějaké tutoriály např. s videi, nebo blogem, nebo i jinými programy :D

Zde jsou odkazy na zmiňované stránky:

• http://shabbyblogs.com/ - zde najdete nějaké pozadí na blog, jak se instalují ukazuji ve druhém videu.

• http://silvidesign.blogspot.cz/ - tutoriály pro změnu designu a ulehčení blogu 

• http://www.dafont.com/ - velký výběr fontů (písma) ke stažení, jak se instalují ukazuji v druhém videu

• http://www.picmonkey.com/ a http://pixlr.com/express/ - onlne editory na úpravu fotek

• http://www.colourlovers.com/ - stránka s výběrem paletek barev a taky šablon - ukazuji v druhém videu

• http://www.allblogtools.com/, http://btemplates.com/, http://www.raytemplates.com/ - stránky se šablonami ke stažení, jak se instalují se dozvíte v druhém videu :D

První video jsem musela rozpůlit na dvě části jelikož blogger nechtěl dlouhé video načíst.

1. video, kde se zaměříme na zakládání blogu a jeho základních funkcí a úprav

P.S. Doufám, že někomu videa pomohou a vy nezapomeňte napsat pokud by jste s něčím potřebovali pomoc.