Zrób ze mną szablon na bloga
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;oraz wpisujemy kod na wyśrodkowanie kart
border-top: solid #614c41;
border-width: 2px;
padding: 5px;}
#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 {Wyjustowanie tekstu
border-left:10px solid #444;padding-left:20px; background: #eee; padding: 10px;}
.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:
