Rys.1 |
Pisałem już o tym na forum że to nie takie trudne - szablon do dostosowania był banalnie prosty, a samo dostosowanie zajęło mi kilka minut dosłownie - wiec może coś bardziej skomplikowanego.
Zatem... Google: blogger tempalates search i pierwszy wynik z brzegu
Rys.2 |
Zapewne byście pobrali już szablon lecz nie dziś, nic z tych rzeczy klikamy na demo online i pobieramy wszelkie tła na nasz dysk lub zapisujemy do nich linki - zalecam je zapisać mniej roboty oraz pobrać bo czasem mogą się nam przydać.
Jako wierny użytkownik Mozilli Firefox'a klikam więc Narzędzia - Informacje o stronie [rys.2] - wklejam do notatnika url wybranych grafik - skupiam się tutaj na tych większych gabarytowo, pomijam zawartość mniej ważną do szablonu, lecz nic nie stoi na przeszkodzie zapisać wszystkich. [rys.3]
Rys.3 |
Przechodzimy do Projektanta szablonu i szukamy czegoś podobnego w układzie, pośród kilkunastu szablonów Simple [rys.4] jest najbardziej podobny więc wybieram go jako bazę do nowego szablonu.
Staramy się wybrać najbardziej podobny szablon względem układu - szatę graficzną pominiemy w tym przypadku.
Rys.4 |
Teraz kolej na usunięcie wszelkich niepotrzebnych grafik z naszego projektu i zastąpienie ich tymi zapisanymi z szablonu.
Klikamy więc kolejno na zakładki i usuwamy na początek tło [rys.5]
następnie ustawiamy kolorki strony na przezroczyste [rys.6] sugerując się naszym szablonem usuwamy też linie podziału [rys.7]
|
|
|
Pomocną zakładką będzie: Dodaj arkusz CSS z sekcji Zaawansowane. [rys.8]
Rys.9 |
Rys.8 |
Najlepiej mieć pełen podgląd w to co się robi, więc klikamy na zastosuj do bloga a następnie wracamy do bloga - dodajemy przykładowe gadżety w każdym z możliwych elementów, [rys.9] dobrze żeby były tam też jakieś posty, jeśli ich nie mamy powrót do bloga i robimy przykładowe wpisy.
Powróćmy do tematu dostosowania naszego szablonu:
Na pierwszy ogień idzie tło i header rzeczy oczywiste w szablonie... więc wklejamy odp arkusze:
body {background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTf-gahmuMrIiyEXtaxVl2opj1rJVkYtsKhx6A_A2W3uoxzMJtc3gZAtAHurACKjF0PFpxKXYI80Nnabi9gCl76tTSh5ZSL5vSRXraznGlDkQ_If2nxQ8lykDzU9tRUnGBf0mvUpDf-dk/s0/bgbody.jpg) repeat-x top center;
margin-top:-30px;
}
.header {
height:178px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6_nkkDHvxMEBrQxOPTknlh34NWFy7rkYnozTo80EGX687g5NCK1-513EfOlbfO-MF_cflZlyQxNgbSk3O1zMcJ_Ne4x14lHxLmF8Ijkv4yqM3PT-hSHL5yXGEynxUSfkAbRErOu3xD34/s0/bgheader.jpg) no-repeat top center;
}
margin-top:-30px;
}
.header {
height:178px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6_nkkDHvxMEBrQxOPTknlh34NWFy7rkYnozTo80EGX687g5NCK1-513EfOlbfO-MF_cflZlyQxNgbSk3O1zMcJ_Ne4x14lHxLmF8Ijkv4yqM3PT-hSHL5yXGEynxUSfkAbRErOu3xD34/s0/bgheader.jpg) no-repeat top center;
}
na czerwono adresy naszych plików z tłami reszta to małe dostosowania
w wyglądzie: margin-top w body usuwa nam pasek nawigacji,
header height określa wysokość naszego bannera
teraz kolej na resztę:
nasza środkowa część bloga nie ma jeszcze tła i stopka jest nieco inna więc:
.region-inner {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWAF30q5O5unWyBuFE6cYa38Q3QwZNl-W-9X_NpiUEkyevN-_oNnKFswoj6XE_AaUSGrvWto7fTOUTf_J2V_UudqvEFfn8iZQy523ZoM9udMNVoUQV1aEyHSOKD_brPvhA5IRE0-q1wd0/s0/bgcontent.gif) repeat-y center center;
}
.region-outer {background: transparent;}
.footer-outer {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTf-gahmuMrIiyEXtaxVl2opj1rJVkYtsKhx6A_A2W3uoxzMJtc3gZAtAHurACKjF0PFpxKXYI80Nnabi9gCl76tTSh5ZSL5vSRXraznGlDkQ_If2nxQ8lykDzU9tRUnGBf0mvUpDf-dk/s0/bgbody.jpg) repeat-x top center;) repeat-y top center;
}
.footer-inner {background: transparent;}
stopka była tak szeroka jak body strony więc użyłem stylu podwójnie dla stopki .footer-outer oraz dla jej zawartości .footer-inner ustawiłem przeźroczystość. Jeśli chcemy możemy teraz dodać jeszcze dowolną grafikę z przezroczystością do szablonu ;) Podobnie możemy zrobić z .region-outer.
}
.region-outer {background: transparent;}
.footer-outer {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTf-gahmuMrIiyEXtaxVl2opj1rJVkYtsKhx6A_A2W3uoxzMJtc3gZAtAHurACKjF0PFpxKXYI80Nnabi9gCl76tTSh5ZSL5vSRXraznGlDkQ_If2nxQ8lykDzU9tRUnGBf0mvUpDf-dk/s0/bgbody.jpg) repeat-x top center;) repeat-y top center;
}
.footer-inner {background: transparent;}
Brakuje jeszcze nam małego gadżetu z ciekawą grafiką więc dodajmy go:
Wracamy na moment do projektu i dodajemy nowy gadżet HTML/JavaScript to załatwi sprawę.
Aby nasz gadżet był kompletny piszemy jego treść: <div class='top'> następnie nasza przykładowa zawartość gadżetu i zamykamy znacznik </div>
znów projektant i dopisujemy arkusz CSS dla nowego gadżetu
.top {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYU16xFWjXejam7Jl1ynLh4KbkeIESayQYA8XRWDWED5Mx2CQhvOZuILVJtsF9HQZzWqK9FyKy7NT5_vIWlCNVtbWE5sumSfhy31WcO5DVcpgIRHumXdoaWbGoyXUBHOyQqq4fH-bnQcI/s0/bgcrosscol.png) no-repeat center center;
height:197px;
padding:40px;
margin-top:2px;
}
podajemy wysokość HEIGHT aby zawsze była stała mimo iż nasza zawartość jest niebyt wielka;) dodatkowo dodałem marginesy i padding gadżetu, w celu usunięcia nieciekawej linii podniosłem go do góry o 2px; Co do tego elementu mam niezbyt miłe uczucia - poco ładować taki duży plik na takie samo tło - autor szablonu o tym nie pomyślał - nie lepiej było zrobić transparentny plik z samym detalem i podpiąć go jako tło, ale przykład to przykład nie będziemy poprawiać autora height:197px;
padding:40px;
margin-top:2px;
}
Rys.10 |
Jak widać nasz gadżet strony jest zbyt nisko podnieśmy go więc do góry, opis bloga jest zbyt nisko i ma spory margines, tytuł jest zbyt nisko poprawmy to: klikamy w zakładkach zaawansowane i ustawiamy odp kolory wielkość czcionki i to co się da :) Klikamy kolejno i ustawiamy kolorystykę wielkości czcionki, [rys.10] później zajmiemy się ustawianiem odstępu i odległości względem pozostałych elementów
Poustawiane - jeszcze tylko kilka wpisów CSS i gotowe
.tabs .widget {margin-top:-310px;}
.descriptionwrapper {margin:0px; margin-top:-25px; font-size:8px;}
.titlewrapper {padding:0px; margin:0px;}
.descriptionwrapper {margin:0px; margin-top:-25px; font-size:8px;}
.titlewrapper {padding:0px; margin:0px;}
Nasze marginesy już są gotowe, szablon nabrał wyglądu zbliżonego do oryginału.
Co jakiś czas zapisujemy ustawienia i otwieramy bloga ponownie - ja już mam otwarty w innej karcie więc odśwież w celu sprawdzenia naszych poczynań - podgląd działa lecz warto też sprawdzić jak to się ma do rzeczywistości.
Aby sprawdzić styl dowolnego miejsca w blogu zaznaczamy jego fragment i podglądamy kod HTML zaznaczenia. Wyszukujemy w nim klasę stylu i dopisujemy odp. arkusz :)
Nasze dostosowanie powtarzamy korygując kolejne elementy co zatem idzie poklikamy tu dość sporo - na początku może to nieco zniechęcić ale nie jest to aż tak skomplikowane aby nie sprostać temu wyzwaniu.
Czy nasz szablon jest podobny do oryginalnej wersji LINK - zapewne tak jeszcze tylko dopracować wielkości czcionek, kolorystykę itd i mamy perfekcyjny szablonik "Made by: MY SAMI" w stopce możemy też dodać kto jest autorem grafiki naszego bloga - a niech się cieszy dobry ludek ;)
Po tych wszystkich zabiegach - jak wpadniemy w nawyk i znamy podstawy CSS to w ciągu kilku godzin opracujemy każdy szablon jaki sobie wymarzymy z projektantem szablonów. Zalety szablonu z projektanta - chyba nie trzeba o nich pisać...
PS. Ten tutorial ma charakter informacyjny proszę nie prosić mnie o dostosowanie znalezionych w sieci szablonów. Zamiast rozpisywać się o tego typu prośby spróbujcie sami swoich umiejętności. Zalecam prowadzić doświadczenia na nowym przykładowym blogu, w którym w skutek nieprzewidzianych niespodzianek podczas edycji nic się niezwykłego nie wydarzy ;) po osiągnięciu zamierzonego rezultatu szablon zapisać na dysk lub wkleić do docelowego bloga.
Pomocne kursy CSS można znaleźć w odsyłaczach na moim blogu.
Napisano już 3 komentarze/y. Dyskusja powoli się rozwija...
Już teraz przyłącz się do dyskusji i dodaj nowy komentarz
Podoba ci się modyfikacja sekcji komentarzy - opis znajdziesz tutaj: Tuning komentarzy
Kroczek po kroczku wyszukalam Twoje stronki, ktore takiemu laikowi komputerowemu jakim jestem ja beda bardzo pomocne. Juz teraz sie ode mnie nie odczepisz Stachu :))) Bede bardzo pilnie studiowala Twoje porady, chociaz, prawde mowiac, narazie to dla mnie chinszczyzna. Ale obiecalam sobie pilnosc w nauce, wiec moze przyniesie ona jakies realne efekty? :-/ Bede okrutna i zaloze blog eksperymentalny, bo jesli zaczne uczyc sie na moim istniejacym blogu, to pewnikiem go schrzanie; znam przeciez swoje mozliwosci ... hmmm ... :-/ Dzieki Stachu, sle pozdrowienia dla rodaka spod Bieszczadow :)
Hej,
bardzo fajny i pomocny blog.
Ja mam aktualnie problem z error 400. Jeśli wiesz, jak rozwiązać ten problem i możesz pomóc to proszę o kontakt:
oczekujac@gmail.com
A dodatkowo proszę o pomoc w ulepszeniu bloga: www.oczekujac.blogspot.com
https://strony-www.net/
Prześlij komentarz
Zapraszam do komentowania i wyłapywania ew. błędów... Twoje IP: