tutoriale, szablony, web design

Pytania - Jeśli macie jakieś pytania lub uwagi, to zapraszam na nasz profil ask.fm. Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować. Propozycje - Jeśli masz pomysł na ciekawą instrukcje, która mogłaby pomóc lub zainspirować wielu blogerów, daj nam znać! Z chęcią pomożemy! Propozycje możesz zostawić tutaj: Propozycje Pomoc - Gdyby ktoś desperacko szukał pomocy i wszystkie instrukcje go zawiodły, to jest e-mail tyler (bizarre1309@gmail.com ) i tam można pisać, mardzić na bloggera i resztę świata, no i ogólnie to też szukać pomocy. #idontjudge

wtorek, 14 maja 2013

Klasyczne menu - position:absolute

   Klasyczne czy nieklasyczne, chodzi o menu ponad wszystkim innym co się znajduje na blogu. Jednak nie będziemy używać kart, zrobimy to troszkę inaczej. Czy prościej? No cóż, nie wiem, ale ja inaczej już chyba nie umiem. 

Niestety uprzedzam, że nie obędzie się bez krótkich odwiedzin w naszej Edycji kodu HTML. Ale nie ma co trząść portkami, tylko zebrać się w sobie i stawić czoła wyzwaniu.


Pierwsze co musimy wiedzieć to uświadomić sobie mniej więcej co chcemy zrobić, jak to ma wyglądać, co i gdzie ma być. Druga bardzo ważną rzeczą jest szerokodostępny i znany przez wszystkich div style. Trzeba go wkuć i polubić, bo jest on naszym ogromnym zwierzchnikiem w robieniu szablonów.

<DIV> 
Użyj tego znacznika aby zgrupować elementy blokowe w celu ich sformatowania za pomocą arkusza stylów CSS.
http://www.poradnik-webmastera.com/ 
Jak widać sam znaczek jest już częścią HTML'a, ale wszystko oprócz niego to nic innego jak przez wszystkich znany i lubiany CSS.

W tym przypadku skorzystamy z dwóch atrybutów tego znacznika, pierwszy - czyli div style posłuży nam do zrobienia podstawy menu, a drugi - div class będzie odpowiadać za linki, które pojawią się w menu.
***
Dzisiaj zrobimy menu, które nie łazi za nami i nie plącze się na górze ciągle, i zwyczajnie nie truje nam naszych czterech liter przez cały czas spędzony na blogu.

Wchodzimy w szablon i edycje kodu HTML. Następnie szukamy w kodzie albo </head> lub <body> Wszystko umieszczone po tych znacznikach odpowiada za to co znajduje się bezpośrednio na blogu i to właśnie tam umieścimy nasz kod. Znajdujemy sobie dogodne miejsce, które nie będzie niczemu przeszkadzać, najlepiej jednak dać enter tuż po <body>.

Pierwszy sposób jest ciut mniej elegancki, ale według mnie równie dobry i skuteczny. Różni się jedną malutką rzeczą. 

Wklejcie tam ten kod:
<div style="background:#000;color:#fff;opacity:0.9;position:absolute;top:0px;left:0px;z-index:2;
;width:100%;height:45px; text-align:center;">
  1. Background: czyli kolor tła
  2. Color: kolor czcionki
  3. *Opacity: przezroczystość
  4. Position: absolute - czyli pozycjonowanie absolutne, ustalamy pozycje "naszego tła dodając top i left, czyli odległość od górnej i lewej granicy. W tym przypadku menu zawsze będzie przylepione do swojego miejsca.
  5. Z-index: Jest to bardzo, bardzo potrzebna rzecz. W przypadku braku tej cechy, zwyczajnie menu schowa się pod całym blogiem, oczywiście tylko w przenośni. Jednak może to skutkować "niemocą" w naciskaniu linków.
  6. Width: długość menu, w tym przypadku musi być to 100%
  7. Height: jak komu podpasuje. Użycie opcjonalne.
  8. Text-align: ustawi nasze linki na środku, przez co oszczędzi nam niekiedy niepotrzebnej roboty. 
Jeśli wpisaliśmy height w takim razie powinien już naszym oczom ukazać się paseczek, czyli tło. Jeśli jednak pominęliśmy height w takim razie na paseczek trzeba czekać do czasu, gdy pojawią się tam linki, które właśnie będziemy dodawać. 

W tym celu tworzymy dowolną klasę, ja moją nazwę menu i dodajemy ją do naszego kodu CSS. 
.menu {font-family: 'Fjalla One';font-size: 25px;text-transform: uppercase;margin-right: 14px;padding: 7px;padding-bottom: 0px; overflow: hidden;-webkit-transition-duration: 1s;-moz-transition-duration: 1s;-o-transition-duration: 1s;-ms-transition-duration: 1s;}
Możemy także dodać hover:
.menu:hover {border-bottom: 7px solid #222; background: #FF9090; } 
Oczywiście w tym przypadku od Was zależy jak będą wyglądać Wasze linki, to jest tylko moja mała propozycja.
Może zauważyliście brak cechy color. Z moich obserwacji wynika, że co nie wpiszemy to i tak kolor będzie odpowiadać zwykłym linkom na blogu. 

Tymczasem, trzeba dalej robić menu, nie?

<a href="/" class="menu">Home</a>
<a href="http://graphical-thoughts.blogspot.com/p/friends.html" class="menu">Affiliates</a>
<a href="http://graphical-thoughts.blogspot.com/p/dla-ciekawskich.html" class="menu">Pomocne</a>
<a href="http://upiorogacek.blogspot.com/" class="menu">Upiorogacek</a>
<a href="http://www.blogger.com/follow-blog.g?blogID=1963577186215401607" class="menu">Follow +</a></div>

Ten kod dodajemy tuż po wpisanym  div style, co nam zagwarantuje, że linki pojawią się właśnie na utworzonym przez nas tle.
Oczywiście zaznaczam, że i linki i adresy pochodzą z menu z mojego bloga, jednak oczywiście każdy wedle uznania powinien to zmienić. ;>
Dla tych co przegapili lub nie do końca zrozumieli: Pełny kod  powinien wyglądać mniej więcej tak.

To był ten ciut mniej elegancki sposób. Drugi sposób opiera się dużo bardziej na CSS'ie przez co może być łatwiejszy. 



Tworzymy klasę na nasze tło, powiedzmy niech będzie to bg.

.bg {position: absolute;background: #222;width: 100%;height:30px;text-align: center;left: 0px;

top: 0px;z-index: 1000;}
Różne rzeczy możecie powymyślać, zostawiam to Waszej wyobraźni.
Z tego co pamiętam stworzyliśmy już kody dla linków. Jeśli nie, to dodajemy je do naszych kodów.
.menu {font-family: 'Fjalla One';font-size: 25px;text-transform: uppercase;margin-right: 14px;padding: 7px;padding-bottom: 0px; overflow: hidden;-webkit-transition-duration: 1s;-moz-transition-duration: 1s;-o-transition-duration: 1s;-ms-transition-duration: 1s;}
.menu:hover {border-bottom: 7px solid #222; background: #FF9090; }  
Skoro wszystkie formalności już wprowadziliśmy, pozostaje nam tylko dodać je w żywej postaci na bloga, a robimy to ponownie wchodząc w Edycje kodu HTML. Znajdujemy <body> i tuż po nim wpisujemy kod:
<div class="bg"> <a href="/" class="menu">Home</a>
<a href="http://graphical-thoughts.blogspot.com/p/friends.html" class="menu">Affiliates</a>
<a href="http://graphical-thoughts.blogspot.com/p/dla-ciekawskich.html" class="menu">Pomocne</a>
<a href="http://upiorogacek.blogspot.com/" class="menu">Upiorogacek</a>
<a href="http://www.blogger.com/follow-blog.g?blogID=1963577186215401607" class="menu">Follow +</a>
</div>
Taddaaaa. No cóż, nie umiem stwierdzić, który sposób bardziej Wam przypadnie do gustu. Wybór należy tylko i wyłącznie do Was.
W kolejnym poście puścimy w ruch nasze menu, czyli sprawimy, że będzie śledzić nasz każdy krok na blogu, a także dodamy do niego obrazek.  


A tymczasem jeśli macie jakieś pomysły czy propozycje na posty piszcie śmiało albo w komentarzach albo w tagboardzie. Spróbujemy coś wykombinować na przyszłość. 




6 komentarzy:

  1. Ok rozumiem:)Ale postaram się często odwiedzać Twojego bloga:)Lubię poznawać nowe funkcje na blogspocie,kody itp.Zastanawia mnie jeszcze czy da się pomniejszyć albo zmienić czcionki w napisach "starszy post" i "nowy post"?

    OdpowiedzUsuń
  2. Aha,mogę dodać Twojego bloga do Elity? :)Pozdrawiam.

    OdpowiedzUsuń
  3. Już Cię dodałam do Ulubionych :)

    OdpowiedzUsuń
  4. Nie, nic nie musisz robić! I nie przepraszaj, to raczej ja powinnam rozpocząć tutaj litanię dziękczynną za to, że udostępniasz instrukcje i szablony :D Dziękuję [...]~~
    Użyłam twojej innej pracy i jestem bardzo zadowolona, bo rzadko można spotkać tak uroczy w swojej prostocie szablon w polskiej blogsferze.
    Także tego, pozdrawiam,
    witte.


    PS Gdybyś kiedyś chciała zrobić jakiś szablon z "chojrakiem" to ja bardzo chętnie... Wiesz.

    OdpowiedzUsuń
  5. bardzo ładna instrukcja, próbowałam z nią ale jakoś nie umiem ogarnąć tych kodów z menu .. : c // irishpinkrose

    OdpowiedzUsuń
    Odpowiedzi
    1. A czego konkretnie nie ogarniasz? :)

      Usuń