.blog-pager, czyli to i owo o starszy/nowszy post..

Pewnie każdy z Was zastanawia się jak można zmienić wygląd gadżetu jakim jest ,,STARSZY/NOWSZY POST''. Otóż możemy bawić się na dwa sposoby. Albo za pomocą kodów HTML, albo CSS. Dzisiaj skupimy się na tych drugich, ponieważ są dużo łatwiejsze, ale również jak wiecie, są podstawą całej budowy bloga. To one stanowią podstawę bloga i budują jego wygląd. Nawet jeżeli chcesz działać w HTML'u - musisz poznać od podstaw CSS. Wiem jednak, że Twój czas jest równie cenny jak mów, więc aby nie przedłużać przejdźmy do pracy.

.blog-pager a {
1
 }

.blog-pager a:hover { 
2
 }

Skopiuj kod z okienka nr 1 i wklej w miejsce jedynki, następnie kod z okienka nr 2 i wklej tam, gdzie widnieje dwójka.

Mam nadzieję, że sprawnie Ci poszło, jeżeli nie - napisz w komentarzu w czym tkwi problem - pomogę :)

W Y G L Ą D	Nowszy post Strona główna Starszy post
K O D	1 background:#d0b1de; color:#444; font-family:'Merriweather Sans',sans-serif !important; text-transform:uppercase; letter-spacing:2px; font-weight:normal !important; font-size:7px;padding: 5px 10px; margin-left:-2px; transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; text-decoration: none;	2 color: #444; background:#a0a0cd; font-family:'Merriweather Sans',sans-serif !important; text-transform:uppercase; letter-spacing:2px; font-weight:normal !important; font-size:7px;padding: 5px 10px; margin-left:-2px;

W Y G L Ą D	Nowszy post Strona główna Starszy post
K O D	1 background: #9d3333; color:#fff; font-family:'Akronim',sans-serif !important; text-transform:uppercase; letter-spacing:2px; font-weight:normal !important; font-size:10px; padding: 5px 10px; margin-left:-2px; border-radius: 50px; text-decoration: none;	2 transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; background: radial-gradient(circle, #c45b5b 0%, #e55a5a 100%); box-shadow:inset 0 0 10px 10px transparent,0 0 20px 15px transparent; transform:scale(1.2); text-decoration: none !important;

W Y G L Ą D	Nowszy post Strona główna Starszy post
K O D	1 background:#8dc1d3; color:#444; font-family:'Raleway Dots',sans-serif !important; text-transform:uppercase; letter-spacing:2px; font-weight: normal !important; font-size:10px;padding: 5px 10px; margin-left:-2px; text-decoration: none; box-shadow: 0px 0px 5px #7cb0c2;	2 color:#fff; font-family:'Dynalight',sans-serif !important; text-decoration: none; box-shadow: inset 185px 0 0 #5aa0a0; transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s;

Ciekawostka! Czcionki użyte w kodzie są wklejone do kodu HTML na moim blogu, więc nie koniecznie muszą być kompatybilne u Ciebie. Więcej informacji na temat wstawiania własnych czcionek do bloga pojawi się w następnym tutorialu.