Wpis miał ukazać się wczoraj jednak pewna awaria, która zablokowała mnie na całe dwa dni i sprawiła, że nie miałam żadnego sposobu, aby dostać się do Internetu. Dzisiaj kolejny etap upiększania blogów. Z Waszych komentarzy wnioskuję, że kilka z Was dokonało zmian. Cieszę się ogromnie jak czytam, że to co robię komuś pomaga! Dzisiejsze tematy będę kontynuacją pierwszej części. Jak już zmienicie podstawowe parametry zaczniemy przechodzić do szczegółów, które przejrzysty blog zmienią w piękny przejrzysty blog:)
Ten wpis jest częścią cyklu: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
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
SZEROKOŚĆ BLOGA
Z tą ciężko dogodzić wszystkim. Wiele zależy od tego z czego korzystają nasi czytelnicy. Jeśli chcemy być przyjaźni dla większości urządzeń dobrze, aby całkowita szerokość nie przekraczała 1000 pikseli. Przy takim ustawieniu nasz blog powinien w całości mieścić się na ekranach właścicieli netbooków i iPadów.
Warto się zastanowić jednak, czy grupa naszych czytelników to rzeczywiście użytkownicy takiego sprzętu. W moim subiektywnym odczuciu u mnie nie ma zbyt wielu takich osób, ale wiem, że część z Was czyta mnie czasami na komórce. Przyjęłam więc założenie, że nawet niewielkie laptopy mają rozdzielczość przynajmniej 1280×800 pikseli. Dlatego całkowita szerokość mojego bloga to 1260 pikseli (musi zostać jeszcze miejsce na boczny pasek przewijania). Dla użytkowników telefonów udostępniłam wersję mobilną mojej strony, aby łatwiej było ją przeglądać. (Rozchodzi się o to, aby nie trzeba było przesuwać suwaka wzdłuż szerokości bloga, aby zobaczyć go całego. Korzystając czasami z małego laptopa dość często się z tym spotykam.)
Szerokość paska bocznego powinna być na tyle duża, aby zamieszczone w niej elementy były czytelne. U mnie jest to 340 pikseli, ale dodam, że to sporo i zazwyczaj wystarczy wartość między 200 a 280 pikseli. Zawartość paska bocznego natomiast to długi temat, który omówię w osobnym poście.
Jak sprawić, aby czytelnicy korzystający z komórki mieli do dyspozycji wersję mobilną?
Wystarczy wybrać „Szablon”, kliknąć w kółko zębate pod widokiem „Na komórkach” i zaznaczyć kropeczką „Tak, na urządzeniach przenośnych pokazuj szablon w wersji mobilnej”
Jak zmienić szerokość bloga i paska bocznego?
Wybieramy Szablon>Dostosuj>Dostosuj ustawienia szerokości i za pomocą suwaków ustawiamy pożądane wartości.
KATEGORIE
Dalsza część posta będzie m.in odpowiedzią na pytanie zadane ostatnio przez Joanne Dikl.
„jako propozycję tematów podam pasek ze stronami.Co zrobić, żeby go rozciągnąć na całą stronę. I jak to zrobić, aby np. okienko „Inspiracje” – pokazywało wszystkie wpisy z inspiracjami a okienko „przepisy” prowadziło do wszystkich przepisów kulinarnych. To coś jak etykiety – ale na górze pod banerem albo z boku;)”
Chodzi mi o kategorie widoczne zaraz pod banerem. Pomagają w nawigacji. Czytelnik szybko może zorientować się o czym piszemy, a jak jakaś kategoria go w szczególności zainteresuje to bez przegrzebywania całego bloga może przeczytać wszystkie posty z nią związane. Kategorie, które odsyłają do konkretnych postów to nic innego jak gadżet „etykiety” przeniesiony pod baner (wygląda wówczas inaczej niż umieszczony na pasku bocznym). W tym miejscu możemy też dodać strony statyczne, które wcześniej stworzymy, jednak wtedy zawartość każdej ze stron musimy w całości stworzyć od nowa. Z tego powodu strony radzę wykorzystać w innych celach.
Ważne jest, aby kategorii nie było dużo. Warto zastanowić się nad zgrupowaniem kilku w jedną jeśli mamy ich zbyt wiele. Jeśli do tej pory dodawałaś etykiety do postów to nie będziesz miała dużo pracy. Jeśli jednak masz zbyt wiele etykiet lub nie masz ich wcale pracy będzie trochę więcej.
Zanim przejdziesz do poniższych kroków weź kartkę i długopis. Zastanów się na jakie główne kategorie można pogrupować Twoje posty i wypisz je. Jeśli wypisałaś długą listę to pomyśl, które kategorie są do siebie podobne. Może „wypieki” i „gotowanie” wystarczy zamienić na „kulinaria”, a „łazienka”, „salon” i „przedpokój” na „wnętrza”?
Jak dodać etykiety do nowych postów?
Pisząc nowy post po prawej stronie możemy wybrać zakładkę etykiety. W tym miejscu po przecinku wpisujemy etykiety i zatwierdzamy klikając „Gotowe” Można w tym miejscu wprowadzić ograniczoną ilość znaków więc jeśli wpiszemy za wiele etykiet nie uda nam się zapisać zamian w poście.
Jak dodać etykiety do kilku istniejących postów jednocześnie?
Wyświetlamy listę wszystkich postów i „ptaszkiem” zaznaczamy posty do których chcemy dodać tą samą etykietę.
Klikamy w ikonkę etykiety. Rozwinie się lista już istniejących etykiet wraz z polem, które pozwala dodać nowe. Klikamy w etykietę, którą chcemy dodać do wybranych postów, bądź wpisujemy nazwę nowej i już. To wszystko!
Jak dodać kategorie pod banerem?
Układ>Dodaj gadżet>etykiety
Ustawiamy wszystko jak poniżej czyli wybieramy : „Wybrane etykiety”, „Lista” i klikamy „edytuj”. Zaznaczamy „ptaszkami” etykiety, które mają się wyświetlać, klikamy „gotowe”, a na końcu „Zapisz”.
Teraz wystarczy przeciągnąć gadżet „etykiety” pod baner i zapisać rozmieszczenie.
WYGLĄD KATEGORII
Jak już uporządkowałyście kategorie pod względem funkcjonalnym trzeba zadbać, aby wyglądały pięknie, co nie? O to przecież w tym wszystkim chodzi:)
O wyborze czcionki pisałam ostatnio, więc powtarzać się nie będę. Osobiście lubię, gdy wokół kategorii nie ma ramki i są one wyśrodkowane. Ważne jest to szczególnie, gdy kategorii mamy mało, wówczas grupują się nieładnie tylko z lewej stronie bloga. Tak więc po kolei.
Jak usunąć ramkę wokół kategorii?
Szablon>Dostosuj>Zaawansowane>Akcenty. Kolor obramowania kart wybieramy transparenty.
Jak zmienić kolor tła kategorii?
Użyjcie tej opcji jeśli chcecie wyróżnić kategorie lub zmienić ich tło na takie same jak tło tekstu. W większości sytuacji najlepiej będzie wyglądać takie samo tło.
Szablon>Dostosuj>Zaawansowane>Tło kart
Jak wyśrodkować kategorie?
Szablon>Dostosuj>Zaawansowane>Dodaj arkusz CSS
W okienku wklejamy poniższy kod i jak każdą zmianę zatwierdzamy klikając „Zastosuj do bloga”
.tabs-inner {text-align:center !important;}.tabs-inner .widget li{display:inline !important; float:none !important;}
Na dzisiaj to wszystko. Macie zadanie domowe, aby zrobić porządek z szerokością bloga, etykietami i kategoriami. Piszcze w komentarzach o czym chciałybyście przeczytać w kolejnych postach z tego cyklu. Od siebie napiszę, że w przygotowaniu mam dla Was post o tym co powinno znajdować się w pasku bocznym i jak te poszczególne elementy przygotować oraz tutorial, który krok po kroku przeprowadzi Was przez samodzielne stworzenie i zainstalowanie widgetu społecznościowego.
Jeśli korzystacie z moich rad to będzie mi miło jeśli podzielicie się tym zamieszczając u siebie poniższy banerek z linkiem do „Strefy Blogera” (link > http://zyj-kochaj-tworz.blogspot.com/p/strefa-blogera.html ). Może dzięki temu trafią tu też inne blogerki potrzebujące pomocy.
Więcej nt wyglądu bloga i blogowania znajdziesz w mojej STREFIE BLOGEREK
Nawet czytając ten post zamierzałam już napisać komentarz z prośbą o to, byś stworzyła jakiś fajny banner do wstawienia na bloga – i oto jest! 🙂
Bardzo czekam na ciąg dalszy cyklu i w sumie to żałuję, że nie zrobiłam screenshota bloga przed przemianami – wtedy byś się dopiero zdziwiła ile dobrego może zrobić taka garść przystępnie podanych informacji! 😀
Do szczęścia wystarczą mi Twoje zapewnienia, że jest lepiej:)
Rany jak Ty mi pomagasz w tej dziedzinie blogowania! Cieszę się że natrafiłam na Ciebie! Dziękuję za rady! Ja ze swojej strony to porszę o posta z tym jak zrobić fajne to logo takie jak np Ty masz ” Żyj, kochaj, twórz” z tym mam problem największy. Pozdrawiam i wpadnij do mnie!
O tym jak zrobić logo pisałam w pierwszej części. Nie ma gotowego przepisu, trzeba pokombinować, czasami poszukać inspiracji. Jednak jak wpadnę na pomysł jak ubrać to w jakieś ramy i klarownie wyłożyć to napiszę taki post. Dziękuję za sugestie – są one dla mnie bardzo ważne!
Karolino, bardzo przydatne, szczerze planowalam cos podobnego u siebie na blogu, ale chyba to przesune w czasie i wrzuce linka do Ciebie, pozdrawiam Beata
Hehe…Ty ostatnio też mi „podkradłaś” posta więc mój ukaże się dużo później:P
Kochana, a jak wyłączyć to „podświetlanie się” kart. Ja mam na szaro i wkurza mnie, bo wolałabym, aby tego nie było. Ustawiam gdzie się da transparentnie, a nazwy stron na blogu nadal podświetlają się na szaro. 🙁
Szablon>Dostosuj>Zaawansowane
Dalej zależy czy zmienia się tło czy kolor samego napisu.
Jeśli tło to wejdź w „tło kart” i ustaw ten sam kolor w „kolor tła” i „kolor po zaznaczeniu”.
Jeśli drażni Cię zmieniający się kolor czcionki (to jednak uważam za zaletę bo wtedy wiadomo, że kliknięcie nas gdzieś zaprowadzi) wówczas wybierz „tekst kart” i ustaw ten sam kolor w „kolor tekstu” i w „kolor po zaznaczeniu”
Karolino, czy ten kod na wyśrodkowanie na pewno jest ok?
Próbuję, kombinuję i nie działa mi 🙁
Czuję, że będę miała zarwaną nockę. Zabawa z blogiem trwa w najlepsze i serdecznie Ci dziękuję za temat kategorii – etykiet! 🙂
Nie, oczywiście coś mi wcięło:P Już powinno być ok. Sprawdź i powiedz czy działa.
Działaaa!!! Buziaki. Dziękuję.:)
Kurka, ale mi się teraz u Ciebie podoba!:P Całość nabiera fajnego wyglądu, kobieco i minimalistycznie:)
Zgadzam się, wygląd bloga pyszny! 🙂
Pięknie dziękuję. 🙂 Na razie trwa fascynacja czcionkami – każdy dzień ma inną czcionkę tekstu;)
Mam jeszcze trochę rzeczy do uporządkowania, m.in. cześć okienek po prawej no i wypadałoby zapisać się do portali społecznościowych, skoro tak ładne banerki + instrukcja 😉
Karolino, ja mam jeszcze jedno pytanie do Ciebie, jako speca;)
O datę przed tytułem.
Czy da się zrobić tak, abym miała samo „13.08.2014” zamiast „środa, 13 sierpnia”? Gdzie to się zmienia, skoro w ustawieniach zaawansowanych mam tylko możliwość zmiany koloru i rodzaju czcionki?
Ustawienia> Język i formatowanie> Format nagłówka daty
Wsio!:)
Dziękuję mistrzu! 🙂
Welcome back! Mam nadzieję, że wakacje się udały 🙂
Fajnie, Karola, że dzielisz się swoją wiedzą, dzięki! To bardzo cenne, bo Blogger, choć w większości intuicyjny, ma takie zakamarki, że można się pogubić 😉
Mój blog wciąż nie jest ogarnięty do końca, ale jakoś ostatnio nie mam weny, marazm jakiś czy cóś…
Przy okazji – nie wiesz przypadkiem jak pozbyć się spamerskich komentarzy od „Anonimowego” w obcym języku? Co prawda, nie wyświetlają się one pod postami na blogu, ale skutecznie zawalają skrzynkę.
Wakacje udane i jeszcze trwają, ale teraz w domowym zaciszu.
Z tego co wiem to pomóc może tylko weryfikacja obrazkowa, ale to z kolei utrudni życie też Twoim prawdziwym czytelnikom.
No właśnie… Myślałam, że istnieje jakiś inny, magiczny sposób 😉
Witaj Karolinko! Twoje posty są baaardzo przydatne i pomocne! Mam pytanko-jak wyśrodkować baner główny bloga z tytułem,bo własnie sobie pokombinowałam i zrobiłam nowy ale nie wiem jak go wyśrodkować ;p
Osobiście preferuję wykonanie banera o takiej samej szerokości co całkowita szerokość bloga. Jeśli jednak zdecydowałaś się na mniejszy to:
Szablon>Dostosuj>Zaawansowane>Dodaj arkusz CSS i wprowadź poniższy kod:
#header-inner {text-align: center;}
#header-inner img {margin: 0 auto; }
Na koniec zapiss zmiany. Jeszcze przed zapisaniem w podglądzie powinnaś widzieć efekt.
Ok,dzięki,zaraz popróbuję 🙂
Bardzo pomocny post:) Będę do Ciebie wracać:)
Cieszy mnie to ogromnie!!! W poniedziałek ciąg dalszy!
Super rady 🙂
Na dodanie etykiet w menu znam jeszcze inny sposób 🙂
Szerokość dzięki Tobie mam teraz odpowiednią , bo miałam ciut za dużą 🙂
Jej, jak Ty to wszystko świetnie tłumaczysz! Wiele skorzystałam z Twoich postów:)
Mam jeszcze jedno pytanie odnośnie tych stron statycznych, np kontakt, o mnie itp, jak się do tego zabrać, żeby wszytko wyszło ładnie?:) Pozdrawiam
Strony tworzy się podobnie jak posty. Dobierz czytelną czcionkę. Istotne rzeczy możesz pogrubić. Warto wyjustować tekst i zadbać o akapity. Lepiej się czyta jeśli tekst jest podzielony. Można się też pokusić o grafiki banerki.
Cudnie ;D Kiedyś bardzo długo nad tym siedziałam, że to ogarnąć. A tu proszę. Podane jak na tacy 😉
Ja też bardzo dziękuję za wiele cennych wskazówek! Od razu wcielam je w życie, ale muszę stopniowo, bo inaczej nie będę spać ze trzy noce… Widzę, że nazwy samych etykiet piszesz małymi literami. A jak uzyskać efekt liter drukowanych w nagłówku bloga, pod banerem? Dzięki!
Jeśli pytasz o moje kategorie z etykiet pod banerem takie jak DIY, INSPIRACJE itp, to tylko kwestia czcionki, w moim przypadku SYNCOPATE. Niestety niedawno google przestało wspierać polskie znaki dla tej czcionki :/
Dziękuję za świetny kurs 🙂
Mam jeszcze pytanie odnośnie szerokości tekstu w postach. Chciałabym, aby był określonej szerokości – około 800px. Niestety, gdy próbuję ustawiać szerokości w szablonie wszystko mi się rozjeżdża. Czy mogę wpisać gdzieś w arkuszu CSS lub w HTML szerokość kolumny tekstu?
Nie podam Ci niestety prostej odpowiedzi, ale może pomogę mimo wszystko. Ostatnio szukałam jak zwęzić główną kolumnę nie zmieniając przy tym całej szerokości bloga.
W kodzie wyszukałam type=’length’
Znalazłam taki fragment kodu ( w kodzie każda linia jest w nawiasach <>, ale musiałam je usunąć, aby kod się wyświetlił komentarzu)
b:variable default=’960px’ name=’content.width’ type=’length’ value=’1250px’/
b:variable default=’0′ name=’main.column.left.width’ type=’length’ value=’280px’/
b:variable default=’310px’ name=’main.column.right.width’ type=’length’ value=’0px’/
Zmieniając wartość na końcu ostatniej linii z 0px na 20px udało mi się o tyle zwęzić główną kolumnę 0 20 pikseli – tyle mi trzeba było. U Ciebie może to wyglądać inaczej (ten fragment kodu pochodzi z szablonu w który boczna kolumna jest po lewej).
Zanim zaczniesz próbować zrób kopię szablony i korzystając z podglądu spróbuj uzyskać pożądaną szerokość.
Jeśli powyższa odpowiedź Ci jednak nie pomogła to napisz dlaczego, chcesz ustawić taką a nie inną szerokość to może znajdziemy inne rozwiązanie.
Dziękuję – znalazłam ten fragment dzięki Tobie 🙂 Jednak takie przesuwanie 'kolumnowe’ działa też na położenie zdjęć, bo zmianie ulega cała część bloga z wpisami. Poddaję się 😉
Będę zamieszczać zdjęcia o szer.900px tak, jak to robiłam do niedawana – wtedy tekst tworzy z nimi prawie jednolitą całość. I wygląda to w miarę czytelnie i estetycznie – chyba 😉
Chociaż najbardziej podoba mi się ułożenie całości, gdy zdjęcia mają 800px, tj. w tym wpisie http://kattastudio.blogspot.com/2014/08/z-pamietnika-ogrodnika-sierpien.html
Tylko tekst jest za szeroki.
Mam nadzieję,że nie namieszałam.
Co masz na myśli, że działa na położenie zdjęć? Może da się coś zaradzić? Chodzi o to, że wcześniej miałaś szersze zdjęcia i po zwężeniu wystają?
Tak, przez jakiś czas dodawałam zdjęcia o szer. 900px i manewrowanie bocznymi kolumnami, aby uzyskać pożądaną szerokość 'środkowej kolumny’ powoduje wystawanie tych zdjęć w starych wpisach.
Dlatego chciałabym móc wpłynąć tylko na szerokość teksu we wpisach, aby utrzymany był na 800px.
Jest taki myk, który pozwala zmniejszyć wszystkie za duże zdjęcia blogu do rozmiaru kolumny z tekstem lub mniejszego. Pisałam o nim w moim pierwszym wydaniu newslettera. Jeśli chcesz to w pisz się na niego (boczna kolumna), a prześlę Ci go. Może to pomoże.
Wyjeżdżam teraz na 2 tygodnie – do remontowania bloga wezmę się ponownie po powrocie.
Dziękuję za pomoc – z pewnością będę Cię jeszcze męczyć pytaniami 🙂
No i wreszcie wiem, jak to zrobić, żeby wyśrodkować etykiety! Dziękuję za kod. Chciałabym się jeszcze dowiedzieć, jak to zrobić, żeby po naciśnięciu na konkretną etykietę nie wyświetlał się komunikat, który informuje o wyświetlaniu postów dla tej etykiety. Może masz na to sposób?
Sposobu jeszcze nie mam, ale zbadam temat: bo rzeczywiście ten komunikat piękny nie jest) Dopiszę do listy tematów dla wpisu Blog Design #5
Łaaa!!! Dzięki za instrukcję zmiany wyglądu kategorii 🙂
ratujesz mi życie, szukałam tego wszędzie
Walczę z szerokością i krew mnie zalewa! mam 1140×300 i na operze ok, na chrome ok, ale zakichane IE powoduje rozjazd strony niby tylko 3% moich czytelników korzysta z tej przeglądarki ale i tak mnie to wkwurza…, że wszędzie inaczej..
Tak to niestety jest. Każda przeglądarka nieco inaczej wyświetla.
Nie rozumiem dlaczego, ale u mnie nie da się zmienić wyglądu kategorii. Także mam je na górze strony. Kategoriami są wybrane etykiety postów. O ile wyśrodkować je udało się, o tyle zmienić koloru na transparentny, jak i żaden inny nie można. 🙁 A tak chciałabym pozbyć się tej szarości. 🙁
Karolinko, mam pytanie. Czemu wpisując kod CSS i zapisaniu, nie mogę wypośrodkować kategorii.
Kod niby się zapisuje, ale nie ładuje na stronie tzn. brak wypośrodkowania. Kiedyś próbowałam zrobić podpis na końcu strony przy użyciu CSS i też mi się udało. O co chodzi? pozdrawiam i z góry dzięki za pomoc.
Nie wiem co jest przyczyną, ale chyba wiem jak ten problem ominąć. Najpierw jednak zrób kopię szablonu, gdyby coś poszło nie tak. SZABLON>EDYTUJ KOD HTML. W kodzie znajdź //]]> i pod spodem wklej kod, który wklejałaś w polu do dodawania arkusza CSS.
Są metody, które pozwalają przygotować stronę na wiele rozdzielczości ekranu, dzięki temu nie ma znaczenia czy ktoś wyświetli witrynę na telewizorze, laptopie, tablecie lub komórce.
Te sposoby dotyczą też bloggerowych szablonów?
jasne, zobacz sobie szablon na jestemkasia czy ekskluzywnymenel, oba blogi są na blogspot :=)
kategorie wyśrodkowane – dziękuję Ci :*
http://stylzyciakaro.blogspot.com
jesteś niesamowita, już nie potrzebuję gotowego szablonu, dzięki Tobie sama zmieniam mój blog 🙂
Ciesze się ogromnie!:)
Ciekawie zrobiony
tutorial. Ja już niestety nie prowadzę bloga bo nie mogłem sobie pozwolić
czasowo na tego typu aktywność. Nie zerwałem jednak całkowicie z siecią (chyba
niemożliwie nie?) i mam stronkę 😛 korzystałem z kreatora www http://www.nazwa.pl/kreator-www/ ale jest spoko, nie znam się po prostu na HTML i CSS). Trochę mi
szkoda, że nie mogę już planować i tworzyć postów tak jak kiedyś a Twój dał
pomysł na kilka ciekawych koncepcji odnośnie zagospodarowania przestrzeni i
personalizowania całego bloga. Fajnie, dzięki :). Może jeszcze coś kiedyś popiszę,
nie ukrywam że naszła mnie ochota. Blog ciągle istnieje 🙂
Witam:) Wiem, że dawno temu pisała Pani o kartach/etykietach ale może ma Pani jeszcze chwilkę by poświęcić temu tematowi czas 🙂 Chciałabym aby moje etykiety pod nagłówkiem zamiast w obramowaniu były oddzielone „/” lub znajdowały się pomiędzy dwoma kreskami jak u Pani. Nie mam pojęcia jak to zrobić 🙁 Zna Pani jaki prosty sposób na to? Będę bardzo wdzięczna za podpowiedź.