Zmiana wyglądu stopki bloga i pagera

23.12.2015


Bawiliśmy się w zmiany wyglądu poszczególnych elementów na blogu, dzisiaj przyszedł czas na stopkę bloga i pager bloga, czyli to co jest na samym końcu i rzadko kiedy ktoś się bierze za to, aby coś z tym zrobić. Pokażę jak zmienić stopkę bloga i pager.

Wszystkie zmiany będziemy wprowadzać w projektancie szablonów czyli w miejscu, które jest nam wszystkim dobrze znane i nie powinno być problemów ze zrozumieniem :)

Nasza stopka i pager bloga na początku wygląda tak:



Skoro już wiemy jak się to wszystko prezentuje to zaczniemy od usunięcie niepotrzebnych rzeczy, czyli "Technologia Blogger" i  "Subskrybuj: Posty (Atom)". Do tego będzie nam potrzebny kod:

.Attribution, .feed-links {display: none;}


Jak się już pozbyliśmy niepotrzebnych rzeczy to teraz przejdźmy do pagera. Te kropki za "Strona główna" nie wyglądają ciekawie, a i sam napis jakiś takie mały, więc szybciutko to zmieniamy. Pomoże nam w tym ten oto kod:

#blog-pager {
background: transparent;
font-size: 18px;
text-transform:uppercase;
letter-spacing: 2px;
}


Chyba, że ktoś woli taką wersję: 

#blog-pager {
background: transparent;
font-size: 18px;
letter-spacing: 2px;
}

Mamy jeszcze jedną możliwość, a mianowicie możemy dodać własne tło do pagera bloga

#blog-pager {
background: url(LINK DO OBRAZKA);
font-size: 18px;
text-transform:uppercase;
letter-spacing: 2px;
}



Skoro już skończyliśmy z pagerem to przechodzimy do stopki. Jak widzicie w szablonie Simple jest przerywana linia. Wiem, że może ona komuś nie pasować, dlatego pokażę Wam jak się jej pozbyć lub zmienić jej wygląd. Zaczniemy od kodu, który będzie bez linii. 

.footer-outer {
border-top: transparent;
}



No to teraz kod na zmianę wyglądu linii

.footer-outer {
border-top:3px solid #bb2188;
}



.footer-outer {
border-top:3px dotted #bb2188;
}


.footer-outer {
border-top:3px double #bb2188;
}


Możemy do naszej stopki dodać tło 

.footer-outer {
background: url(http://i1291.photobucket.com/albums/b555/parma9/pa_zpswu2u1avk.png);
border-top: 1px solid transparent;
}


Wszystkie kody można używać również w innych szablonach. 

13 komentarzy:

  1. Ja marze o tym zeby ktos sie profesjonalnie zajal wygladem mojego bloga :P

    OdpowiedzUsuń
  2. A ja marzę, by rozbudować wreszcie rozsuwane Menu :C Najbardziej podoba mi się takie, gdzie po lewej pokazują podkategorie, a po prawej 3-4 miniaturki postów. Nie wiem nawet jak tego w google szukać! :)

    OdpowiedzUsuń
  3. Z tego co kojarzę jest taka instrukcja w wersji angielskiej, jeszcze nie zdążyłam jej rozgryźć, ale jak chcesz mogę link podesłać ;)

    OdpowiedzUsuń
  4. Od dawna chciałam pozbyć się napisu Technologia Bloger i Subskrybuj: Posty Atom. Dzięki, że pomogłaś!

    OdpowiedzUsuń
  5. Byłabym wdzięczna! :) Może coś wykombinuję przez ten świąteczny czas :)

    OdpowiedzUsuń
  6. Proszę http://helplogger.blogspot.com/2015/07/blogger-mega-menu-with-images-or-thumbnails.html :)

    OdpowiedzUsuń
  7. Bardzo dziękuję :)

    PS. Bardzo ładne zdjęcie w prawej kolumnie :)

    OdpowiedzUsuń
  8. Świetny post, przyda się na pewno! Pozdrawiam! :)

    OdpowiedzUsuń
  9. Jak miło zobaczyć mój graficzny kreator scen w użyciu :) Świetna kompozycja!

    OdpowiedzUsuń
  10. Nie ukrywam, że bardzo się przydał - ratunek wielki, bo niestety mój komputer (emeryt) nie podołał przy ilustratorze, a grafiki były mi potrzebne na gwałt! :D

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez Blonparia