NEWS: Uzupełniłam w końcu galerię, yay :D!
Polski i angielski w jednym tytule. Jeszcze tam tylko cyrylicy brakuje.
Witam państwa w mojej drugiej instrukcji! Tym razem będzie tak sobie o z tłumaczeniem, bo instrukcja wymaga znajomości takich podstaw, jak znajomość selektorów typu .column-center-inner czy wiedzy, do czego służy wartość padding. Skupimy się na trochę ważniejszych rzeczach.
1. Przygotowania
Naszym celem jest stworzenie nieruchomego szablonu z grafiką w nagłówku, która będzie się zmieniać po odświeżeniu strony. Wybieramy sobie Czarną Rewelację za podstawę i lecimy z zabawą.
Usuwamy tło wgrane przez Bloggera i na jego miejsce wgrywamy to, które nam się podoba. Ponieważ w zamyśle ten szablon miał być odwróconą kolorystycznie wersją szablonu Green Journey, wrzucam coś ciemnego (polecam http://subtlepatterns.com, jeśli poszukujecie ładnego tła). W układzie szablonu wybieramy układ dwukolumnowy.
W "zaawansowanych" bawimy się jak chcemy, najważniejsze jednak, by ustawić przeźroczyste:
- kolor każdego tła
- tytuł i opis bloga (i zmniejszyć czcionkę do 0, bo nam tu będą tylko przeszkadzać)
- kolor obramowania, skosu, daty, gadżetów etc. (obrazów nie musimy ruszać, a przynajmniej jak dla mnie prezentowały się całkiem okej w wersji podstawowej i pasowały do całości)
Na razie szablon wygląda u mnie tak:
Mało ciekawie to wygląda, co? Spokojnie, zaraz zrobi się wesoło, przechodzimy CSS'a. Nim jednak to zrobimy, wychodzimy na chwilę z edycji szablonu.
2. Nagłówek
Przerzucamy Obserwatorów, którzy gdzieś nam się tu zapodziali do prawej kolumny i dodajemy w lewej kolumnie gadżet HTML, do którego wklejamy ten kod:
<!-- jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
Instaluje on nam jQuery na blogu, dzięki czemu mamy pewność, że następny kod będzie poprawnie działał.
<script language="JavaScript">
<!--
function random_imglink(){
var myimages=new Array()
myimages[1]="#"
myimages[2]="#"
myimages[3]="#"
myimages[4]="#"
myimages[5]="#"
myimages[6]="#"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>
Cóż to za dziwadło? Otóż jest to kod, który za pomocą matematycznych wyliczeń losuje nam, jaki nagłówek wyświetli się jako następny. Czasem wybiera dwa razy pod rząd ten sam obrazek, dlatego trzeba kilka razy odświeżyć stronę. W miejsce # wstawiamy link do naszych nagłówków, każdy oddzielnie. Możemy ich dodać, ile dusza zapragnie, musimy tylko pamiętać, by wkleić myimages[x]="#" i w miejsce x wstawić kolejną liczbę, inaczej obrazki nie będą losowane poprawnie.
Okej, podstawmy w takim razie linki. W paczce, do której pojawi się odnośnik gdzieś pod koniec notki będziecie mieć już w pełni gotowe kody i grafiki, które będziecie mogli sami wgrać - na wypadek, gdyby coś nie działało poprawnie.
Po dodaniu gadżetu polecam poodświeżać stronę kilka razy dla pewności i sprawdzić, czy obrazki się zmieniają. Wiem, szablon wygląda na razie gorzej niż źle, ale spokojnie, już się tym zajmujemy.
3. Pobawmy się CSS
#navbar-iframe {display: none}
Na dobry początek wywalimy sobie pasek nawigacji, bo nie jest nam tu do szczęścia potrzebny.
#HTML1 {margin: -70px 0px 0px -190px; background: url(http://i65.tinypic.com/xnb7yc.jpg); border: 5px #ccc outset; padding: 11px 13px 13px 13px;}
Jeśli coś wam się rozjeżdża po dodaniu tego kodu, a ramka konczy się nie wiadomo gdzie, można ją prosto ustawić w odpowiednim miejscu za pomocą suwaka w dostosowywaniu ustawień szerokości.
Zapewne się zastanawiacie, co to to magiczne outset, prawda? Decyduje nam on o tym, jak będzie wyglądała nasza ramka. Więcej komend dotyczących ramek znajdziecie tutaj: klik! (grafika pochodzi z Tajemniczego Ogrodu).
I tak, moi drodzy, to wszystko, jeśli chodzi o nagłówek. Zajmijmy się teraz resztą bloga.
.main-inner .column-right-inner {background:url(http://i65.tinypic.com/xnb7yc.jpg); margin: -69px -120px 0px 120px; font-family: arial; font-size: 10px; text-align: justify; display: block; padding: 3PX; height: 533px; overflow-y: scroll;}
overflow-y odpowiada nam za suwak w kolumnie, a dzięki wartości height mamy pewność, że kolumna osiągnie dokładnie taką wysokość, jaką chcemy.
.column-center-inner {background: url(http://i65.tinypic.com/xnb7yc.jpg); margin: -69px 0px 0px 5px; overflow-y: scroll; overflow-x: hidden; height: 540px; width: 500px;}
Prawie to samo, co w poprzednim kodzie, lecz tym razem odnosi się to do głównej kolumny posta. Overflow-x: hidden sprawia, że widoczny będzie tylko pionowy suwak, a width jest odpowiedzialne za szerokość kolumny.
.post-body {font-size: 14px;
font-family: "Times New Roman", sans-serif;
color: #ccc;
text-align: justify;}
Ustalamy sobie wielkość, rodzaj i kolor czcionki oraz justowanie tekstu. Prościzna.
blockquote {text-align: justify; /*wyrównanie tekstu w ramce*/
color: #ccc;
padding: 10px;
margin: 15px 0px 15px 15px;
text-transform: normal;
background: url(http://i64.tinypic.com/2m46du0.jpg);
border: 5px #bbb outset;}
A co my tu mamy? Podrasowałam trochę cytaty, by nie wyglądały zbyt nudno. Padding jest odpowiedzialne za to, by tekst nie przyklejał się nam do ramek, a margin z kolei służy do tego, by odsunąć cytat od reszty posta.
W końcu przestaje tu być tak nijako i robi się ciekawie.
.sidebar .widget {background:url(http://i63.tinypic.com/10wjep0.jpg);}
Ten kod odpowiada nam nie za całe tło paska z gadżetami, lecz za każdy pojedynczy. Nie jest konieczne do szczęścia. O ile użyłam go przy Green Journey, tak tym razem go sobie podarujemy.
::-webkit-scrollbar {background: #403e3c;
width: 8px;
height: 1px;
}
::-webkit-scrollbar-thumb {
height: 1em;
background: linear-gradient(to right, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
-webkit-border-radius: 0px;
}
A oto kody odpowiedzialne za nasze suwaki na blogu. W pierwszym kodzie określamy tło oraz rozmiary suwaka, a w drugim sam jego kolor. Reszty w sumie nie ma po co ruszać.
Hm. Skoro to już mamy zrobione, to zajmijmy się detalami. Czas na tytuły!
.post-title {
margin-top: -20px;
padding: 20px;
text-align: right;}
h3.post-title a:hover {text-decoration: none; transition:all 0.5s; -moz-transition:all 0.5S; -WEBKIT-TRANSITION:ALL 0.5S; -O-TRANSITION:ALL 0.5S}
h3.post-title {TRANSITION:ALL 0.5S; -MOZ-TRANSITION:ALL 0.5S; -WEBKIT-TRANSITION:ALL 0.5S; -O-TRANSITION:ALL 0.5S}
h2 {text-align: right; }
I w ten sposób już mamy za sobą tytuły postów i gadżetów. Dziecinnie proste, hm?
.Attribution, .footer-outer {display: none}
Dzięki tej linijce znika nam napis "Technologia Blogger" oraz magiczna stopka, która nie jest nam potrzebna, a tylko niepotrzebnie sprawia, że nasz blog może się przesuwać.
Widzicie? Żadnego zbędnego przesuwania więcej!
.post-footer {font-family: Century Gothic; font-size: 10px; text-decoration: none; float: center; margin-top: 2px; text-align: justify; padding: 5px; margin-right:3px; color: #666666; letter-spacing: 1px; text-transform:uppercase; margin-bottom: 10px; display: block;}
.post-icons, .post-share-buttons {display: none;}
A teraz zajmujemy się stopką samego posta. Drugi kod wyrzuca nam wszelkie ikonki społecznościowe ze stopki. Osobiście często rozwalają mi one wygląd całej stopki, a nie są mi do szczęścia potrzebne, więc się ich pozbywam.
b, strong { font-family: georgia; color:#ddd; text-transform:uppercase }
i, em { letter-spacing: 1px; color: #aaa; }
s, strike { color: #eee; }
u { border-bottom: 1px dashed #666; text-decoration: none; color: linear-gradient(to bottom, #d2ff52 0%,#91e842 64%); }
a:link, a:active, a:visited, a:hover { text-decoration: none;
transition: height .7s ease; /*animacja*/
-webkit-transition: height .7s ease;
-moz-transition: height .7s ease;
-o-transition: height .7s ease;
-ms-transition: height .7s ease;}
Skoro już jesteśmy w okolicy posta, to załatwmy wszystko za jednym zamachem. Pierwsza linijka odpowiada za tekst pogubiony, druga za tekst pochylony, trzecia za tekst przekreślony, czwarta - za podkreślony. Ostatnie drzewko ustala nam, jak się mają zachowywać wszystkie linki na blogu.
.post-labels {font-family: Century Gothic; font-size: 10px; text-decoration: none; float: center; margin-top: 2px; text-align: justify; padding: 5px; margin-right:3px; color: #eee; letter-spacing: 1px; text-transform: lowercase; margin-bottom: 10px; display: block;}
Nasze grzebanie w postach zakończymy sobie podrasowaniem etykiet. A żeby nie być gołosłownym:
.blog-pager-older-link {border-right: 5px #ddd dotted; } /*napis Starszy Post*/
.blog-pager-newer-link {border-left: 5px #ddd dotted; } /*napis Nowszy Post*/
.home-link {border-left: 5px solid #ddd; border-right: 5px solid #ddd; } /*napis Strona Główna*/
.feed-links {display: none;} /*szczerze? Nie pamiętam, skąd to się tu wzięło ani co robiło, ale najwyraźniej było ważne. Ten profesjonalizm, mniam*/
.blog-pager a {font-family: Century Gothic; font-size: 10px; text-decoration: none; margin-top: 2px; padding: 5px; color: #ccc; letter-spacing: 1px; text-transform:uppercase;} /* odpowiada ogółem za wygląd tekstu Starszy/Nowszy Post/Strona Główna*/
Wszystko pięknie ładnie, ale brakuje mi tu czegoś jeszcze. Wiecie czego? Nie zajmowaliśmy się jeszcze menu i na sam koniec naprawimy ten błąd.
#PageList1 a {
background: url(http://i64.tinypic.com/2m46du0.jpg);
border: 4px black solid;
padding: 5px;
margin-top: -4px;
margin-bottom: -4px;
color: #ccc;
text-align: center;
font-size: 12px;
display: block;
transition: 0.5s;
}
#PageList1 a:hover {
background: #eee;
padding: 5px;
border-right: dashed 1px #838689;
border-left: dashed 1px #838689;
color: #666;
transition: 0.5s;
}PageList1 a:hover {
width: 150px;
background: #fa482e;
border-radius: 0px;
color: #ffcc88;
border: 2px solid #ffcc88;
transition: 0.5s;
}
Tada! Tak oto nasze menu wygląda pięknie, szablon wręcz błyszczy od eleganckiej szarości i ogółem wyszło ślicznie.
Teraz wystarczy wypoprawiać ewentualne zgrzyty kolorystyczne, ale już nie za pomocą CSS, a narzędzi, którymi dysponuje Blogger i tak oto kończymy pracę nad szablonem. Nie było w tym nic bardzo skomplikowanego, co? Kij z tym, że to jest instrukcja "kopiuj-wklej" i tak naprawdę kij tu tłumaczę, ale nie ma co wymagać, wprawiam się dopiero.
Mam nadzieję, że ten tekst był przydatny i jeśli użyjecie tej instrukcji (lub chociaż jakiejś jej części)/spodobał wam się jakiś konkretny efekt i chcecie o niego zapytać/po prostu nie macie co robić z życiem, to piszcie śmiało, odpowiem na każdy komentarz ;).
Link do paczki: klik!
Brak komentarzy:
Prześlij komentarz