Blog design #4 - POSTY

To już czwarta część. Dajecie radę? Nie zanudzam? Dzisiaj skupię się na sercu bloga, czyli postach. Omówię najważniejsze zasady dotyczące ich tworzenia. Stosując je Wasze wpisy będą piękne i czytelne.

BLOG DESIGN #1 - PODSTAWOWE ZASADY
BLOG DESIGN #2 - PODSTAWOWE ZASADY cd.
BLOG DESIGN #3 - BOCZNA KOLUMNA
BLOG DESIGN #4 - PIĘKNE POSTY
BLOG DESIGN #5 - ODPOWIEDZI NA WASZE PYTANIA
BLOG DESIGN #6 - STOPKA POSTA

------------------------------------------------------------------------------------------------

TYTUŁ POSTA

Tworząc tytuł warto wybrać w miarę zwięzły i oddający treść posta. Można też spróbować zaintrygować czytelnika, bądź zadać w nim pytanie na które zamierzamy odpowiedzieć w treści. W kwestii wyglądu tytułu to osobiście preferuję te wyśrodkowane. Blogger sam z siebie nie daje nam takiej opcji, ale łatwo sobie z tym poradzić.

Jak wyśrodkować tytuł posta?

SZABLON>EDYTUJ KOD HTML
Umieszczamy kursor w dowolnym miejscu kodu i wciskamy jednocześnie CTRL i F. Pojawi się okienko wyszukiwania. Ciąg dalszy może odbyć się na dwa sposoby. Jeśli nie znajdziecie kodu z pierwszego sposobu, bądź nie zadziała spróbujcie drugiego.

PIERWSZY SPOSÓB
Za pomocą okienka wyszukiwania znajdź:

h3.post-title {

Dokładnie pod tym fragmentem kodu wklej:

text-align: center;

DRUGI SPOSÓB
Za pomocą okienka wyszukiwania znajdź:

/* Posts
----------------------------------------------- */

I pod spodem wklej:

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

DATA

Przy tym punkcie nie będę się specjalnie uzewnętrzniać. Jeśli zdecydowałyście się wyśrodkować tytuł posta wyśrodkujcie też datę. Możecie też pokusić się o zmianę formatu daty, jeśli obecny z jakiegoś powodu Wam nie odpowiada.

Jak wyśrodkować datę posta?

SZABLON>DOSTOSUJ>ZAAWANSOWANE>DODAJ ARKUSZ CSS
W okienku wklejamy:

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

Jak zmienić format daty posta? 

W tym przypadku będzie łatwiej , nie trzeba grzebać się w kodach. Wystarczy wejść w USTAWIENIA>JĘZYK I FORMATOWANIE i w formacie nagłówka daty z listy rozwijanej wybierać ten, który Wam odpowiada.

TEKST

Wiecie już jak wybrać czcionkę i gdzie ją zmienić. Musicie wiedzieć, że są jeszcze inne ważne elementy związane z tekstem.

WYJUSTOWANIE

Wyjustowanie tekstu to nic innego jak wyrównanie go do lewej i prawej krawędzi jednocześnie. Tak sformatowany tekst dobrze się czyta, a dodatkowo wprowadza wrażenie uporządkowania. Jeśli widzicie, że jakiś fragment u mnie wyjustowany nie jest to w większości znaczy, że poległam w walce z bloggerem, który psikusy czasami płata. Od reguły są oczywiście wyjątki i czasami zasadnym jest wyśrodkowanie jakiegoś fragmentu, ale dla ogółu tekstu warto trzymać się wyjustowania.

Zerknijcie na różnicę między tekstem wyrównanym do lewej, a tym wyjustowanym.

Jak wyjustować tekst w poście?

W trybie edycji posta należy zaznaczyć fragment tekstu i z belki wybrać ikonkę wyjustowania.

AKAPITY

Jeśli Wasz wpis ma więcej niż kilka zdań warto podzielić go na akapity. Czytelnik widząc "ścianę tekstu" może poczuć się przytłoczony i z góry zniechęcony do lektury. Podzielenie go na mniejsze bloki sprawi, że wyda się przystępniejszy.

WYRÓŻNIENIA

Wypunktowanie lub nadanie podtytułów poszczególnym fragmentom wpisu pozwoli czytelnikowi na szybki rzut oka i zrewidowanie o czym w zasadzie piszemy. Dodatkowo porządkuje wpis i sprawia, że łatwiej go "strawić". Wyobraźcie sobie ten post napisany jednym ciągiem - nie fajnie, co? Jeśli charakter danego wpisu sprawia, że dodawanie do niego podtytułów byłoby sztucznym zabiegiem zadbajcie chociaż o pogrubienie kluczowych słów oddających najlepiej treść wpisu.

ZDJĘCIA

Zacznę od tego, że zdjęcia są bardzo istotną częścią bloga, szczególnie jeśli jest to blog kreatywny. W pierwszej kolejności należy zadbać o ich jakość. Z tego powodu zachęcam Was do szczegółowego zapoznania się z instrukcją aparatu. Zastanówcie się nad kompozycją, wybierzcie porę dnia w której będziecie mogły skorzystać z optymalnej ilości światła dziennego. (Swoją drogą interesują Was porady dotyczące robienia zdjęć na bloga?)

Zdjęcia na blogu powinny być zawsze tej samej szerokości. Podobnie jak wyjustowanie tekstu wpływa to na wrażenie uporządkowania. Dzięki temu prostemu zabiegowi blog będzie wyglądał bardziej profesjonalnie. Polecam Wam szerokość od 600 do 720 pikseli (wysokość może być różna). Jeśli lubicie czysty i prosty wygląd warto też usunąć ramkę/cień wokół zdjęć.

Jak zmienić szerokość zdjęcia?

Umożliwia to większość programów do obróbki zdjęć, ale będę Was zachęcać do picmonkey.com bo nie trzeba nic instalować i dodatkowo możecie za jego pomocą wyczarować fajne efekty na Waszych zdjęciach za pomocą kilku kliknięć.

Na stronie głównej wybieramy "Touch up" i ładujmy swoje zdjęcie z komputera

Następnie po lewej klikamy w znaczek kadrowania i z listy wybieramy "Resize"

Wprowadzamy szerokość w pikselach (czyli od 600 - 720 px w zależności jak szeroką mamy kolumnę z postami). Pamiętajcie, aby nie odznaczać opcji "Keep proporotions" bo dzięki niej długość drugiego bloku odpowiednio się dopasuje. Klikamy "Apply" i "Save", aby zapisać na swoim komputerze pomniejszone zdjęcie.

Jak radzić sobie z pionowymi zdjęciami?

Zamieszczenie pionowego zdjęcia, którego krótsza krawędź będzie szerokości jaką sobie wyznaczyłyśmy dla zdjęć na blogu sprawi, że zdjęcie będzie za duże. Nie może być tak, że nie zmieści się w całości na ekranie. Jest na to prosty sposób. Pionowe zdjęcia warto parować. Połączcie je jednak w programie zamiast parować dopiero w oknie edycji posta bo czasami może to przyprawić o ból głowy. Jeśli nie mamy drugiego pionowego zdjęcia do pary można ratować się dodaniem po jednej stronie opisu. Przykłady pionowych sparowanych zdjęć możecie zobaczyć np w poście o moim przedpokoju, połączenie zdjęcia z jego opisem np. w poście o placuszkach owsianych.

Jak dodać zdjęcia, aby zawsze były tej samej szerokości?

Mając zdjęcia o odpowiedniej szerokości trzeba jeszcze wiedzieć co zrobić z nimi po dodaniu do posta, aby w takiej własnie szerokości się wyświetlały. Klikamy na zdjęcie i z menu, które się wówczas pokaże wybieramy "Oryginalny rozmiar". Przy tej okazji warto je również wyśrodkować.

Jak usunąć ramkę/ cień wokół zdjęcia?

Cień ten jest dość subtelny, ale ja lubię, gdy jest jak najmniej takich ozdobników. Aby się go pozbyć podążamy następującą ścieżką: SZABLON>DOSTOSUJ>ZAAWANSOWANE>DODAJ ARKUSZ CSS.  W okienku doklejamy:

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

ZAWIJANIE TEKSTU

Opcja dobrowolna. Same zdecydujcie czy chcecie ją stosować. W moim odczuciu warto, ponieważ dzięki temu strona główna bloga staje się bardziej czytelna. Co kryje się jednak pod tą tajemniczą nazwą? Chodzi o opcję, która sprawia, że na stronie głównej widać tylko początek posta i aby przeczytać resztę trzeba kliknąć w "Czytaj dalej" lub coś podobnego.

Jak dodać zawijanie tekstu do posta?

To bardzo proste, jednak jeśli jeszcze tego nie używałyście, a chciałybyście wprowadzić na całym blogu to musicie wiedzieć, że trzeba to zmienić w każdym poście osobno.

PODPIS

Warto go dodać jeśli chcecie zawsze w ten sam sposób żegnać czytelników. Może być to zwykły tekst lub zdjęcie. Dzięki jednorazowemu zdefiniowaniu podpisu, będzie się on dodawał  automatycznie do każdego nowego posta. Ja aktualnie na stałe dodałam widget społecznościowy, aby nie robić tego pisząc każdy kolejny post.

Jak dodać podpis?

Jeśli będzie to tylko tekst to nic wcześniej przygotowywać nie musicie. Jeśli chcecie wstawić zdjęcie to wcześniej trzeba jest wgrać w miejsce w którym będzie przechowywane w Internecie. Dla mnie najprościej jest dodać je do albumów google. Jeśli zdjęcie jest już wgrane należy skopiować adres URL obrazka.

Przechodzimy teraz do bloggera i podążamy ścieżką: USTAWIENIA>POSTY I KOMENTARZE. W okienku "Szablon posta" umieszczamy to co ma być stałą częścią naszych nowych wpisów. Jeśli ma być to tylko tekst wystarczy, że go wpiszesz. W reszcie przypadków trzeba użyć tagów HTML.

DODANIE OBRAZKA:

<img src="ADRES URL OBRAZKA">

DODANIE LINKU

<a href="ADRES LINKU">WIDOCZNY PODLINKOWANY TEKST</A>

przykład (link do mojego bloga)
<a href="http://zyj-kochaj-tworz.blogspot.com>Żyj Kochaj Twórz</a>
będzie widoczny w następujący sposób:
Żyj Kochaj Twórz

Jeśli chcecie dodać do posta widget społecznościowy wystarczy cały jego kod wkleić do okna. Widgety do pobrania tu.

-----------------------------------------------------------------------------------------------

Jeśli korzystasz z moich rad sprawisz mi ogromną przyjemność wspominając o tym u siebie, bądź zamieszczając powyższy banerek podlinkowany do STREFY BLOGEREK (link--> http://zyj-kochaj-tworz.blogspot.com/p/strefa-blogera.html)

Jak już pisałam na facebook'u planuję stworzyć newsletter z nowościami blogowymi, dodatkowymi poradami z aktualnie trwającego cyklu i prezentami. Na pasku bocznym pojawił się formularz - wystarczy się zapisać, aby dostać pierwszy newsletter jak tylko się pojawi!

Tym z Was, które dotarły do końca tego przydługiego wpisu zdradzę, że w tę środę ogłoszę konkurs dla blogerek, które chcą mieć piękne blogi. Organizuję go z kimś kogo większość z Was pewnie zna, a nagroda będzie zacna, więc wpadajcie koniecznie! ŚRODA! Zanotowane?:) Mimo, że wpis z ogłoszeniem konkursu mam przygotowany to ze względów organizacyjnych może ukazać się on później niż o 8:30 - o wszystkim będę na bieżąco informować na facebook'u. 

Chcesz więcej? Skocz do 6-tej części blog design - stopka posta.

Jeśli podoba Ci się ten wpis podziel się nim i/lub śledź mnie, aby być na bieżąco.