DROBNE ZMIANY #1 Kulturalne Maluchy

Jak usunąć ramki w menu, powiększyć zdjęcia, wyśrodkować nagłówek czy ozdobić pasek boczny? To wszystko w pierwszej odsłonie nowej serii "DROBNE ZMIANY".

Gdy w głowie świtał mi pomysł na "Drobne Zmiany", nawet przez myśl mi nie przeszło, że zainteresowanie będzie tak duże. Ba, bałam się, że nikt nie będzie chciał skorzystać! Teraz z kolei zastanawiam się jak to logistycznie ogarnąć. Nie chcę, żeby ta seria zawładnęła całym blogiem, z drugiej zaś strony chętnych jest naprawdę sporo (co bardzo mnie cieszy). I tu pytanie: wybierać blogi losowo, czy zgodnie z kolejnością komentarzy? 

Idąc za ciosem, dzisiaj pierwsza odsłona "Drobnych Zmian", w których chciałam pokazać na czym mniej więcej będą polegać. Nie będą to być może zmiany drastyczne, a jak wskazuje sama nazwa, drobne zmiany. Nie pomogę w rozwiązaniu większych indywidualnych problemów, nie zaprojektuję logo, ani nie napiszę jak przerobić szablon krok po kroku - takie rzeczy, z racji ograniczonego czasu, obecnie wykonuję tylko na zamówienie. Założeniem tej serii jest pomoc osobom, które kompletnie nie znają się na HTML-u i nie chcą (np. w obawie przed ew. szkodami) ruszać kodu szablonu oraz takim, którą chcą, by ktoś z zewnątrz podpowiedział co zaburza estetykę bloga. Sama niedawno pisałam o swoich estetycznych błędach, i jeśli dobrze się przyjrzysz, to zobaczysz, że naprawienie żadnego z nich nie wymagało specjalnych umiejętności. Często bywa tak, że usunięcie niepotrzebnych gadżetów, pierdołek, zmiana czcionki, kolorów, czy przesunięcie niektórych elementów potrafi diametralnie zmienić wygląd bloga. I właśnie w tym chcę pomóc. Wszystkie zmiany, które proponuję wystarczy wprowadzić w Projektancie Szablonów lub podczas edycji posta - nie ma obawy, że coś się zepsuje! Nie chcę jednak, żeby pożytek odniosła tylko autorka bloga, ale także TY, dlatego postaram się po kolei opisać jakie zmiany proponuję, i w jaki sposób je zastosować. Śmiało daj znać w komentarzu, czy tak forma jest przejrzysta - czasem bywa tak, że ja  wiem co robię, ale trudno mi to w prosty sposób przedstawić innym.

Na pierwszy ogień poszła Malwina, z którą poznałam się osobiście podczas spotkania MAYbeBeauty w Gdyni. Malwina prowadzi świetnego bloga Kulturalne Maluchy, w którym przedstawia pomysły na proste, ale jednocześnie bardzo rozwijające, zabawy z dzieckiem. Warto dodać, że autorka bloga z wykształcenia jest pedagogiem, a do tego pracuje w zawodzie. Z tego co widzę, Malwina korzysta obecnie z bloggerowego Prostego Szablonu (w projektancie Szablonów drugi od lewej) i nie wprowadzała za wiele zmian. Wielki plus za to, że gadżetów jest mało, dzięki czemu blog jest przejrzysty i czytelny. W sumie jeśli chodzi o estetykę prowadzenia bloga to uwag nie mam wiele, brakuje mi jedynie elementów, które by nieco spersonalizowały bloga.

Jakie zmiany proponuję?

 

MENU

Pierwsza rzecz, którą bym zmieniła to wygląd menu. Domyślnie wygląda średnio, a dzięki kilku kliknięciom można zmienić jego wygląd. Zacznijmy od usunięcia obramowania i szarego tła pod aktywną kartą. W tym celu wejdź w Projektanta Szablonów (Panel Bloga - Układ - Projektant Szablonów) - Zaawansowane - Tło Kart. Zamień oba kolory na "transparent" - dzięki temu usuniemy tło. 

Żeby pozbyć się obramowania wejdź w "Akcenty", i podobnie jak wyżej, zamień kolory na "trasparent".

Teraz czas na ustawienie kolorów w menu. Ja zaproponowałam zielony (#38c579), zaczerpnięty z logo, jako kolor, który pojawia się po najechaniu myszką i w aktywnych kartach.

 

Żeby dodać trochę atrakcyjności menu, wpadłam na pomysł by dodać ozdobną linię nad i pod menu, nieco odsuniemy je od nagłówka i okna postów oraz wyśrodkujemy. A zrobimy to dodając kod w miejscu "Dodaj arkusz CSS". Odpowiedzialny kod będzie wyglądał tak:

.tabs-inner {border-bottom:2px solid #38c579;border-top:3px solid #e6ce60;margin:20px 10px;text-transform:uppercase;}
 .PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

EFEKT:

 

LINKI

Żeby ujednolicić kolorystykę zmieniłabym kolory linków, na któryś z występujących w nagłówku, wybrałam ponownie zielony. Z kolei kolor odwiedzonego linku i po wskazaniu myszką zmieniłam na czarny, żeby nie było zbyt pstrokato.

 

DATA I TYTUŁ POSTA

By zmienić wygląd daty wejdź w zakładkę "Nagłówek z datą". Zmień kolor tła na "transparent", żeby pozbyć się szarego koloru. Zmieniłam też kolor tekstu na czarny i nieco zmniejszyłam wielkość.

Proponuję dodać podkreślenie samej daty, żeby w poście pojawił się delikatny akcent kolorystyczny.  Osiągniesz to przed dodanie kodu:

h2.date-header span {border-bottom:2px solid #e6ce60;}

Jeśli chodzi tytuł posta, proponowałabym zmienić litery na duże, oraz zmienić kolor. Automatycznie blogger nadaje tytułom postów kolor linków (które określiliśmy punkt wyżej). Wydaje mi się jednak, że lepiej będzie wyglądał nagłówek w kolorze czarnym, zmieniając się na żółty po najechaniu myszką. Osiągniemy to przez poniższy kod:

 h3.post-title a {color:#000;text-transform:uppercase;}
h3.post-title a:hover {color:#e6ce60;}

EFEKT:

 

STOPKA POSTA

Automatycznie stopka posta jest szara. Po raz kolejny usuniemy tło i kolor cienia, tym razem wchodząc w "Stopka posta".

Żeby jednak oddzielić posty od siebie, porponuję dodać podkreślenie, dzięki dodaniu jednego kodu:

 .post-footer {border-bottom:1px solid #e6ce60;}

 

ZDJĘCIA

Jeśli o same posty, bardzo podoba mi się, że Malwina zawsze wyrównuje tekst do lewej, dzieli tekst na akapity, a gdzie trzeba stosuje podtytuły - dzięki temu całość prezentuje się bardzo estetycznie. Jedyne do czego miałabym uwagi to zdjęcia. Według mnie najciekawiej prezentują się obrazy o takiej samej szerokości, i najlepiej duże. Proponuję zaznaczać w edycji posta zawsze ten sam wymiar, np. "bardzo duże", a jeszcze lepiej dopasować je wymiarem do szerokości posta. Jak to zrobić? Wystarczy dodać poniższy kod, a później w edycji posta zawsze zaznaczać "oryginalny rozmiar" (oczywiście trzeba pamiętać by zdjęcie wgrywane na serwer było przynajmniej takiej szerokości jak okno posta, inaczej wymiar maksymalny będzie taki jak zdjęcia):

.post-body img {max-width:100%;height:auto!important}

 

PASEK BOCZNY

Malwina ma mało gadżetów, dzięki czemu blog wygląda czytelnie. Możemy ozdobić tytuły gadżetów dodając kod:

.sidebar h2 {border-left:5px solid #e6ce60;padding: 10px 5px;background:#f2f2f2;text-transform:uppercase;}

EFEKT:

Dodatkowo pomyślałam, by nieco ożywić pasek boczny zmieniając wygląd etykiet. Malwina ma ich tylko kilka, więc można z nich stworzyć dodatkowe menu. W tym celu dodałam szare tło i ciemniejsze po najechaniu myszką, ustawiłam marginesy i zmieniłam litery na duże. Żeby to osiągnąć wystarczy dodać kod:

#Label1 li {background:#f1f1f1;margin:10px 0px 0 -15px;list-style-type: none;padding:10px;text-transform:uppercase;}
#Label1 li:hover {background:#ddd;}

EFEKT:

 

OKIENKO FACEBOOKA

Zauważyłam, że u Malwiny okienko facebooka nie działa, tzn. pojawia się tylko napis. Prawdopodobnie problem leży w tym, że w gadżecie HTML/JAVA wklejony został jeden kod, a  powinny być oba. Instrukcja jak dodać na bloga okienko likebox znajdziecie u blokotka.

Wygenerowany na facebooku kod, który powinien być wklejony w gadżecie HTML/JAVA wygląda tak:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.3&appId=572292896206005";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/kulturalnemaluchygdynia" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/kulturalnemaluchygdynia"><a href="https://www.facebook.com/kulturalnemaluchygdynia">Kulturalne Maluchy</a></blockquote></div></div>

NAGŁÓWEK

Ostatnią kosmetyczną zmianą niech będzie wyśrodkowanie nagłówka:

 #Header1 img {margin:0 auto!important}

Jak widzisz, wszystkie zmiany wystarczy wprowadzić w poszczególnych zakładkach Projektanta Szablonów, a całość zajmie nie więcej niż 10 minut. Oczywiście kolory można dopasować indywidualnie, ja pobrałam je z nagłówka bloga. Tutaj znajdziesz sporo symboli poszczególnych kolorów.  Żeby było łatwiej, jeśli Malwina chciałaby wprowadzić wszystkie zmiany, cały kod, który należy wprowadzić w zakładce "Dodaj arkusz CSS" wygląda tak:

.tabs-inner {border-bottom:2px solid #38c579;border-top:3px solid #e6ce60;margin:20px 10px;text-transform:uppercase;}
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

h3.post-title a {color:#000;text-transform:uppercase;}
h3.post-title a:hover {color:#e6ce60;}
h2.date-header span {border-bottom:2px solid #e6ce60;}

.post-body img {max-width:100%;height:auto!important}

.post-footer {border-bottom:1px solid #e6ce60;}
.sidebar h2 {border-left:5px solid #e6ce60;padding: 10px 5px;background:#f2f2f2;text-transform:uppercase;}
#Label1 li {background:#f1f1f1;margin:10px 0px 0 -15px;list-style-type: none;padding:10px;text-transform:uppercase;}
#Label1 li:hover {background:#ddd;}
#Header1 img {margin:0 auto!important}

Na koniec  wystarczy wcisnąć "ZASTOSUJ DO BLOGA"

A oto efekt końcowy PRZED i PO.

Śmiało daj znać, co sądzisz, a jeśli ci się podoba daj lajka lub podziel się!
Napisz też czy wszystko jest przestawione w sposób zrozumiały, czy może coś zmienić? Mam nadzieję, że nie tylko Malwina skorzysta z tych rad.

---

Jeśli też masz ochotę się zgłosić, zostaw w komentarz pod postem  DROBNE ZMIANY, czyli pomoc w upiększaniu bloga - zgłosisz się?