Twórczy notatnik: blogosfera

Pokazywanie postów oznaczonych etykietą blogosfera. Pokaż wszystkie posty

Zrób ze mną szablon na bloga część 4

Szablony na Bloggera - niby proste, niby łatwe do dostosowania, ale jednak wciąż sprawiają problemy. Nie ma w tym nic złego i przede wszystkim - nie ma w tym nic dziwnego, nie każdy ma czas i cierpliwość aby kombinować i zmieniać, dlatego, postanowiłam wznowić serię, która jest Waszą ulubioną, a wnioskując po mailach jakie od Was dostaje - jest również bardzo potrzebna.

Dla wszystkich nowych czytelników, którzy nie znają poprzednich wpisów z tej serii - nie tworzymy szablonu od a do z, modyfikujemy ten, który jest udostępniony przez Bloggera, a wpis opiera się na tym, że tworzymy konkretny styl z podanych kodów - są to kody, które znajdziecie u mnie na blogu oraz takie, które pojawiają się pierwszy raz.

Oczywiście, można wszystko dostosować pod siebie, kolory, fonty, etc. nie jest konieczne trzymanie się kropka w kropkę tego co Wam podam ;)

Gotowi? No to zaczynamy! :)

Na początek paleta kolorów, z której będziemy korzystać, pochodzi ona z grafiki, którą wykorzystamy do tego szablonu

#EA8093 #6F7CBF #CED0DD #FBBACB #78ACFF #000000

Przed każdą edycją szablonu, zrób jego kopię zapasową, aby w razie pomyłki, nie utracić cennych dla Ciebie danych :)

1. Za bazę naszego szablonu wybieramy szablon Simple (prosty) - biały.

*Będziemy tworzyć szablon prawo kolumnowy

2. Wybieramy motyw - dostosuj - dostosuj ustawienia szerokości i ustawiamy nasz szablon na takie wartości:

Cały blog - 1240

Kolumna boczna prawa - 320

Klikamy "zastosuj do bloga"

3. Następnie przechodzimy do zakładki układ i wybieramy układ prawo kolumnowy, a w układzie stopki wybieramy 3 kolumnowy. Klikamy "zastosuj do bloga".

4. Przechodzimy do zaawansowane

Tekst strony - ustawiamy na kolor #000000

Tła - tło zewnętrzne białe, główne tło zmieniamy na transparentne, tło nagłówka również zostaje transparentne

Linki - kolory jakie użyłam (z powyższej palety koloru) to: dla koloru linku i koloru odwiedzonego linku - #000000, drugi kolor to - #EA8093 dla kolor po wskazaniu kolorem

Następna karta do której przechodzimy to tło kart, tam zmieniamy ustawienia na kolor przezroczysty

Nagłówek z datą - kolor tekstu, roboczo ustawiamy na czarny czyli #000000, a kolor tła ustawiamy na przezroczysty

Stopka posta - kolor tekstu #000000, kolor tła oraz kolor cienia - przezroczysty

Obrazy - kolor tła i obramowania - przezroczyste, kolor tekstu - #000000

Akcenty - wszędzie ustawiamy na przezroczyste

No to teraz arkusz CSS

5. Pierwszym kodem jaki dodamy to usunięcie cienia i ramek ze zdjęć w poście oraz w kolumnie bocznej.

Wybieramy "zastosuj do bloga"

Przejdź do wpisu z tym kodem
Teraz, zajmiemy się dostosowaniem zdjęć we wpisie, tak, aby wszystko było jak należy :) Poniższy kod, dostosuje nam zdjęcia do wpisu i nie naruszy nam tych mniejszych ;)

Wybieramy "zastosuj do bloga"

6. Teraz zrobimy automatyczne skracanie wpisu w naszym szablonie, a dokładną instrukcję znajdziecie TUTAJ

Zmiany jakie dokonamy w tym kodzie to:

posts_no_thumb_sum = 600;
posts_thumb_sum = 520;
img_thumb_height = 520;
img_thumb_width = 820;

Teraz zajmiemy się aktywnym przyciskiem "czytaj dalej", kod do tego przycisku również znajdziecie w podlinkowanym wpisie, jednak na potrzeby tego wpisu, trochę się on zmieni i będzie wyglądał tak:

7. Teraz, aby było nam wygodniej, opuścimy na chwilę sekcje z dostosowaniem bloga. Wybieramy "powrót do Bloggera" i wybieramy "układ"

8. wybieramy pasek nawigacyjny - edytuj - wyłączone - zapisz
Następnie przechodzimy do sekcji "główny" (nadal w układzie) - edytuj - i odznaczamy: godziny, pokaż opcje szybkiej edycji, pokaż przycisk udostępniania, lokalizacja - zapisz

9. Wracamy do motyw - dostosuj

10. Teraz zajmiemy się dołem naszego bloga.

Usuwamy:
Subskrybuj: posty (Atom) oraz Obsługiwany przez usługę Blogger

Zastosuj do bloga

Pager bloga

Zastosuj do bloga

11. Ustawienia ogólne

Ustawienia tekstu - rodzaj fontu, kolor, ułożenie tekstu, wielkość fontu

Usuwanie podkreśleń linków, po najechaniu na nie myszką

12. Posty

Ustawienia daty i tytułu wpisu

Data

Tytuł wpisu

Stopka posta

Zastosuj do bloga

13. Posty wewnątrz (po kliknięciu na nie ) i komentarze

Cytaty

Przejdź do wpisu z tym kodem
Komentarze

Przejdź do wpisu z tym kodem Zastosuj do bloga

14. Kolumna boczna

Tytuły gadżetów

Zmiana Wyglądu gadżetu "obserwuj przez e-mail"

Przejdź do wpisu z tym kodem
Styl dla Archiwum - hierarchia

Przejdź do wpisu z tym kodem

Zastosuj do bloga

15. Menu/strony

Jeśli nie mamy dodanych stron/menu

Wybieramy powrót do Bloggera - układ - wszystkie kolumny - dodaj gadżet - strony - zapisz

Wracamy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS

Dodamy teraz kod, który przeniesie nasze strony na górę bloga.

Zastosuj do bloga

16. Nagłówek i grafika na górze bloga

Wyśrodkowanie nagłówka

Grafika na górze bloga

Zastosuj do bloga

Wszystkie wartości są zmienne, nie trzeba się trzymać schematu z tego posta - można również dodać coś od siebie :)

Efekt końcowy:

Pobierz grafikę

Czytaj dalej

Moodboard blogowy - po co on jest i w jakim programie go zrobić

Podejrzewam, że jest tu spora część osób, która wie co to są moodboardy, więc Ci co już wiedzą, wybaczą mi ten krótki wstęp z wytłumaczeniem i wykażą się zrozumieniem dla tych, co pierwszy raz o tym słyszą 😊

Moodboard

Nie starajcie się tego tłumaczyć na polski - serio, zaufajcie mi, nie róbcie tego, bo jest to po prostu złe. Można to natomiast określić jako "tablica inspiracji" lub "zbiór inspiracji", aczkolwiek, najbardziej trafnym określeniem będzie jednak "tablica inspiracji".

Na naszej tablicy inspiracji, możemy "zbierać" wszystko, co nam będzie potrzebne do naszego projektu - zdjęcia, cytaty, grafiki, tekstry, patterny, palety kolorów etc.

Moodboard blogowy - po co on jest

Odpowiedź jest bardzo prosta, moodboard blogowy jest po to, aby pomóc nam w tworzeniu naszej marki.

Jest to plansza, na której umieszczamy paletę kolorów, jakie ma zawierać nasza marka (blog/strona) , logo (może być w różnych wersjach kolorystycznych), dobór fontów, główne grafiki (tytułowe) do naszego wpisu czy nawet patterny, których chcemy użyć.

Możemy te elementy układać, przestawiać, zamieniać aż w końcu nasza tablica, będzie złożona tak, jak być powinna.

Skoro już ją złożyliśmy w elementy, które na pewno wykorzystamy, to możemy teraz odpowiedzieć sobie bardziej dokładnie na pytanie - po co ten moodboard blogowy jest?

Jest on po to, aby bez żadnych komplikacji i na spokojnie wdrążyć najważniejsze elementy naszego bloga/strony. Mamy rozpiskę kolorów - więc już nie musimy szukać różnych palet kolorystycznych na internecie do użycia na naszej stronie, bo odpowiednio dobraliśmy je na naszej tablicy.

To samo z fontami - siadamy i instalujemy na naszą stronę.

Z całą resztą umieszczonych elementów w naszej tablicy jest tak samo, dzięki temu, praca idzie nam znacznie sprawniej i szybciej.

Dla przykładu, pokażę Wam moodboard dla mojego bloga (jest to najprostszy moodboard jaki może być):

Moodboardy, mogą wyglądać różnie. Mogą być bardziej lub mniej złożone, wszystko zależy od tego, czego tak naprawdę będziemy potrzebować. Nie ma konkretnych wytycznych, że elementy muszą być ułożone tak i tak i musi znajdować się to i to. Nie, moodboard dostosowujemy pod siebie.

W jakim programie stworzyć moodboard?

W programie graficznym, który umożliwi nam stworzenie siatki, na której rozmieścimy odpowiednio elementy. Takim programem (darmowym) jest GIMP, ale jeśli mam być z Wami szczera - najlepiej zrobić to w Canvie (która również jest darmowa).

Canva to fajne darmowe narzędzie, w szczególności jeśli chodzi o moodboardy (i inne grafiki, ale nie o tym teraz mowa) - są tam narzędzia, które bardzo ułatwią nam stworzenie takiej siatki na moodboard, dzięki czemu każdy sobie z tym poradzi.

Canva ma jeszcze jeden plus w przeciwieństwie do GIMPa - jest ona online, także jeśli ktoś nie czuje potrzeby pobierania GIMPa, to jest dla Was alternatywa 😉

Korzystaliście kiedyś z Moodboardów? Chcecie wpis o tym jak wykonać taką tablice w Canvie? Dajcie znać w komentarzu! 😊

Czytaj dalej

blogosfera szablon na bloga wpis

Szablon Grey and Pink na Bloggera do pobrania za darmo + szablonowe info!

Szablon Grey and Pink. Jest to darmowy szablon na Bloggera w odcieniach bieli, szarości i delikatnego różu. Utrzymany w minimalistycznej formie. Szablon można dostosować bez problemu do swoich potrzeb. Zmienić tło, kolory, fonty, dodawać kolejne karty do menu etc.

Info o szablonie

Szablon nie zawiera automatycznego skracania wpisów
W szablonie jest funkcja automatycznego dopasowania zdjęć we wpisie z pominięciem mniejszych zdjęć.
Menu to standardowe strony Bloggera
Można zmieniać kolory, fonty, dodawać i usuwać nowe strony w menu etc.

Uwagi

Szablon oraz grafiki dodawane do szablonu są tylko i wyłącznie na użytek własny.
Udostępnianie szablonu osobom trzecim w postaci oryginalnej lub zmienionej jest zabronione.
Szablon posiada nieusuwalną stopkę z podpisem autora. Po usunięciu jej, szablon nie będzie poprawnie działał
Nie wolno modyfikować wyglądu stopki tzn. zmieniać jej koloru tak, aby nie była widoczna i podpisywać się pod szablonem jako autor
W razie jakichkolwiek problemów/pytań napisz na maila blonparia@gmail.com
Nie proś osób trzecich o pomoc przy szablonie w razie powstania problemu - istnieje ryzyko, że dana osoba źle podejdzie do Waszego problemu, a wtedy szablon może zostać uszkodzony lub całkowicie zniknąć z bloga. Pamiętaj! Zawsze zwracaj się z prośbą o pomoc do autora szablonu

Szablonowe info!

W związku ze zgłaszanymi problemami do niektórych szablonów, chce poinformować, że niektóre z nich zostały zaktualizowane, a inne przestały być przeze mnie wspierane (zostały usunięte).

Szablony usunięte to:

Love and Happy
Light Blue
Minimalism Style
Girl lifestyle

Ci co posiadają na swoich blogach powyżej podane szablony, proszę o ich usunięcie z blogów i zamianę na inne. Pomoc do nich nie będzie udzielana.

Szablony zaktualizowane - zgłaszany problem: rozjechane miniaturki w popularnych postach

Ms. Mint Brown
Black and White
Laguna
Summer Cactus
Summer Time

Ci co posiadają powyższe szablony na swoich blogach, proszone są o ponowne ich zainstalowanie, w celu usunięcia danego problemu.

To może Ci się przydać

Szybka pomoc

Bloggerowe triki część 1 (Sprawdź po jakich hasłach/tagach inni do nas trafiają. Dodawanie tekstu nad komentarzami. Ustawienia komentarzy i usunięcie weryfikacji obrazkowej. Dodawanie graficznego podpisu do wpisu. Ustawienie liczby wpisów Sprawdzenie statystyk) Bloggerowe triki część 2 (Jak obserwować bloga, który nie ma gadżetu obserwatorzy. Śledzenie swojego komentarza. Powiadomienia o komentarzach na innym mailu. Ustawienie reakcji/opinii do wpisów. Usuwanie ramek, cieni z obrazów i edytowanie daty wpisów Selektory CSS Odmień bloga w parę minut Jak zrobić kopię zapasową szablonu i wgrać nowy szablon Zrób szablon na bloga

Zobacz jak wygląda szablon Pobierz szablon Zamów grafikę

Czytaj dalej

blogosfera wpis

Zrób ze mną szablon na bloga część 3

Po ostatniej ankiecie, wszystko stało się jasne - chcecie kolejną część z serii "Zrób ze mną szablon na bloga" i o to jest część 3! Ta część będzie się różnić trochę od poprzednich, ponieważ pokażę Wam jak zrobić nasz szablon za pomocą kodów, które są już dostępne na blogu. Mam nadzieję, że część 3 przyjmie się tak samo dobrze, jak część 1 i 2 :)

część 1 część 2
Paleta kolorów, z której korzystałam przy tej instrukcji:

https://www.design-seeds.com/studio-hues/collage/color-create-7/

#798340 #B1B85F #D1D183 #CADED8 #D7E7DD #F5EFE8

Zapamiętaj!

Przed każdą edycją szablonu, zrób jego kopię zapasową, aby w razie pomyłki, nie utracić cennych dla Ciebie informacji :)

1. Za bazę naszego szablonu wybieramy szablon Simple (prosty) biały. Najlepiej się na nim pracuje :)

2. Motyw - dostosuj - układ (będziemy pracować na prawo kolumnowym układzie z pojedynczą kolumną w stopce bloga)

3. Teraz przechodzimy do dostosuj ustawienia szerokości i szerokość bloga ustawiamy na optymalną czyli 1240, a szerokość kolumny bocznej - dowolnie, u mnie jest to 340

4. Wybieramy "Zastosuj do bloga"
5. Teraz musimy jakoś doprowadzić do porządku nasze zdjęcia we wpisach i same wpisy, aby zaczęły się jakoś prezentować :) W tym celu przechodzimy do zaawansowane - dodaj arkusz CSS

Usuwanie ramek i cieni spod zdjęć we wpisie

W tym celu będziemy korzystać z tego wpisu Kilka przydatnych, podstawowych kodów
Wklejamy taki kod:

Automatyczne dopasowanie zdjęć do szpalty bloga, bez ruszania tych mniejszych

Bardzo przydatny kod - dzięki niemu możecie wrzucać zdjęcia w oryginalnym rozmiarze i nie przejmować się ich zmniejszaniem przed wrzuceniem na bloga. Ten kod pojawił się w drugiej częśći "Zrób ze mną szablon na bloga"

Tekst strony i wpisów

Przechodzimy do "Tekst strony", wybieramy sobie font (taki, który obsługuje polskie znaki, bo wiadomo, nie chcemy, aby nasz wpis brzydko wyglądał z rozwalonym fontem), kolor oraz jego wielkość. W moim przypadku jest to font o nazwie Open Sans, kolor #444444 oraz wielkość 13px.

Wyśrodkowanie tytułu wpisu i daty

Te kody również znajdują się w 1 i 2 części "Zrób ze mną szablon na bloga" ;)

Wyśrodkowanie tytułu wpisu

Wyśrodkowanie daty

Zmiana wyglądu tytułu wpisu

Teraz musimy jakoś doprowadzić nasz tytuł wpisu do ładu i składu. W tym celu posłużymy się również kodami z 2 części wpisu "Zrób ze mną szablon na bloga". Jedyna zmiana będzie taka, że ustawienia naszych wartości się zmienią :)

Przy tym elemencie przyda nam się również kod, na zmianę koloru tytułu wpisów, po najechaniu na niego myszą.

Zmiana wyglądu daty

Pierwsze co zrobimy to usuniemy szare tło, zmienimy kolor i font. W tym celu przechodzimy do nagłówek z datą, zmieniamy kolor tekstu i dajemy tło na przezroczyste. Font ustawiłam taki sam jak tekst i w tytule wpisu czyli Open Sans. Możemy ustawić również wielkość fontu, pogrubić lub pochylić.

Przechodzimy do dodaj arkusz CSS i w tym przypadku również użyjemy kodu z 2 części "Zrób ze mną szablon na bloga". Tylko zmienimy trochę wartości.

Wyjustowanie tekstu we wpisie

Jak możecie zauważyć cały czas pozostajemy przy sekcji z wpisami, teraz zajmiemy się wyjustowaniem tekstu we wpisie. W tym celu pozostajemy cały czas w "dodaj arkusz CSS", wklejamy taki kod:

Stopka posta

Teraz będziemy doprowadzać do porządku stopkę posta. przechodzimy do stopka posta. Tam możemy zmienić kolor tekstu, usuwamy kolor tła (robimy przezroczyste) oraz kolor cienia (również ustawimy na przezroczyste). Następnie przechodzimy do dodaj arkusz CSS i dodajemy kod, który umożliwi nam dostosowanie fontu, wielkość etc.

Wygląd cytatów

Jeśli chodzi o edytowanie wpisu, to został nam jeszcze wygląd cytatów. Pozostajemy cały czas w zakładce dodaj arkusz CSS i wklejamy kod:

W tym celu korzystałam z tego wpisu STYLE DLA CYTATÓW WE WPISIE znajdziesz tam jeszcze więcej stylów dla cytatów.

Pager bloga

Zostając cały czas w arkuszu CSS możemy uporządkować nasz pager. Zaczniemy od usunięcia tła/kropeczek z pagera. Wpis do tego znajdziecie tutaj ZMIANA WYGLĄDU STOPKI BLOGA I PAGERA

Teraz trochę ulepszymy nasz pager, aby nie był taki tradycyjny. W tym celu wykonujemy pierwsze 3 punkty z tej instrukcji: TROCHĘ O FONT AWESOME

Jeśli wykonaliśmy już nasza powyższą instrukcję, to przechodzimy znowu do dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy taki kod:

Separator stopki bloga i stopka bloga

Separator stopki bloga w szablonie Simple, jest przerywaną, szarą linią. Będzie nam on przeszkadzał, więc po prostu go usuniemy za pomocą kodu, który już raz użyliśmy we wpisie ZMIANA WYGLĄDU STOPKI BLOGA I PAGERA

W tym samym wpisie, mamy kody na usunięcie niepotrzebnych elementów, jak napis "Obsługiwane przez technologię Blogger" oraz "Subskrybuj: posty (Atom)"

U mnie w stopce bloga znajduje się formularz kontaktowy, zmienimy teraz jego wygląd, a instrukcję na zmianę wyglądu formularza kontaktowego możecie znaleźć tutaj: JAK ZMIENIĆ WYGLĄD FORMULARZA KONTAKTOWEGO

Teraz usuniemy tytuł wpisu dla gadżetu w stopce, wklejamy taki kod:

Kolumna boczna

Teraz zajmiemy się naszą kolumną boczną, wyglądem gadżetów oraz ich tytułami. To będzie jeden z dwóch elementów w tym wpisie, gdzie pojawi się nowy kod, który jeszcze nie był publikowany w żadnym wpisie.

Teraz zmienimy wygląd naszego gadżetu "obserwuj przez e-mail", skorzystamy z drugiej części instrukcji na ten gadżet. JAK ZMIENIĆ WYGLĄD GADŻETU OBSERWUJ PRZEZ E-MAIL

Teraz zajmiemy się gadżetem "szukaj" wpis, w którym pojawiła się ta instrukcja znajduje się tutaj JAK ZMIENIĆ WYGLĄD GADŻETU SZUKAJ

Teraz zajmiemy się etykietami, wpis na ten temat jest już na blogu, ale w tym wpisie wrzucę Wam nowszy kod ;)

Teraz zmienimy nasze archiwum, w tym celu skorzystamy z tego wpisu: JAK EDYTOWAĆ WYGLĄD ARCHIWUM - STYL HIERARCHIA

Edycja menu bloggera

Zakończyliśmy już zmieniać naszą kolumnę boczną i gadżety, teraz przejdziemy do edycji menu Bloggera.
Przechodzimy do akcenty i kolor obramowania kart zaznaczamy na "przezroczysty". Teraz przechodzimy do "tło kart" i tam również zaznaczamy wszystko na przezroczystość. Przechodzimy znowu do arkusza CSS i wklejamy kod (to jest właśnie ten drugi nowy kod).

Wyśrodkowanie nagłówka i usunięcia paska nawigacji

Pozostał ostatni element w edycji naszego szablonu, Wyśrodkowanie nagłówka i usunięcie paska nawigacji. Kod na wyśrodkowanie nagłówka przypomnimy sobie z poprzednich edycji "Zrób ze mną szablon na bloga".

Zapisujemy i przechodzimy do układ - pasek nawigacyjny (edytuj) - wyłączone - zapisz - zapisz rozmieszczenie

Efekt:

Czytaj dalej

blogosfera CSS Tutorial wpis

Prosty CSS - dwa style dla dat

W dzisiejszym wpisie pokażę Wam, jak w prosty sposób za pomocą CSS zmienić wygląd daty wpisu. Pokażę Wam dwa style, które są proste i idealnie wpasują się w każdy szablon.

Styl pierwszy

.date-header span {
background-color: #fff;
letter-spacing: 2px;
padding: 0 20px;
position: relative;
text-transform: uppercase;
top: -8px;
}
h2.date-header {
border-top: 1px solid #999;
font: 10px Open Sans;
letter-spacing: 2px;
text-align: center;
}

Analiza kodu

Tło daty
Odstępy między literami
Marginesy wewnętrzne
Styl tekstu (ustawiony na drukowane litery, wpisując none, pozbywamy się tego efektu)
Położenie daty (góra, dół)
Grubość, rodzaj i kolor podkreślenia
Rodzaj i wielkość fontu
Odstęp między literami
Położenie daty

Styl drugi

.date-header span {
background-color: #fff;
border: 1px solid #999;
letter-spacing: 2px;
padding: 10px 10px;
position: relative;
text-transform: uppercase;
top: -7px;
}
h2.date-header {
background: none repeat scroll 0 0 #999;
height: 1px;
font: 10px Open Sans;
text-align: center;
}

Analiza kodu

Kolor tła
Grubość, rodzaj, kolor obramowania daty
Odstęp pomiędzy literami
Marginesy wewnętrzne
Styl tekstu
Położenie daty (góra, dół)
Kolor linii
Grubość linii
Wielkość i rodzaj fontu
Położenie daty

Wszystkie pogrubione i kolorowe wartości są zmienne.

Czytaj dalej

blogosfera CSS wpis

Zrób ze mną szablon na bloga część 2

Zobacz pierwszą część
Pierwsza część tego wpisu przyjęła się bardzo dobrze, więc postanowiłam zrobić część drugą. Ta część od pierwsze będzie różniła się tym, że zrobimy sobie jeden szablon, a nie dwa. Na czym polega ta seria wpisów? Podaje Wam kody na zrobienie danego szablonu. Tak, podaje Wam najzwyczajniej w świecie gotowce. Dlaczego nie udostępniam tych szablonów do pobrania za darmo? Bo mimo wszystko jest to forma nauki, poznaje się kody, które dla niektórych mogły być nieznane i jednocześnie można je od razu zmodyfikować pod siebie, bez szukania CSSa w kodzie szablonu, tak jak to jest w przypadku szablonów do pobrania. Zaczynamy!

1. Na początek jako naszą bazę wybieramy sobie szablon Simple (prosty) biały. Od razu mówię, że od góry zakładam, że zdjęcia do wpisów będziemy wstawiać w oryginalnym rozmiarze. Na początek, mniej więcej nasz szablon będzie prezentował się tak:

1. Przechodzimy do układu - pasek nawigacyjny - edytuj - wyłączone - zapisz

2. Wracamy do szablon - układ - wybieramy sobie układ prawo lub lewo kolumnowy i rodzaj stopki. U mnie to wygląda tak:

3. Teraz musimy ustawić sobie szerokość naszego bloga. Przechodzimy więc do "Dostosuj ustawienia szerokości". Ja ustawiłam najbardziej optymalną czyli cały blog 1240px a kolumna boczna 330px

4. Wracamy do zaawansowane - dodaj arkusz CSS i wklejamy kody.

Pierwszy kod, jest na dopasowanie zdjęć do szpalty, bez ruszenia mniejszych zdjęć. Małe zdjęcia pozostaną małe.

.post-body img {
max-width:100%;
height: auto;}
.post-body .tr-caption-container {
padding: 0;}
.post-body .tr-caption-container img {
max-width: 100%;
height: auto;
margin-left: 0;
padding: 0;
display: block;
}

Teraz, dodajemy kod na usunięcie ramek i cienia zdjęć we wpisie, które w szablonie Simple są narzucane odgórnie.

.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;
}

Teraz zajmiemy się naszymi stronami. Przechodzimy do "tło kart" i zaznaczamy wszystko na przezroczyste. Następnie przechodzimy do "akcenty" i tam również wszystko zaznaczamy na przezroczyste. Przechodzimy do arkusza CSS i wklejamy tam taki kod:

#PageList1 ul {text-align: center;}
#PageList1 ul li {float: none; display: inline;}
#PageList1 {border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 10px;
letter-spacing: 2px;
text-transform: uppercase;}

Oczywiście kolor i rodzaj fontu (czcionki) ustawiamy w zakładce "tekst kart". U mnie w menu, font to Times New Roman.

Przechodzimy dalej. Teraz zajmiemy się wpisami. Tutaj pracujemy głównie w CSSie. Dodajemy kod:

.column-center-inner {text-align: justify;}
.post {font-family: Open Sans;
color: #444;
font-size: 12px;}
h3.post-title {text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Times New Roman;
font-size: 18px;}
h3.post-title a {
color: #000;}
h3.post-title a:hover {
color: #76a5af;}

Przechodzimy do "nagłówek z datą". Tam zmieniamy kolor tła na przezroczyste, a kolor tekstu na czarny, ciemno szary czy jaki tam chcecie. Odznaczamy pogrubienie. Wracamy do CSSa i dodajemy kod:

h2.date-header {text-align: center;
font-family: Times New Roman;
font-size: 10px;}

Przechodzimy do "stopka posta" i kolor tekstu zmieniamy na dowolny kolor, a kolor tła i cienia na przezroczyste. Przechodzimy do CSSa i dodajemy kod:

.post-footer { text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Open Sans;
font-size: 8px;
border-bottom: 1px solid #ddd;
padding: 10px;}

Przy okazji dodajemy efekt dla cytatów:

.post blockquote {
margin: 1em 20px;
}
.post-body blockquote {
line-height:21px;
background: #fff;
border: 1px solid #dadada;
padding:10px;
}

Oraz pozbywamy się tego co nam przeszkadza. Czyli kropek w pagerze bloga, "Subskrybuj: Posty (Atom)", "Technologia Blogger" i przerywanej linii w stopce bloga.

#blog-pager {background: transparent;}
.Attribution, .feed-links {display: none;}
.footer-outer {border: 1px solid transparent;}

Skoro już jesteśmy na dole naszego bloga, to dostosujemy sobie nasz Pager, wklejając kod:

#blog-pager a{display: inline-block;
color: #888;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 10px;
border: 1px solid #e5e5e5;
padding: 13px 15px;
font-weight: 700;
background-color:#ffffff;}

Skoro już mamy wszystko ogarnięte, to została nam kolumna boczna, a właściwie tytuły gadżetów. Tutaj również robimy wszystko za pomocą CSSa. Dodajemy kod:

.sidebar .widget h2, #Followers1 h2 {font-family: Times New Roman;
font-size: 15px;
letter-spacing: 2px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid #000;
padding: 2px;}

Pewnie zastanawiacie się, czemu zostało dopisane #Followers1 h2 - ten selektor odpowiada za nagłówek obserwatorów. Do niektórych gadżetów, trzeba dopisać selektor po przecinku, tak jak w kodzie powyżej np. #Text1 h2 - selektor dla tytułu gadżetu "Tekst".

Następnie dodajemy kod, na wyśrodkowanie nagłówka:

.header-inner .widget div, .header-inner img {
margin-left:auto;
margin-right:auto;
}

Zapisujemy szablon. Przedstawiłam Wam ogólny zarys szablonu jaki możecie zrobić. Poniżej są linki do wpisów z których możecie skorzystać przy dalszej modyfikacji. Nie wstawiłam ich tutaj, ponieważ nie chce powielać tego co już jest na blogu :)

Spis selektorów Lista instrukcji Grafika w nagłówku do pobrania w tym zestawie Zmień wygląd etykiet Zmień wygląd archiwum - hierarchia Zmień wygląd archiwum - menu

Czytaj dalej

blogosfera CSS wpis

Jak zrobić chowane-rozwijane archiwum na Bloggerze

W dzisiejszym wpisie mam dla Was kolejną instrukcję, która nie wymaga grzebania w kodzie HTML. Jest to kolejna krótka instrukcja, która pozwoli nam zmodyfikować wygląd naszego archiwum.

1. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy kod:

#ArchiveList ul > li > a.post-count-link {
font-size: 15px;
width: 100%;
margin: 0;
padding: 0 15px;
line-height: 34px;
background-color: #eee;
box-sizing: border-box;
letter-spacing: 1px;
}

#ArchiveList ul ul li a.post-count-link{
font-size: 15px;
letter-spacing: 2px;
width: auto;
margin: 0 5px 0;
padding: 10px 2px;
line-height: 1;
background: transparent;
text-transform: uppercase;
color: #444;
}

#ArchiveList .zippy{
visibility: hidden;
}

#ArchiveList ul li a.toggle {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
height: 38px;
z-index: 5;
}

#ArchiveList ul ul li a.toggle {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 24px;
display: block;
z-index: 0;
}

#ArchiveList .toggle {
position: relative;
}

#ArchiveList ul ul .zippy{
color: white;
visibility: visible;
text-shadow: none;
}

#ArchiveList ul li{
padding: 0 !important;
text-indent: 0 !important;
margin: 0 !important;
position: relative;
}

#ArchiveList ul .post-count-link {
padding: 10px 0;
display: inline-block;
margin: 0 5px 0;
}

#ArchiveList ul ul .posts li {
margin: 0px 10px 10px 10px !important;
text-transform: none;
}

#ArchiveList ul {
margin: 0 0 2px !important;
}

span.post-count {
display: none;
}

1A. Analiza kodu:

#ArchiveList ul > li > a.post-count-link {
font-size: 15px;
width: 100%;
margin: 0;
padding: 0 15px;
line-height: 34px;
background-color: #eee;
box-sizing: border-box;
letter-spacing: 1px;
}

#ArchiveList ul ul li a.post-count-link{
font-size: 15px;
letter-spacing: 2px;
width: auto;
margin: 0 5px 0;
padding: 10px 2px;
line-height: 1;
background: transparent;
text-transform: uppercase;
color: #444;
}

#ArchiveList .zippy{
visibility: hidden;
}

#ArchiveList ul li a.toggle {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
height: 38px;
z-index: 5;
}

#ArchiveList ul ul li a.toggle {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 24px;
display: block;
z-index: 0;
}

#ArchiveList .toggle {
position: relative;
}

#ArchiveList ul ul .zippy{
color: white;
visibility: visible;
text-shadow: none;
}

#ArchiveList ul li{
padding: 0 !important;
text-indent: 0 !important;
margin: 0 !important;
position: relative;
}

#ArchiveList ul .post-count-link {
padding: 10px 0;
display: inline-block;
margin: 0 5px 0;
}

#ArchiveList ul ul .posts li {
margin: 0px 10px 10px 10px !important;
text-transform: none;
}

#ArchiveList ul {
margin: 0 0 2px !important;
}

span.post-count {
display: none;
}

Nagłówek z datą

Wielkość fontu
Tło nagłówka
Odstęp między literami/cyframi

Nagłówki - miesiące

Wielkość fontu
Kolor

Efekt:

Czytaj dalej

blogosfera wpis

Szablon Pastel do pobrania za darmo na Bloggera

Szablon Pastel, jest to darmowy szablon na Bloggera w subtelnych pastelowych kolorach. Szablon można dostosować bez problemu do swoich potrzeb. Posiada łatwo edytowalny slider i układ wpisów kafelkowy.