Jak zrobić pasek powiadomień/informacyjny na Bloggerze

CSS Tutorial wpis

Jak zrobić pasek powiadomień/informacyjny na Bloggerze

Pewnie nie raz i nie dwa mieliście okazję do tego, aby na blogu (na górze) widzieć u niektórych okienko/pasek z jakąś informacją np. o urlopie, nowych produktach w sklepie, aktualizacjach czy jakiś zmianach na blogu itd. Jak pewnie też wiecie, nie jest to standardowy gadżet Bloggera. Dlatego w tym wpisie, pokażę Wam jak taki pasek informacyjny dodać do Bloggera.

Okej, więc aby dodać nasz pasek informacyjny, będziemy pracować na kodzie HTML szablonu oraz arkuszu CSS. Nie będzie to skomplikowany "zabieg", więc każdy powinien sobie z tym poradzić :)

1. Pierwsze co musimy zrobić to przechodzimy do motyw - edytuj kod HTML

2. Klikamy kursorem, obojętnie jakie miejsce w kodzie i wybieramy ctrl+f na klawiaturze. Pojawi nam się okno wyszukiwania. W okienku, które nam się pojawiło wpisujemy </body>

3. Pod </body> wklejamy odpowiednio uzupełniony kod:

<div id='sticky-info'> <p> TEKST INFORMACYJNY <a id='button' href='LINK' target='_blank'>TEKST BUTTONU</a></p> <div class='cross'> <a href='javascript:hide_cross();'>X</a></div> </div> <script language='JavaScript'> function hide_cross() { crosstbox = document.getElementById("sticky-info"); crosstbox.style.visibility = 'hidden'; } </script>

TEKST INFORMACYJNY - wpisujemy w tym miejscu tekst, który ma informować naszych czytelników

LINK - link do strony/podstrony/ wpisu, do którego ma kierować naszych czytelników

TEKST BUTTONU - czyli tekst, który będzie się wyświetlał na naszym przycisku np. kliknij tutaj/przejdź do wpisu lub kliknij tutaj

Mój kod wygląda tak:

Zapisujemy motyw

4. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS. W arkuszu CSS wklejamy taki oto kod CSS:

/* info ---------------------*/ #sticky-info { background: #000; color:#fff; text-align: center; margin: 0 auto; height:45px; line-height: 15px; font-size:13px; font-weight: 500; font-family: Open Sans; letter-spacing: 1px; text-transform: none; position:fixed; vertical-align: baseline; overflow:hidden; z-index:9999; width:100%; display:block; top: 0; } #sticky-info p a#button { background: #78d9d3; color: #fff; padding:4px 4px; border-radius: 3px; margin-left:14px; text-transform: uppercase; } #sticky-info p a#button:hover { background:#fff; color: #000; } #sticky-info p { width:95%; float:left; } .gls-cross { display:block; position:relative; right:15px; float:right; } .cross a { font-size:13px; font-weight:bold; font-family:"Arial"; color:#fff; line-height:40px; } .cross, a:hover { color: #78d9d3; text-decoration:none; }

Efekt:

Wersja dla osób posiadających menu przyczepione na górze bloga

1. Przechodzimy do układ - dodaj gadżet - HTML/JavaScript

2. W gadżecie wklejamy taki kod:

<div id='sticky-info'> <p> TEKST INFORMACYJNY <br /> <br /> <a id='button' href='LINK' target='_blank'>TEKST BUTTONU</a></p> <div class='cross'> <a href='javascript:hide_cross();'>X</a></div> </div> <script language='JavaScript'> function hide_cross() { crosstbox = document.getElementById("sticky-info"); crosstbox.style.visibility = 'hidden'; } </script>

Zapisujemy

3. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS

/* info ---------------------*/ #sticky-info { background: #000; color:#fff; text-align: center; margin: 0 auto; height:95px; line-height: 15px; font-size:13px; font-weight: 500; font-family: Open Sans; letter-spacing: 1px; text-transform: none; vertical-align: baseline; overflow:hidden; width:100%; display:block; top: 0px; } #sticky-info p a#button { background: #78d9d3; color: #fff; padding:5px 5px; border-radius: 3px; text-transform: uppercase; font-size: 10px; } #sticky-info p a#button:hover { background:#fff; color: #000; } #sticky-info p { width:95%; float:left; } .cross { display:block; position:relative; right:15px; float:right; } .cross a { font-size:13px; font-weight:bold; font-family:"Arial"; color:#fff; line-height:40px; } .cross, a:hover { color: #78d9d3; text-decoration:none; }

Efekt:

Wszystkie wartości w kodzie CSS są zmienne

Jeśli masz z czymś problem - napisz na maila :) 

Czytaj dalej

Darmowe plany lekcji - edycja 2018

grafika do pobrania plany lekcji wpis

Darmowe plany lekcji - edycja 2018

Już niedługo, już za momencik zaczyna się kolejny rok szkolny, a jak rok szkolny to i nowe plany lekcji by się przydały. Żeby tradycji stało się zadość, w tym roku również przygotowałam dla Was darmowe plany lekcji w 6 wzorach - 3 pionowe i 3 poziome.

Poprzednie edycje, cieszyły się dużym zainteresowaniem, więc mam nadzieję, że i ta edycja przypadnie Wam do gustu :)

Pierwsze 3 plany - poziome, to plany z motywem liska, kwiatów oraz kaktusów. Nie wiem czemu, ale motywy z liskami, zawsze kojarzyły mi się z powrotem do szkoły, a kwiaty... no cóż, dobrze, żeby wiosenne klimaty towarzyszyły nam nawet po powrocie do szkoły. Motyw kaktusów, z tej całej trójki jest chyba najbardziej uniwersalny :)

Pobierz plan z liskiem Pobierz plan kwiatowy

Pobierz plan z kaktusami Pobierz plan z motywem roweru

Kolejne 3 plany jakie dla Was mam to plany w pionie. Utrzymane w letnim klimacie, a jeden z nich - plan z motywem roweru, jest przygotowany dla osób, które cenią sobie minimalizm. Oprócz tego jest to plan z grafiką, którą można samemu pokolorować, jeśli ktoś jednak by wolał dodać trochę koloru :)

Liście palm i morskie klimaty - od razu na myśl przywołują wakacje, a kto nie chciałby powrócić do wakacji (nawet myślami), podczas roku szkolnego? Od razu zaczyna się lepiej pracować :)

Pobierz plan z motywem morskim Pobierz plan z motywem liści palm
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 PNG

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ć :) 

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

Czytaj dalej

Mów do mnie jeszcze - czyli jak źle przekręcałam element z ceną i kiedy dowiedziałam się, że czarny kolor, nie jest czarnym

lifestyle wpis

Mów do mnie jeszcze - czyli jak źle przekręcałam element z ceną i kiedy dowiedziałam się, że czarny kolor, nie jest czarnym

Uwielbiam swoją pracę, a w szczególności ludzi, z którymi współpracuje - serio, nie ważne jacy by nie byli, zawsze mnie zaskakują i usiłują ode mnie potwierdzenia, że ja jako grafik będę działać cuda i ich pomysły - nawet te najbardziej nietypowe zostaną zrealizowane :)

Projekt z tabliczkami, na których mają być ceny. Miesiąc się już to ciągnęło, w końcu dostałam wiadomość:

"No już prawie, prawie, tylko trochę źle pani tą cenę przekręciła, miało być w lewo, ale to drugie"

No tak, jak mogłam się pomylić!

Rozmawiam już drugi tydzień z klientem na temat projektu, nadal nie wiem jaka to firma i tak właściwie do kogo ma być celowana dana forma reklamy. Pytam się klienta kto jest jego grupą docelową i czym zajmuje się jego firma.

"Proszę pani moja firma zajmuje się wszystkim i grupa docelowa, to też wszyscy"

Jesteście ciekawi jaki finalny był projekt? Projekt z produktami dla niemowląt.

"Proszę o baner z informacją o sprzedaży działki, ale taki z efektem WOW!"

"Właściwie to ja nie wiem co jeszcze chce, ale może już Pani zacząć robić projekt" 

Kiedy czarny, nie jest czarnym i istnieje jeszcze jakiś inny czarny kolor :)

"- Napisy mają być czarne
- Proszę pana, one są czarne
- Nie, to nie jest czarny
- To jest czarny
- Proszę pani, nie o taki czarny mi chodziło, chodziło mi o inny czarny"

"To ja za zdjęcia muszę jeszcze płacić?"

"Czy można tego pana obrócić, aby stał do nas przodem, a nie profilem?" 

"Niech pani się nie śpieszy, nie potrzebuje tego na już, tylko na środę" - był poniedziałek. 

"- Podsyłam mój projekt na plakat
- Proszę pana, ale to jest plakat innej firmy
- No właśnie, podoba mi się, niech pani to odtworzy, tylko dane zmieni"

"Proszę pani, ja przeczytałem książkę o designie i to nie powinno tak być, ja zaraz pani napiszę zasadę projektowania" 

"- Proszę pani, ten projekt powinien do mnie mówić, krzyczeć, a on nic do mnie nie mówi, jest beznadziejny
- Proszę pani, ale to jest realizacja pani projektu i wprowadzone zmiany, które również pani zaproponowała
- Projekt jest świetny! Akceptuje go"

Mimo wszystko, nadal uwielbiam swoją pracę i klientów, jestem im wdzięczna za poprawianie mi humoru ;)

Czytaj dalej

Jak edytować link komentarzy w stopce wpisu

HTML Tutorial wpis

Jak edytować link komentarzy w stopce wpisu

Dawno nie było instrukcji na Bloggera, zauważyłam też, że nie omówiłam tematu jakim jest edycja linku komentarzy w stopce wpisu. Tak, jest to element edytowalny. Niestety muszę zasmucić te osoby, które nie preferują wprowadzać zmian i wyszukiwać czegoś w kodzie HTML. Ten element edytujemy tylko i wyłącznie w kodzie HTML, do kodu CSS w tym przypadku przejdziemy tylko wtedy, kiedy będziemy chcieli dodać styl dla naszego elementu, ale nie o tym w tym wpisie mowa.

1. Przechodzimy do motyw - edytuj kod HTML. Klikamy kursorem w obojętnie jakie miejsce w kodzie i wybieramy ctrl+f

2. W okienku, które nam się pojawi wklejamy:

<data:post.commentLabelFull/>:
Jest parę tych linijek w kodzie, przy każdym usuwamy " : "

Klikamy "zapisz motyw"

3. Teraz będziemy usuwać "komentarz/komentarzy" i zostawiać samą liczbę.
Wyszukujemy od nowa kodu:

<data:post.commentLabelFull/>
Tylko jak widzicie, teraz już bez dwukropka. Zmieniamy powyższy kod na:

<data:post.numComments/>

Zapisujemy motyw.

4. Teraz dodajemy swój własny tekst.

Odszukujemy kody, które ostatnio dodaliśmy czyli:

<data:post.numComments/>
Za tym kodem dodajemy swój własny tekst czyli, będzie to wyglądać mniej więcej tak:

<data:post.numComments/> DODAJ KOMENTARZ<br /> <data:post.numComments/> WIĘCEJ KOMENTARZY<br /> <data:post.numComments/> | KOMENTUJ<br /> <data:post.numComments/> | ZOSTAW KOMENTARZ<br />

Efekt:

Czytaj dalej