Design-blogujemy

Hei kochani! Duża część z was a może nawet większość (osób czytających mojego bloga oczywiście) jest również blogerami/blogerkami. Więc pomyślałam, że raz na jakiś czas zdradzę wam kilka trików na 'podrasowanie' swojego bloga. Powiem wiem jakich kodów CSS używam, jak robię nagłówki itd. Na pierwszą myśl wydaję się być to trudne, a jednak wystarczy poświęcić trochę czasu, żeby 'odświeżyć' swojego bloga. Żeby rozchwiać wszelkie wątpliwości, zacznijmy! :)

♥ NAGŁÓWEK ♥

Nagłówek to wręcz priorytet na blogu. Wchodząc na bloga, jest to pierwsza rzecz jaką widzimy. Dlatego ja przywiązuję do tego ogromną wagę.
♥ Najpierw wchodzimy na bloga i robimy zrzut ekranu bloga. (aby nagłowek miał szerokość taką jak nasz blog).
♥ Otwieramy program paint i klikamy ctrl+v
♥ Zaznaczamy obszar naszego nagłówka bądź miejsca w którym chcemy żeby się znajdował. (ja wybrałam szerokość posta a wysokość w sumie to taką jaka wam się podoba. Ja nie chcę zmieniać nagłówka więc po prostu zaznaczyłam jego obecną wysokość).

(oczywiście używamy narzędzia do wycinania, ja narysowałam czerwony kwadrat, żeby wam to bardziej, pokazać).

♥ Kiedy nasz obszar będzie zaznaczony, ponownie klikamy ctrl+c

♥cofamy wszystkie nasze czynności w paint'cie, zmniejszamy jego pole do jak najmniejszego i wklejamy (ctrl+v)

♥ Wybieramy kwadrat oczywiście biały kolor w obydwu polach. Zaznaczamy opcję wypełnienie pełny kolor. I zamalowujemy całe pole.

♥Zapisujemy to w formacie png na pulpicie lub gdzie kolwiek.

♥ Następnie otwieramy program photoscape (do pobrania tu), klikamy edytor, i po lewej stronie pojawi nam się masa zdjęć i folderów, otwieramy folder w którym zapisaliśmy naszą 'pracę' klikamy na nią i do dzieła!

♥ Nagłówek może wyglądać jak nam się żywnie podoba, ale musimy wybrać do niego odpowiednie zdjęcia. Ja w nowym nagłówku użyłam moich, ale najczęściej biorę je z tąd.

♥ Jak widzicie czcionki na moich nagłówkach różnią się od tych standardowych. Nie ma co tego tłumaczyć. Tu macie wszystko krok po kroku. 

♥ Dodawanie zdjęć i tekstu na photoscape'ie jest dziecinnie proste. Na 'dole' programu mamy napisy takie jak Home, obiekt etc. Klikamy obiekt i tam wszystko mamy dokładnie 'wyrysowane'. Literka A oznacza tekst. Ta ikonka obrazka oznacza zdjęcie. A to podwojone 'A' to również tekst ale możemy wybrać kilka czcionek naraz w jednym wyrazie. Nie będę wam tego tłumaczyć bo po najechaniu na ten symbol myszką pojawi wam się krótkie wprowadzenie co do tej czynności.

♥ Z resztą zostawiam was samych. 

PAMIĘTAJCIE WSZYSTKO ZAPISUJEMY W FORMACIE PNG!

Blogger lubi 'podrasowywać' zdjęcia :)

♥KODY CSS♥

Drugą i kolejną ważną rzeczą w robieniu wyglądów są kody. Jest to czynność tak banalnie prosta, że każdy może być 'designer'em' haha, nic. Wystarczy wpisać w google "kod na..." np. podwyższenie paska bocznego. I tadam! Ja specjalnie dla was, żebyście nie musieli szukać tego godzinami (jak ja kiedyś) przedstawię wam kilka takich standardowych kodów.

Taka mała rada przed wstępem.

Nigdy nie bawcie się w szukanie czegoś w szablonie httml. Nie jest to tego warte. Zawsze są jakieś skróty i nie trzeba tam nic ruszać. Jedno 0 albo nawias za dużo i cały szablon nadaję się do 'śmieci'.

(wszystkie kody wpisujemy w szablon>dostosuj>zaawansowane>dodaj kod css)

Kod na podniesienie paska bocznego(pot.pasek z gadżetami obok nagłówka)

Jest to kod najczęściej 'szukany' przez blogerów. Z tego co zauważyłam.

Są na to dwa kody. Zależy z której strony na blogu znajduję się kolumna(pasek boczny).

right-prawo     left-lewo

.column-right-inner {margin: -90px 0px 0px 0px;}

.column-left-inner {margin: -90px 0px 0px 0px;}

-90 zamieniamy na np. -370, to zależy od nas, gdzie chcemy aby znalazła się kolumna. 

Podczas zmiany wysokości kolumny nagłówek również zmienia swoje położenie.

Tutaj macie kod na jego podniesienie lub obniżenie.

Przypominam zmieniamy wartości, sprawdzając czy nagłówek zmienił swoją wysokość.

.header { height: 550px;}

Następny kodem jest a raczej są wyśrodkowania. Nie będę tłumaczyć co to znaczy bo jest to raczej oczywiste, haha.

Wyśrodkowanie gadżetów w kolumnach.

przypominam! right-prawo    left-lewo

.column-left-inner {text-align: center; }

.column-right-inner {text-align: center; }

Wyśrodkowanie daty.

h2.date-header {text-align: center;}

Wyśrodkowanie tytułu postu.

h3.post-title {text-align: center;}

♥IKONY SPOŁECZNOŚCIOWE♥

Tutaj nic dodać nic ująć.

♥Zapraszam was tu.

♥Macie tam dokładną instrukcję co i jak.

---------------------------------------♥♥♥---------------------------------

W razie jakich kolwiek pytań i problemów piszcie w komentarzach! 

Postaram się na wszystko odpowiedzieć. :)

Za jakiś czas dodam więcej kodów, xoxo!