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

blogosfera wpis

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.

.post-body img, .column-right-inner img {border: 0 !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; padding: 0px !important; background: none !important; }

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 ;)

.post-body img { max-width:100%; height: auto; margin-left: 0; padding:0px; } .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; }

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:


.readmore a, #blog-pager-post a { background: #2f2f3c; color: #fff; text-transform: uppercase; font-family: Open Sans; font-weight: 100; font-size: 10px; letter-spacing: 2px; padding: 10px 30px; display: block; max-width: 500px; margin: 10px auto; } .readmore a:hover, #blog-pager-post a:hover { background: #e96446; color: #fff; text-transform: uppercase; font-family: Open Sans; font-weight: 100; font-size: 10px; letter-spacing: 2px; padding: 10px 30px; display: block; max-width: 500px; margin: 10px auto; }

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

.Attribution, .feed-links {display: none;}

Zastosuj do bloga

Pager bloga

#blog-pager {background: transparent; text-transform: uppercase; font-weight: 700; font-family: Open Sans; font-size: 15px;} .footer-outer {border-top: solid 1px transparent;}

Zastosuj do bloga

11. Ustawienia ogólne

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

body {font-family: Open Sans; color: #444; font-size: 13px; text-align: justify;}

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

a:hover {text-decoration: none;}

12. Posty

Ustawienia daty i tytułu wpisu

Data

h2.date-header {letter-spacing: 2px; text-transform: uppercase; font-family: Open Sans; font-size: 8px; text-align: center; font-weight: 300; top: -1px; padding: 0px;}

Tytuł wpisu

h3.post-title { padding: 10px; color: #000; text-transform: none; font-family: Playfair Display; font-size: 25px; text-align: center; font-weight: 400;} h3.post-title a { font: 25px 'Playfair Display'; font-weight: 400; text-transform: none; color: #000!important; padding: 10px!important; margin-left: -10px; text-align: center; } h3.post-title a:hover { font: 25px 'Playfair Display'; text-transform: none; padding: 10px!important; margin-left: -10px; text-align: center; font-weight: 400; color: #e96446 !important; }

Stopka posta

.post-footer { color: #666666; text-transform: uppercase; border-bottom: 0px; font-size: 11px; letter-spacing: 1px; }

Zastosuj do bloga

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

Cytaty

blockquote { background: #eee; color: #666666; position:relative; font-size:90%; padding:20px; border-top: solid 10px #e96446; }


Przejdź do wpisu z tym kodem
Komentarze

.comment-header { font-family: Open Sans; letter-spacing: 1px; font-weight: 400; font-size: 10px; text-transform: uppercase;} .comment-header a:link {color: #2f2f3c;} .comment-header a:visited {color: #e96446;} .comments h4 { text-align: center; padding: 10px; color: #444; text-transform: uppercase; font-size: 20px; letter-sapcing: 3px; font-family: Open Sans; font-weight: 700;} .comment p { color: #444; font-size: 12px; font-family: Open Sans; } .comments .comment .comment-actions a, .comments .thread-toggle a { background: #2f2f3c; font-size: 8px; padding: 5px; margin: 5px 5px; font-family: Open Sans; color: #fff; text-transform: uppercase;} .comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover { background: #e96446; font-size: 8px; padding: 5px; margin: 5px 5px; font-family: Open Sans; color: #fff; text-transform: uppercase;}


Przejdź do wpisu z tym kodem Zastosuj do bloga

14. Kolumna boczna

Tytuły gadżetów

.sidebar .widget h2, #BlogArchive1 h2, #PopularPosts1 h2, #FollowByEmail1 h2{ text-align: center; text-transform: none; letter-spacing: 1px; font-family: Playfair Display; font-weight: 200; font-size: 18px;}

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

.FollowByEmail .follow-by-email-inner .follow-by-email-address { height: 40px; font: 10px Open Sans; text-transform: uppercase; color: #000 !important; width: 280px; margin: 20px 10px 10px; text-align:center; border: 1px solid #f5f5f5; letter-spacing: 1px; } .FollowByEmail .follow-by-email-inner .follow-by-email-submit { width: 53px; color:#ffffff; background-color: #2f2f3c; font: 12px Open Sans; text-transform: uppercase; letter-spacing: 2px; height: 42px; margin: 0 10px 20px; width: 280px; } .follow-by-email-inner .follow-by-email-submit:hover { background: #e96446; color:#ffffff; } .follow-by-email-inner td{ display: block; width: 100%; } .follow-by-email-inner tr{ background-color:#FAFAFA; }

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

.archivedate {text-transform: uppercase;} .archivedate a:link {color: #2f2f3c;} .widget .zippy { color: #2f2f3c; font-size: 10px; text-shadow: none; }

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.

.tabs-outer{ position:fixed; top:0px; left:0px; width:100%; z-index:10; border-bottom:1px solid #888; background: #fff; } .tabs-inner, .tabs-inner > .section{ padding: 0 !important; margin: 0 !important; } .tabs-inner .widget ul { text-align:center; padding-bottom: 13px; padding-top:11px; margin: 0 auto; } .tabs-inner .widget li { float:none; display:inline-block; zoom:1; } .tabs-inner .widget li:last-child:after{ content: ""; } .tabs-inner .widget li a { display: inline-block; padding: .2em 4em; font: 11px Open Sans; color: #444; text-transform: uppercase; letter-spacing: 3px; } .tabs-inner .widget li:first-child a { } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #e96446; background-color: transparent; text-decoration: none; }

Zastosuj do bloga

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

Wyśrodkowanie nagłówka

.header-inner .widget div, .header-inner img { margin-left:auto; margin-right:auto; padding-bottom: 10px; padding-top: 80px; }

Grafika na górze bloga

.header-outer { background: url(LINK DO GRAFIKI) no-repeat; height: 250px; background-position: center; padding-top: 10px; }

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

Plany lekcji do pobrania za darmo

grafika grafika do pobrania plany lekcji wpis

Plany lekcji do pobrania za darmo

Kolejne wakacje zbliżają się ku końcowi, a to oznacza, że czas na kolejną edycję darmowych planów lekcji. Jest to już 5 edycja i mam nadzieję, że będzie się cieszyć tak samo dużym zainteresowaniem, jak 4 poprzednie :)

W tegorocznej edycji planów lekcji, znajdziecie 3 motywy - dwa z motywami wakacyjnymi oraz jeden z motywem kwiatowym, minimalistycznym i bardzo subtelnym.

Każdy z planów jest dostępny w opcji poziomej i pionowej.

Jeśli czujecie niedosyt i chcielibyście więcej planów lekcji do wyboru, to zapraszam was do poprzednich edycji, gdzie w sumie czeka na Was 22 różnych motywów :)

Plany lekcji - edycja 2018 Plany lekcji - edycja 2017 Plany lekcji - edycja 2016 Plany lekcji - edycja 2015

Pobierz plan poziomy Pobierz plan pionowy

Pobierz plan poziomy Pobierz plan pionowy

Pobierz plan poziomy Pobierz plan pionowy

Plany lekcji są gotowe do druku, wystarczy kliknąć i pobrać.

Informacje o pobieraniu

• Pliki można drukować na dowolnym papierze i na dowolnej drukarce. 
• Pliki w formacie PDF

Zasady pobierania 

• Pliki można pobierać na własny użytek
• Jeśli chcesz się podzielić planami - nie kopiuj, udostępnij link :) 
• Plany lekcji, nie są przeznaczone na sprzedaż 
• Nie udostępniaj ich w formie zmienionej 

Informacja dla nauczycieli/opiekunów

Przy ostatnich edycjach planów lekcji, dostawałam pytania czy można pobrać plany dla dzieci ze szkoły lub domów dziecka - tak, można pobierać :) 

Czytaj dalej

Planer dzienny do pobrania za darmo

grafika do pobrania planery wpis

Planer dzienny do pobrania za darmo

Obecnie jestem na etapie reaktywacji blog, do takiej formy jak ponad rok temu. Jest to ciężkie, ze względu na to, że nagle ubyło mi godzin w dobie, a ja nie wiem jak to mogło się stać! :)

Nie ma tego złego co by na dobre nie wyszło, bo kiedy tak siedziałam i ubolewałam nad tym, że nie mogę poświęcić tyle czasu na bloga ile bym chciała, to podczas tych wolnych 20 minut, przejrzałam sobie całego bloga, przeanalizowałam, wiem co poprawić/zaktualizować, rozplanowałam sobie wszystkie serie i wiem, które wpisy zostaną usunięte.

Po całym tym analizowaniu, przypomniał mi się jeden wpis, który wisi sobie samotnie - jeden jedyny z danej serii na moim blogu - darmowe planery, a przecież miała to być seria, która powinna pojawiać się regularnie!

Tymczasem, jest tylko jeden wpis z darmowymi planerami (darmowe planery dla studentów)  i nic więcej. Postanowiłam nad tym popracować, dlatego dzisiaj mam dla Was 4 darmowe dzienne planery, do pobrania za darmo :)

Dzienny planer, jest przygotowany tak, aby jak najlepiej zaplanować swój dzień. Jest w formacie A4, dzięki czemu wszystko wygodnie zaplanujesz.

Informacje techniczne

• Utrzymany w minimalistycznej formie 
• Format A4
• 4 motywy do wyboru
• Gotowe do druku 
• Przygotowane w formacie PDF

Podgląd planerów

Pobierz planer 1 Pobierz planer 2 Pobierz planer 3 Pobierz planer 4

Czytaj dalej

Szybkie DIY - mini flowerbox

diy wpis

Szybkie DIY - mini flowerbox

Pewnie większość z Was (jak nie wszyscy) znają Flowerboxy. Nie ma co ukrywać, te pudełeczka robią furorę, a ja postanowiłam je odtworzyć, jednak, zamiast żywych kwiatów użyłam sztucznych, aby efekt był długotrwały :)

Czego potrzebujemy?

• pudełko - w moim przypadku okrągłe o średnicy 11 cm
• gąbka florystyczna sucha (jest również mokra, ale nie jest ona odpowiednia do sztucznych kwiatów)
• sztuczne kwiaty
• wstążka 
• klej
• nożyczki 
• nożyk
• folia 

1. Dopasowujemy naszą gąbkę florystyczną do średnicy pudełka. Wycinamy ją i wkładamy w pudełko.

2. Układamy sztuczne kwiaty na gąbce florystycznej.

Tak przy okazji muszę Wam powiedzieć, że nie byłam zadowolona z tych różyczek. Na zdjęciu wyglądały zupełnie inaczej - jak prawdziwe róże. Niestety, na żywo już z daleka było widać ich sztuczność.

3. Po ułożeniu kwiatów, dodajemy elementy dekoracyjne, ja zdecydowałam się na welurową wstążkę.

3a. Moje flowerboxy, były robione na Dzień Matki, w związku z tym, dodałam jeszcze odpowiednio opisane etykietki.

4. Efekt:

Muszę Wam powiedzieć, że seria z szybkim DIY chodziła za mną od jakiegoś czasu. Postanowiłam w końcu opublikować pierwszy wpis i przekonać się czy takie wpisy, przypadną Wam do gustu. Dajcie znać w komentarzu! ;)

Czytaj dalej

Tapety na pulpit do pobrania za darmo

grafika do pobrania wpis

Tapety na pulpit do pobrania za darmo

Długo zastanawiałam się jaki wpis opublikować (można zobaczyć ile czasu minęło od ostatniego wpisu, jednak nie tylko to miało wpływ na to, że wpisy pojawiają się rzadziej). Przejrzałam szufladę z moimi akwarelami i moim oczom ukazały się roślinki, które malowałam z myślą o innym wpisie, ale jak to ja - zapomniałam sobie zapisać do jakiego wpisu miały być one wykorzystane.

Dlatego postanowiłam wykorzystać te grafiki, do tapet na pulpit :)
Mam dla Was 6 tapet - 3 z kalendarzem na maj i 3 uniwersalne z samymi grafikami.

Pobierz

Pobierz

Pobierz

Pobierz

Pobierz

Pobierz

Informacje 

• Pliki pobierasz tylko i wyłącznie na własny użytek - jeśli chcesz się nimi podzielić - udostępnij ten wpis :) 

Czytaj dalej

Winietki ślubne do pobrania za darmo

grafika do pobrania ślub wpis

Winietki ślubne do pobrania za darmo

Luty dla większości jest to miesiąc miłości, podobno w lutym najwięcej osób zaczyna skupiać się na przygotowaniach do swojego ślubu i wesela.  Zaczyna się szukanie zaproszeń, winietek, dekoracji.

W tamtym roku, jeszcze przed swoim ślubem, chodził mi po głowie pomysł, aby opublikować wpis z darmowymi zaproszeniami i winietkami do pobrania. Szybko jednak z niego zrezygnowałam, bo za bardzo się skupiałam na projektach dla Was niż dla samej siebie. Jeszcze chwila, a zostałabym bez zaproszeń :)

Dlatego, kiedy zbliża się moja rocznica ślubu, postanowiłam opublikować pierwszy na blogu wpis z serii ślubnej czyli winietki do pobrania za darmo - w 6 wzorach.

Pobierz

Pobierz

Pobierz

Pobierz

Pobierz

Pobierz
Winietki są gotowe do pobrania i druku. Można je uzupełniać ręcznie lub w programie graficznym.

• Pliki pobierasz tylko i wyłącznie na własny użytek - nie można przekazywać ich dalej lub odsprzedawać. Jeśli chcesz się z kimś podzielić tymi winietkami - udostępnij link do wpisu :) 
• Wydruk najlepiej wykonać na papierze o większej gramaturze np. 200 lub 250 
• Szerokość winietek to 9,5 cm a wysokość to 6 cm
• Pliki są przygotowane w formacie PDF

Czytaj dalej

Jak wstawić separator do wpisu

CSS Tutorial wpis

Jak wstawić separator do wpisu

Dawno nie było na blogu instrukcji, więc czas to nadrobić! :)
Postanowiłam, że opublikuje prostą instrukcję na to, jak wstawić do wpisu separator. Nie będzie to długa instrukcja i nie będzie skomplikowana, więc jestem prawie pewna, że większości z Was przypadnie ona do gustu :)

1. Przechodzimy do naszego wpisu i wybieramy HTML
2. W obojętnie jakim miejscu (wybranym przez nas) wklejamy znacznik naszego separatora

<hr>

Możemy zostawić nasz separator taki jaki jest - zwykły szary pasek, ale możemy dodać dla niego styl w arkuszu CSS, żeby wyglądał lepiej. W tym celu przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy wybrany kod:

Styl 1

hr {border: 0; border-bottom: 8px dashed #FFB0AE; background: #FFE6E6; color: #FFE6E6}

Styl 2

hr {border: 0; border-bottom: 8px dotted #FEE077; background: #515151; color: #515151}

Styl 3

hr {border: 0; border-bottom: 10px double #C4F1E5; background: #515151; color: #515151}

Styl 4

hr {border: 0; border-bottom: 10px solid #C4F1E5;}

Styl 5

hr {border: 0; border-bottom: 10px dotted #FFB0AE;}

Wszystkie wartości są zmienne.

Czytaj dalej

Darmowe tapety na telefon

grafika do pobrania tapety na telefon wpis

Darmowe tapety na telefon

Grudzień był bardzo pracowity i dokonywało się wiele zmian, jednak nie przekładało się to na bloga - niestety. Wpisy, które miałam przygotowane, nie zostały opublikowane, po prostu trzeba było się zająć rzeczami ważniejszymi. To już na szczęście minęło, więc zostawmy to co było i witam się z Wami tym wpisem w nowym roku :)

Mam dla Was 4 darmowe tapety do pobrania z motywem księżyca. Długo "chodził" za mną pomysł wykorzystania tego motywu, nie wiedziałam co mam z nim zrobić, aż w końcu postanowiłam, że idealnie będzie się prezentował na ekranach telefonów.

Skupiłam się na tym, aby główną rolę grał odcień granatu, który uwielbiam i który najbardziej kojarzy mi się z zimą. Oprócz tego, zależało mi na tym, aby kolor przewodni idealnie wpasował się w motyw, osobiście jestem zauroczona efektem końcowym :) W komentarzu dajcie znać czy Wam również takie połączenie przypadło do gustu :)

Pobierz

Pobierz

Pobierz

Pobierz

Czytaj dalej