Zrób ze mną szablon na bloga

niedziela, 31 maja 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:

Jeśli spodobał Ci się wpis, przekaż go dalej :)