sobota, 20 czerwca 2015

Jak przenieść pasek stron na górę?

Jak przenieść pasek stron 
na górę bloga?

Witam! Dziś przedstawię wam bardzo prosty sposób, na przeniesienie paska stron tak, żeby znajdował się na samej górze naszego bloga. Od razu uprzedzam, że to żadna filozofia. Wystarczy wkleić w arkusz css jeden kod i gotowe!



Zaczynamy od wklejenia poniższego kodu w okienko z arkuszem css.

Szablon – dostosuj – zaawansowane – dodaj arkusz css


.tabs-outer {
overflow: hidden;
position: relative;
background-color: #00ccff
none repeat scroll 0 0;
width: 100%;
height:35px
margin-left: auto;
margin-right: auto
position: fixed; z-index: 1; top: 0px;
}
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .4em 2.8em;
font: normal 16px Century Gothic, Tahoma, Helvetica, FreeSans, sans-serif; 
color: #000000
height: 22px;
line-height: 22px
}
.tabs-inner .widget li:last-child a {
border-right: 1px solid transparent;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: transparent none repeat-x scroll 0 -100px;
color: #fbfbfb
}

Kolorową czcionką zaznaczyłam wartości które możecie zmieniać, tak by dostosować pasek stron wedle waszych upodobań. Przyznam, że jest z tym troszkę zabawy, ale dzięki temu stworzycie coś swojego! : )
Przedstawiam wam więc wyjaśnienie zaznaczonych literek i cyferek.

background-color: #00ccff; - kolor tła paska (strona z kolorami rgb klik)
                 height:35px; - wysokość paska
                 margin-left: auto; - lewy margines (aby zmienić wpisujemy ilość px
                 margin-right: auto; - prawy margine (tutaj tak samo jak wyżej)
                 position: fixed; z-index: 1; top: 0px; - odstęp między górną częścią bloga)
                 padding: .4em 2.8em; - odstępy między nazwami stron i ich ułożnie
                 font: normal 16px Century Gothic, Tahoma, Helvetica, FreeSans, sans-serif; - rozmiar i styl czcionki
                 color: #000000; - kolor tekstu
                 line-height: 22px; - wysokość tekstu
                 color: #fbfbfb; - kolor napisu odwiedzonej strony

Mam nadzieję, że pomogłam wam sprostać temu zadaniu. W komentarzach dajcie koniecznie znać, czy udało wam się uzyskać efekt końcowy! Jak pasek prezentuje się u mnie?



19 komentarzy:

  1. Cenna rada :)
    Co powiesz na obserwację za obserwację :) ?
    http://pineapple3443.blogspot.com/

    OdpowiedzUsuń
  2. Bardzo,ale to bardzo prxydatny post. Na pewno zrobie to u sb na blogu 👍👍

    OdpowiedzUsuń
  3. Wow! Przydatny poradnik, nie wiedziałem że można mieć ten pasek na samej górze :O
    Jednak ja nie używam takiego paska na swoim blogu :P
    (Obserwuje ! jeśli mój blog ci się spodoba zapraszam do obserwacji :D)
    http://niebioeski.blogspot.com/

    OdpowiedzUsuń
  4. ja nic nie umiem zrobić w kwestii wyglądu bloga więc zazdroszczę :)

    http://jzabawa11.blogspot.com/

    OdpowiedzUsuń
  5. Świetna instrukcja!
    pozdrawiam

    OdpowiedzUsuń
  6. Przydatny poradnik :D

    rilseee.blogspot.com

    OdpowiedzUsuń
  7. Informacje na pewno dla wielu przydatne
    Pozdrawiam,Madda
    Blog Maddy -> klik

    OdpowiedzUsuń
  8. Mam w planach zrobienie czegoś takiego, poradnik bardzo mi się przydał :)

    OdpowiedzUsuń
  9. pomocna instrukcja :) chętnie zaobserwujemy :)

    Zapraszamy do nas: http://double-dreamers.blogspot.com/2015/06/wait-for-holiday.html

    OdpowiedzUsuń
  10. Wpisujcie swoje blogi w naszym blogbooku! :)
    http://ddobinsta.com/

    OdpowiedzUsuń
  11. Bardzo przydatny post! :D
    Świetnie wszystko wytłumaczone.
    https://everything-by-me.blogspot.com

    OdpowiedzUsuń
  12. Przydatne,rzeczywiście u góry wygląda super ! ;)
    mycrazyworldpaula.blogspot.com

    OdpowiedzUsuń
  13. Świetny post :) Przyda się mnóstwo blogerkom :D
    Zapraszam do mnie: Mój blog-klik!

    OdpowiedzUsuń
  14. Witaj! Po pierwsze bardzo dziękuję za miły komentarz :*** Po drugie - cudowny blog, jestem zaskoczona profesjonalizmem !!!! Brawo :) po trzecie mam pytanko, bo widzę, ze jestes bardzo zorientowana :) Czy wiesz może jak ustawić zdjęcia tak, aby były wszystkie równo i większe niz te co mam u siebie? :( gdy ustawiam oryginalny rozmiar to zdjęcia sa ogromne i zachodzą na boczny pasek., cz to mozna jakos zmienic? Bardzo byłabym Ci wdzięczna za pomoc :****

    Pozdrawiam
    Asia
    http://missmoonlight-pl.blogspot.com

    OdpowiedzUsuń
  15. Witaj Paulinko!!!
    Chciałam Ci serdecznie podziękować za pomoc jaką mi okazałas w sprawie rozmiaru zdjęć!!!! Kochana, wcześniej korzystałam z programu Picassa, lecz polecony przez Ciebie - Photoscape okazał się tym, czego mi było trzeba :)))) Oczywiście poradziłam sobie z ustawieniami :**** Jak będziesz miała czas i ochotę to zajrzyj i oceń sama czy jest poprawa :)))) Jestem Ci szalenie wdzięczna za Twoje dobre serduszko i jeśli tylko kiedykolwiek w jakikolwiek sposób będę mogła się odwdzięczyć - to wiesz, gdzie mnie szukać <3 <3 <3
    Raz jeszcze ogromne podziękowania i zyczę miłego tygodnia !!!!!

    Buziaki
    Asia
    http://missmoonlight-pl.blogspot.com

    OdpowiedzUsuń
  16. Niestety jak tak robie to strony razem z etykietamu mi idą do góry chciałabym aby tylko strony były na górze a etykiety zostały na swoim miejscu niestety tak sie nie dzieje proszę o pomoc

    OdpowiedzUsuń