Twórczy notatnik: Tutorial

Pokazywanie postów oznaczonych etykietą Tutorial. Pokaż wszystkie posty

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

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

Styl 2

Styl 3

Styl 4

Styl 5

Wszystkie wartości są zmienne.

Czytaj dalej

CSS Tutorial wpis

Jak zrobić tekst z teksturą za pomocą CSS

Ostatnio przeglądam dużo blogów - polskie i zagraniczne. Zauważyłam kilka rzeczy, ale dwie rzuciły mi się mocno w oczy. Pierwsza - zdecydowanie każdy idzie w minimalizm i "czystą formę" bloga i to jest ja najbardziej ok. Druga, która razi moje oczy, to nietypowe nagłówki gadżetów/inne elementy tekstowe. O ile sam sposób ich przedstawienia nie jest zły, tak sposób w jaki są zrobione już trochę mi przeszkadza (pod względem technicznym, a nie estetycznym).

Zazwyczaj te nagłówki/elementy tekstowe są grafikami. Pamiętam, że kiedyś sporo osób mnie prosiło o to, abym pokazała jak zrobić takie graficzne nagłówki. Dotarłam do tego wpisu robiąc aktualizację innych i szczerze nie byłam z tej metody zadowolona. Ten wpis nadal jest na blogu, ale bardziej w ramach ciekawostki (?).

Wyróżniające się nagłówki gadżetów, jako element dekoracyjny naszego bloga, mogą naprawdę dodać mu tego "czegoś", więc warto skorzystać z możliwości jakie daje nam nasz szablon i popracować nad tymi elementami, skoro zdecydowaliśmy, że to właśnie nasze nagłówki, czy inne elementy tekstowe mają być tymi wyróżniającymi się.

Dlatego, w dzisiejszym wpisie pokażę Wam, jak zrobić za pomocą CSS elementy tekstowe z teksturą np. w odcieniach złota, srebra czy tak słynnego w ostatnim czasie motywu marmuru :)

1. Jeśli chcemy użyć fontu, który nie występuję w zasobach Bloggera, skorzystaj z tego wpisu ↓

Zobacz wpis o niestandardowych fontach na blogu
2. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS

W arkuszu CSS wklejamy poniższy kod:

Analiza kodu:

SELEKTOR - tutaj wpisujemy odpowiedni selektor
{font-family: Pacifico; - wpisujemy nazwę wybranego fontu font-size: 44px; - rozmiar naszego nagłówka/elementu tekstowegocolor: #000; - kolor tekstu background: url(LINK DO GRAFIKI) no-repeat center center;
background-size: cover;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
padding: 30px; - marginesy }

Wszystkie pogrubione wartości są zmienne. Poniżej kilka przykładów :)

Tak wygląda przykładowy tekst

Czytaj dalej

CSS Tutorial wpis

Jak dodać grafikę na górze bloga

Każdy z nas chce, aby szablon jego bloga był tym idealnym i tym wyróżniającym się, niektórzy idą w minimalizm, inni w kolory, a jeszcze inni w nietypowe efekty/gadżety.
To jest jak najbardziej okej, wszystko jest dla ludzi - oczywiście z umiarem, jak ze wszystkim :)

Dlatego w tej instrukcji chce Wam pokazać prostą instrukcje, która odmieni każdego bloga, niby nic, a jednak ma w sobie "to coś" i potrafi chwytać za oko.

Instrukcja będzie się opierać na kodzie CSS.

1. Przechodzimy do motyw - dostosuj - zaawansowane - tła - główne tło - przezroczyste

2. Wybieramy odpowiednią grafikę lub robimy samodzielnie.

Wytyczne do grafiki:

Wymiar: szer. 1556 px x wys. 110 px (wysokość, może być mniejsza)
Format: PNG
Zapis z tłem przezroczystym
Rozdzielczość: 300 dpi

Grafiki do pobrania:

Pobierz

Oczywiście grafika, zawiera tylko motyw na górze, bez nagłówka, powyższe zdjęcia są tylko zobrazowaniem tego, jak się prezentuje z danymi grafikami góra naszego bloga :)

3. Przechodzimy do arkusza CSS i wklejamy kod:

Zapamiętaj!

Link do grafiki można uzyskać, wgrywając grafikę na Bloggera. Tworzymy nową stronę, w którą wrzucamy naszą grafikę i ustawiamy na rozmiar oryginalny. Przechodzimy do HTML naszego wpisu i kopiujemy link, klikamy opublikuj, ale nie publikujemy linku do tej strony w menu itd. Skopiowany link grafiki, wrzucamy do naszego kodu w odpowiednim miejscu.

Czytaj dalej

CSS Tutorial wpis

Efekty dla przycisków/buttonów

Jakiś czas temu, była opublikowana instrukcja na temat tego, jak zrobić własne buttony/przyciski, więc pomyślałam sobie, że głupio tak tą instrukcję zostawić i nie zrobić nic dodatkowego do niej, a i przy okazji do innych "klikaczy" na naszym blogu.

Przedstawię Wam dzisiaj, 6 efektów dla buttonów z powyższej instrukcji oraz innych przycisków na naszym blogu np. czytaj więcej, etykiety etc. Mogę Wam powiedzieć, że jest to pierwsza część tej instrukcji i jeszcze kilka takich efektów na pewno się pojawi :)

Nie będziemy musieli nic robić w kodzie HTML szablonu, wystarczy nam tylko arkusz CSS.

Motyw - dostosuj - zaawansowane - dodaj arkusz CSS

Zapamiętaj!

Wszystkie elementy w analizie kodu, zaznaczone na kolor i pogrubione są zmienne.

Efekt 1

Efekt pierwszy, jest idealny, jeśli chcemy, aby nasz button/przycisk na coś wskazywał. Po wskazaniu na button kursorem, pojawi nam się mała strzałka.

Podgląd

Najedź na mnie i zobacz jaki mam efekt

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px;
padding:10px 30px;
border-bottom:none;
-webkit-border-radius:0.333em;
-moz-border-radius:0.333em;
border-radius:0.333em;
color:#fff!important;
text-transform:uppercase;
font-size:14px!important;
line-height:24px!important;
letter-spacing: 1px;
cursor:pointer;
font-family: Nunito;
}
.selektor {
background: #000;
}
.selektor {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.selektor:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  left: calc(50% - 10px);
  top: 0;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #000 transparent;
}
.selektor:hover:before, .hvr-bubble-top:focus:before, .hvr-bubble-top:active:before {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

Zapamiętaj!

Niektóre selektory nie występują razem z kropką tylko z tzw. kratką. Czyli np. .selektor lub #selektor

Analiza fragmentu kodu, który można zmienić:

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
-webkit-border-radius:0.333em; - zaokrąglenie narożników
-moz-border-radius:0.333em;
border-radius:0.333em;
color:#fff!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu (tutaj ustawiony na litery drukowane)
font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odległość między literami
cursor:pointer;
font-family: Open Sans; - rodzaj fontu/czcionki
}
.selektor {
background: #000; - kolor tła buttonu/przycisku
}
.selektor:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
left: calc(50% - 10px);
top: 0;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #000 transparent; - kolor strzałki
}

Efekt 2

Najedź na mnie i zobacz jaki mam efekt

Analiza fragmentu kodu, który można zmienić:

.selektor { position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
color:#fff!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu (tutaj ustawione na litery drukowane)
font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odległość między literami
cursor:pointer;
font-family: Nunito; } - rodzaj fontu/czcionki
.selektor { background: #78d9d3; } - kolor tła
.selektor:before { content: '';
position: absolute;
border: #78d9d3 solid 4px; - kolor i grubość obramowania
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top, right, bottom, left;
transition-property: top, right, bottom, left; }

Efekt 3

Najedź na mnie i zobacz jaki mam efekt

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px;
padding:10px 30px;
border-bottom:none;
color:#fff!important;
text-transform:uppercase;
font-size:14px!important;
line-height:24px!important;
letter-spacing: 1px;
cursor:pointer;
font-family: Nunito;
}
.selektor {
background: #444;
}
@-webkit-keyframes selektor {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes selektor {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
.selektor {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.selektor:hover, .selektor:focus, .selektor:active {
  -webkit-animation-name: q3;
  animation-name: q3;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

Efekt 4

Najedź na mnie i zobacz jaki mam efekt

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px;
padding:10px 30px;
border-bottom:none;
color:#fff!important;
text-transform:uppercase;
font-size:14px!important;
line-height:24px!important;
letter-spacing: 1px;
cursor:pointer;
font-family: Nunito;
}
.selektor {
background: #ffe599;
}
.selektor {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: #f1c232;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.selektor:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffe599;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.selektor:hover, .selektor:focus, .selektor:active {
  color: #fff;
}
.selektor:hover:before, .selektor:focus:before, .selektor:active:before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

Analiza fragmentu kodu, który można zmienić:

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
color:#fff!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu
font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odstęp między literami
cursor:pointer;
font-family: Nunito; - rodzaj fontu/czcionki
}
.selektor {
background: #ffe599; - kolor tła
}
.selektor {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
background: #f1c232; - kolor drugiego tła
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.selektor:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #ffe599; - kolor pierwszego tła
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.selektor:hover, .selektor:focus, .selektor:active {
color: #fff; - kolor fontu/czcionki
}

Efekt 5

Najedź na mnie i zobacz jaki mam efekt

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px;
padding:10px 30px;
border-bottom:none;
color:#000!important;
text-transform:uppercase;
font-size:14px!important;
line-height:24px!important;
letter-spacing: 1px;
cursor:pointer;
font-family: Nunito;
}
.selektor {
background: #fff;
}
.selektor {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.selektor:before, .selektor:after {
  pointer-events: none;
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  height: 5px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.selektor:before {
  bottom: 100%;
  background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.selektor:after {
  top: 100%;
  background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.selektor:hover:before, .selektor:focus:before, .selektor:active:before, .selektor:hover:after, .selektor:focus:after, .selektor:active:after {
  opacity: 1;
}

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px;
padding:10px 30px;
border-bottom:none;
color:#fff!important;
text-transform:uppercase;
font-size:14px!important;
line-height:24px!important;
letter-spacing: 1px;
cursor:pointer;
font-family: Nunito;
}
.selektor {
background: #9fc5e8;
}
.selektor {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.selektor:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.selektor:hover:before, .selektor:focus:before, .selektor:active:before {
  width: 25px;
  height: 25px;
}

Który efekt Wam się najbardziej podoba? :)

Czytaj dalej

CSS Tutorial wpis

Jak zrobić pasek powiadomień/informacyjny na Bloggerze

Pasek powiadomień blogger, instrukcja na bloggera

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:

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:

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:

Zapisujemy

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

Efekt:

Wszystkie wartości w kodzie CSS są zmienne

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

Czytaj dalej

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:

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:

Tylko jak widzicie, teraz już bez dwukropka. Zmieniamy powyższy kod na:

Zapisujemy motyw.

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

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

Za tym kodem dodajemy swój własny tekst czyli, będzie to wyglądać mniej więcej tak:

Efekt:

Czytaj dalej

CSS Tutorial wpis

Pobawmy się cieniem - efekty dla tekstu za pomocą cienia

Jakiś czas nie pojawiały się instrukcje, dlatego dzisiaj mam dla Was przygotowanego gotowca na efekty związane z tekstem za pomocą cienia tzw. box-shadow.

Box-shadow nie tylko może posłużyć nam do dodania tradycyjnego cienia do tekstu, ale dzięki niemu możemy utworzyć takie efekty jak np. efekt neonu czy uwypuklenia.

1. Efekt neon

Efekt:

Excepteur sint occaecat cupidatat non proident

2. Efekt wypuklenia

Efekt:

Excepteur sint occaecat cupidatat non proident

3. Efekt tradycyjny

Efekt:

Excepteur sint occaecat cupidatat non proident

4. Efekt 3D

Excepteur sint occaecat cupidatat non proident

5. Efekt cień + kolor

Efekt:

Excepteur sint occaecat cupidatat non proident

Wszystkie wartości są zmienne.
Selektor - wpisujemy selektor dla elementu, który chcemy zmienić, np. dla tytułu wpisu.

Czytaj dalej

CSS Tutorial wpis

Jak zrobić etykiety nad tytułem wpisu

Od jakiegoś czasu dostawałam od Was maile z pytaniami jak zrobić etykiety nad tytułem wpisu. Długo zastanawiałam się nad tym, którą wersję Wam przedstawić i zdecydowałam się na najprostszą. Pokażę Wam jak za pomocą kodu CSS, przenieść nasze etykiety ze stopki wpisu nad tytuł.

1. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS wklejamy kod:

Elementy do zmiany:

.post-labels {
font-family: Open Sans; - rodzaj fontu
padding: 10px 10px!important; - marginesy wewnętrzne
top: -45px; - położenie etykiet (góra/dół)
left: 50px; - ustawienie do lewej
text-align: center; - wyśrodkowanie (opcjonalnie left/right)
width: 700px!important; - wielkość
}
.post-labels a {
background: transparent; - kolor tła
padding: 2px 6px; - wewnętrzne marginesy
color: #999; - kolor tekstu
font-size: 20px; - wielkość tekstu
text-decoration: none;
letter-spacing: 1px ; - odstęp między literami
}
.post-labels a:hover {
text-decoration: none;
color: #2C76AD; - kolor po najechaniu myszą
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
}

Gotowe :)

Czytaj dalej

HTML Tutorial wpis

Jak zrobić podpis szablonu

"Jak zrobić podpis szablonu" - to najczęściej zadawane pytanie, które pada przez osoby, które chcą podpisać swój szablon. Do tej pory podchodziłam do tego tematu sceptycznie, ale pomyślałam, że zrobię jednak dla Was taki wpis. Czy polecam tę metodę przy udostępnianiu szablonów do pobrania? Raczej nie. Owszem, jak trafimy na uczciwe osoby, to nie mamy się czego bać, ale 100% nigdy nie mamy. Sama z tej metody korzystałam na samym początku i byłam przekonana, że nikt nie ukradnie mi szablonu - to był błąd. Niestety, ten podpis nie stanowi żadnego zabezpieczenia i osoba trzecia może go sprawnie usunąć. Jednak dla potrzeb własnych - nie ma problemu :)

Zapamiętaj!

Przed edycją szablonu, zrób jego kopię zapasową :)

1. Przechodzimy do motyw - edytuj kod HTML.
2. Klikamy kursorem obojętnie jakie miejsce w kodzie i wybieramy ctrl+f
3. W pole wyszukiwania wpisujemy Attribution1
4. Wyszukany fragment kodu rozwijamy (zaznaczony strzałką na poniższym zdjęciu)

5. Pojawią nam się kolejne elementy do rozwinięcia (zaznaczone strzałką)

6. Kiedy już mamy wszystko rozwinięte usuwamy zaznaczoną część kodu (na zdjęciu poniżej)

7. Zamiast niej wklejamy ten kod:

Część kodu poniżej, to ta część, która najbardziej interesuje nas jeśli chodzi o edycje podpisu:

Efekt:

Czytaj dalej

CSS HTML Tutorial wpis

Back to top - jak zrobić strzałkę zmieniającą kolor - pokazującą poziom przejrzanej strony

Już od jakiegoś czasu dostaje od Was dużo wiadomości typu "jak zrobić strzałkę zmieniającą kolor", "jak zrobić strzałkę, która pokazuje poziom przeczytanej strony", więc w końcu postanowiłam się za to zabrać i przygotować instrukcję :)

1. Jeśli nie mamy na swoim blogu zainstalowanego font awesome, to musimy go zainstalować. Przechodzimy do motyw - edytuj kod HTML. Klikamy obojętnie w jakie miejsce w kodzie i wybieramy ctrl+f. wpisujemy <head>. Nad <head> wklejamy poniższy skrypt:

2. Teraz wyszukujemy </head> i NAD wklejamy:

3. Teraz wyszukujemy </body> i NAD wklejamy:

4. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS lub pozostając cały czas w HTML wyszukujemy ]]></b:skin> i nad ]]></b:skin> lub w arkuszu CSS wklejamy:

Wszystkie wartości są zmienne, oprócz ostatniego fragmentu kodu, który zaczyna się od .fa-angle-up:before

Efekt? Macie u mnie na blogu :)

Czytaj dalej

Jak wstawić separator do wpisu

Jak zrobić tekst z teksturą za pomocą CSS

Analiza kodu:

Jak dodać grafikę na górze bloga

Efekty dla przycisków/buttonów

Efekt 1

Efekt 2

Efekt 3

Efekt 4

Efekt 5

Jak zrobić pasek powiadomień/informacyjny na Bloggerze

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

Jak edytować link komentarzy w stopce wpisu

Pobawmy się cieniem - efekty dla tekstu za pomocą cienia

1. Efekt neon

2. Efekt wypuklenia

3. Efekt tradycyjny

4. Efekt 3D

5. Efekt cień + kolor

Jak zrobić etykiety nad tytułem wpisu

Elementy do zmiany:

Jak zrobić podpis szablonu

Efekt:

Back to top - jak zrobić strzałkę zmieniającą kolor - pokazującą poziom przejrzanej strony

Archiwum

Etykiety