Zrób ze mną szablon na bloga

31.05.2015


No dobra to trochę za dużo powiedziane, bo od podstaw nie będziemy robić szablonu a modyfikować za pomocą kodów jeden z szablonów Bloggera, a mianowicie szablon Prosty czyli inaczej szablon Simple. Jest to bardzo wdzięczny szablon i najlepiej się na nim pracuje. Mój blog również jest na podstawie tego szablonu, zresztą jak wszystkie inne szablony, które modyfikuje. Postaram się wam pokazać coś sensownego, przejrzystego, uporządkowanego. Zrobię dwie wersje, więc będziecie mieli wybór.

Szablon pierwszy

1. Szablon - dostosuj.





2. Wybieramy szablon prosty - pozycja 2.


3. Ustawiamy układ i rozmiar bloga tak jak na zdjęciu poniżej:



4. Przechodzimy do zaawansowane i wybieramy tekst strony - Verdana -  wpisujemy 13px - kolor tekstu wpisujemy #614c41


4a. Przechodzimy do "Tło" i wstawiamy tło, które znajdziecie TUTAJ. Po wgraniu klikamy "gotowe"


4b. Wybieramy "wyrównanie" i odznaczamy "przewijaj wraz ze stroną" 


5. Klikamy w zaawansowane - dodaj arkusz CSS

Będziemy brać w obramowanie naszą część bloga z nagłówkiem, wpisami oraz kolumną boczną i stopką tak jak jest to u mnie. W tym celu użyjemy kodu:
.content-inner {border-style: solid; border-width: 4px; color: #614c41;}
Następnie usuniemy ramki i cienie ze zdjęć we wpisach oraz kolumny bocznej w tym celu użyjemy kodu:
.post-body img {border: 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 0px !important;
background: none !important;
}
.column-right-inner img {border: 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 0px !important;
background: none !important;
}

Wyśrodkowanie daty i tytułu wpisu
h2.date-header {text-align: center;}
h3.post-title {text-align: center;}

Karty/strony bloga. Przechodzimy do tekst kart i ustawiamy na Verdana czcionka na 14px i kolor tekstu ustawiamy na #614c41, a kolor po zaznaczeniu ustawiamy na #ddac86. Wracamy do arkusza CSS i wpisujemy kod na sławne linie, które stanowią obramowanie naszych stron i o które mam najwięcej pytań w skrzynce mailowej. To są te same linie, które widnieją u mnie na blogu.
.tabs-outer {border-bottom: solid #614c41;
border-top: solid #614c41;
border-width: 2px;
padding: 5px;}
oraz wpisujemy kod na wyśrodkowanie kart
#PageList1 ul {text-align: center;}
#PageList1 ul li {float: none; display: inline;}

Następnie zajmiemy się tytułami gadżetów. Już był wpis o tym jak można je zmienić za pomocą CSS i z tego samego kodu będziemy korzystać. Dopasujemy tytuły gadżetów do stylu kart.
.sidebar .widget h2 {
padding:5px;
color: #ddac86;
text-align:center;
font-family: Verdana;
text-transform:uppercase;
letter-spacing: 2px;
font-size:13px;
border-bottom: solid #614c41;
border-top: solid #614c41;
border-width: 1px;
}

Starsze/nowsze posty i strona główna czyli pager bloga. Zaczniemy od usuwania tych kropek, które widnieją w tym szablonie pod starsze/nowsze posty i strona główna oraz ustalimy wielkość i czcionkę.
.blog-pager {background: transparent;
font-family:Verdana;
font-size: 20px;}

Usuwanie Technologia Blogger i Subskrybuj: Posty (Atom)
.Attribution {  display:none; }
.feed-links { display:none !important; }

Zmiana stopki bloga i separatora. Na dole bloga przy jego stopce mamy separator kreskowany ten kod pozwoli na zmianę jego wyglądu oraz koloru i ustali nam czcionkę oraz jej wielkość dla gadżetów w stopce.
.footer-outer {
font: 12px Verdana;
letter-spacing: 2px;
border-top: #614c41 solid;
border-width: 1px;
}

Wyjustowanie tekstu. Wyjustowanie tekstu we wpisie. Justowanie zdecydowanie lepiej się prezentuje niż np. wyśrodkowanie.
.column-center-inner {text-align: justify;}

Styl dla cytatu we wpisie
blockquote {
border:1px solid #614c41;
position:relative;
font-size:90%;
padding:25px;
}
blockquote:before {
top:0;
left:0;
position: absolute;
content: "";
width: 0;
height: 0;
border-left: 70px solid #614c41;
border-bottom: 30px solid transparent;
}
blockquote:after {
position:absolute;
right:0;
bottom:0;
content: "";
width: 0;
height: 0;
border-right: 70px solid #614c41;
border-top: 30px solid transparent;
font-size: 0;
}

Styl dla stopki wpisu
.post-footer {text-align: center;
font: 13px Verdana;
text-transform:uppercase;
background: #eee;}

Styl dla rubryki "O mnie". O tym jak spersonalizować gadżet "O mnie" już pisałam.  Mam ją zrobioną w gadżecie tekst, więc kod będzie taki:
#Text1 {text-align: center;}

Wyśrodkowanie nagłówka
.header-inner .widget div, .header-inner img {
margin-left:auto;
margin-right:auto;
}

Margines dolny nagłówka
#Header1 {margin: 0px 0 20px 0;} 
Kolory dla linków oraz tekstu w tym  szablonie:

#614c41 #ddac86 

Nagłówek do tego szablonu do pobrania TUTAJ 
Cały szablon prezentuje się tak:

Szablon drugi

Punkt 1,2 i 3 jest taki sam jak przy szablonie pierwszym.

4. Przechodzimy do zaawansowane i wybieramy tekst strony - Verdana -  wpisujemy 13px - kolor tekstu wpisujemy #000000

5. Klikamy w zaawansowane - dodaj arkusz CSS

Usuwanie ramek i cieni ze zdjęć we wpisie i kolumnie bocznej
.post-body img {border: 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 0px !important;
background: none !important;
}
.column-right-inner img {border: 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 0px !important;
background: none !important;
}

Stopka wpisu
.post-footer {text-align: center;
font: 13px Verdana;
text-transform:uppercase;
background: #eee;}

Starsze/nowsze posty i strona główna czyli pager bloga.
.blog-pager {background: transparent;
font-family:Verdana;
font-size: 20px;}

Usuwanie Technologia Blogger i Subskrybuj: Posty (Atom)
.Attribution {  display:none; }
.feed-links { display:none !important; }

Stopka bloga
.footer-outer {
font: 12px Verdana;
letter-spacing: 2px;
border-top: #eee solid;
border-width: 1px;
}

Wyśrodkowanie daty i tytułu wpisu
h2.date-header {text-align: center;}
h3.post-title {text-align: center;}

Styl dla tytułów gadżetów
.sidebar .widget h2 {
padding:5px;
color: #000;
text-align:center;
font-family: Verdana;
text-transform:uppercase;
letter-spacing: 3px;
font-size:13px;
}

Rubryka "O mnie" zrobiona w gadżecie tekst - jak spersonalizować taką rubrykę dowiecie się TUTAJ
#Text1 {text-align: center;}

Styl dla kolumny bocznej
.column-right-inner {border-style: solid;
border-color: #eee;
border-width: 14px;
}

Wyśrodkowanie kart/stron
#PageList1 ul {text-align: center;}
#PageList1 ul li {float: none; display: inline;}

Strony na górze bloga
.tabs-outer{
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:10;
border-bottom:1px solid #eee;
background: #fff;
}
.tabs-inner, .tabs-inner > .section{
padding: 0 !important;
margin: 0 !important;
}
.tabs-inner .widget ul {
text-align:center;
padding-bottom: 13px;
padding-top:11px;
margin: 0 auto;
}
.tabs-inner .widget li  {
float:none;
display:inline-block;
zoom:1;
}
.tabs-inner .widget li:after{
content: "|";
color: #eee;
}
.tabs-inner .widget li:last-child:after{
content: "";
}
.tabs-inner .widget li a {
display: inline-block;
padding: .2em 4em;
font: 11px Verdana;
color: #999;
text-transform: uppercase;
letter-spacing: 3px;
}
.rmm.minimal .rmm-toggled-title{
text-transform: uppercase;
letter-spacing: 3px;
font: 11px Verdana;
color: #999;
font-weight:bolder;
}
.tabs-inner .widget li:first-child a {
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #444;
background-color: transparent;
text-decoration: none;
}

Wyśrodkowanie nagłówka
.header-inner .widget div, .header-inner img {
margin-left:auto;
margin-right:auto;
}

Styl dla cytatów
.post blockquote {
 border-left:10px solid #444;padding-left:20px; background: #eee; padding: 10px;}
Wyjustowanie tekstu
.column-center-inner {text-align: justify;}
Kolory dla linków w tym szablonie
#444444 #666666 #999999

Nagłówek do pobrania TUTAJ
Cały szablon prezentuje się tak:



22 komentarze:

  1. Na razie nie planujemy zmiany szablonu ale jak będziemy wprowadzać jakieś zmiany to musimy przypomnieć sobie o Twoim blogu! :)

    OdpowiedzUsuń
  2. Ależ świetna rozpiska, na pewno się komuś przyda, komuś, kto nie miał tyle szczęścia jak ja, żeby móc w tym względzie liczyć na Ciebie:P A co do przepisów - szkoda, że nie możesz wypróbować większości, z tego co pamiętam, to jesteś uczulona na czekoladę? Ja na szczęście nie jestem alergikiem, ale współczuję alergii, na pewno musi czasem uprzykrzać życie:( Mam nadzieję, że będę częściej trafiać w Twoje upodobania, pozdrawiam:))

    OdpowiedzUsuń
    Odpowiedzi
    1. Tak, dobrze pamiętasz - jestem uczulona na czekoladę, ale po ostatnich badaniach wyniki były jeszcze gorsze i muszę być na specjalnej diecie - niestety ;(

      Usuń
  3. Świetny i przydatny wpis :)
    www.roseoffashionblog.blogspot.com

    OdpowiedzUsuń
  4. Ale to skomplikowane. :D

    little-jay999.blogspot.com

    OdpowiedzUsuń
  5. Bardzo przydatne kody :) Na pewno w przyszłości z nich skorzystam.

    INNA MYŚL - zapraszam!

    OdpowiedzUsuń
  6. Za ten poradnik powinnaś dostać Oskara... I ja byłabym tą, która biłaby brawo najgłośniej:)

    OdpowiedzUsuń
  7. Bardzo przydatny post, dziękuję :)
    Obserwuję!
    Pozdrawiam i zapraszam http://nataliexbrunette.blogspot.com/

    OdpowiedzUsuń
  8. Mnie to zachwyciło te zdjęcie hihi.... ;)

    OdpowiedzUsuń
  9. Świetny wpis, bardzo mi pomógł.
    Dziękuję i pozdrawiam :)

    OdpowiedzUsuń
  10. Super wpis i fajne szablony. Niestety u mnie nie chce zadziałać wyśrodkowanie kart :( W dodatku cały czas są w obramowaniu, które jest chyba pozostałością poprzedniego szablonu. Proszę o pomoc - jak mam to zrobić?

    OdpowiedzUsuń
  11. Mogę prosić o link do bloga? :)

    OdpowiedzUsuń
  12. Proszę: tilitiliszyje.blogspot.com
    :)

    OdpowiedzUsuń
  13. Jeśli chodzi o obramowanie trzeba usunąć akcenty stron :)
    Jeśli chodzi o wyśrodkowanie kart to spróbuj kod na wyśrodkowanie przenieść jako pierwszy lub użyj tego kodu:

    .PageList {text-align:center !important;}

    .PageList li {display:inline !important; float:none !important;}

    OdpowiedzUsuń
  14. Rzeczywiście, przeoczyłam jedno okienko w akcentach.
    Wyśrodkowanie kart już działa - pomogło wklejenie na pierwsze pozycje kodu, który podałaś.
    Dziękuję bardzo za pomoc :)

    OdpowiedzUsuń
  15. Nie ma za co - dobrze, że już wszystko działa :)

    OdpowiedzUsuń
  16. Wow, skąd tyle wiesz?

    OdpowiedzUsuń
  17. Podejrzewam, że dzięki nauce :)

    OdpowiedzUsuń
  18. Rewelacyjny post i ogromna pomoc. Dziękuję!

    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