Wypełnij formularz, aby złożyć zamówienie i otrzymać darmową wycenę

Zdjęcie nad postem bez edycji szablonu

Zdjęcie nad postem bez edycji szablonu

Istnieje prosty sposób, dzięki któremu każdy może cieszyć się zdjęciem nad postem na swoim blogu. Wystarczy odrobina konsekwencji przy publikowaniu postów, bo to właśnie posty w tej instrukcji mają kluczową rolę. Należy tylko pamiętać, aby zdjęcie miało taką samą szerokość jak posty na blogu.

Aby umieścić obrazek nad postem należy poniższy kod wkleić w edycji posta w polu, w którym umieszcza się tytuł postu, a po nim dopiero wpisać planowany tytuł postu. Ta kolejność jest bardzo istotna
 <img src="tutajlinkdotwojegoobrazka.jpg"/>   
Na tym ta instrukcja się kończy. Po opublikowaniu zdjęcie pojawi się nad tytułem posta. 

Gotowe przykłady

Już tak dodane zdjęcie prezentuje się bardzo ciekawie. Ale istnieją sposoby na to, aby wyglądało jeszcze lepiej. Poniżej zamieściłam podglądy i przykłady gotowych kodów do wykorzystania.

Kod, który należy wkleić w pole, do którego wpisuje się tytuł.
<div class='tytulp'><img src="tutajlinkdotwojegoobrazka.jpg"/><span>Tytuł posta z zdjęciem ponad postem</span></div>

CSS zamieszczony pod przykładami należy wkleić do arkusza CSS. Ścieżka dostępu: Edycja bloga/Motyw/Dostosuj/ Zaawansowane/Dodaj arkusz CSS.

Przykład nr 1

Podgląd przygotowany na potrzeby Król Trefl
Font użyty w tym podglądzie: Open Sans Condensed.
.tytulp { position: relative; } .tytulp img { max-width: 100%; } .tytulp span { display: block; position: absolute; bottom: 5px; right: 0px; padding: 20px; background-color: rgba(0, 0, 0, 0.3); /* kolor tła, zmień według uznania */ width: 100%; text-align: right; text-transform: uppercase; font: normal 300 30px "Open Sans Condensed", sans-serif; /* font, zmień według uznania*/ color: #ffffff; /* kolor fontu, zmień według uznania */ }

Przykład nr 2

Podgląd przygotowany na potrzeby Król Trefl
Font użyty w tym podglądzie: BenchNine.
.tytulp {
  position: relative;
}
.tytulp img {
  max-width: 100%;
}
.tytulp span {
  display: block;
  position: absolute;
  bottom: 30px;
  right: 25px;
  top: 25px;
  left: 25px;
  padding: 55px 10px;
  background-color: rgba(255, 255, 255, 0.4); /* kolor tła, zmień według uznania */
  text-align: center;
  font: normal 400 36px "BenchNine", sans-serif; /* font, zmień według uznania*/
  color: #5d6f7b; /* kolor fontu, zmień według uznania */
}


Przykład nr 3

Podgląd przygotowany na potrzeby Król Trefl
Font użyty w podglądzie: Raleway.
.tytulp {
  position: relative;
}
.tytulp img {
  max-width: 100%;
}
.tytulp span {
  display: block;
  padding: 20px;
  text-align: center;
  font: normal 900 20px "Raleway", sans-serif; /* font, zmień według uznania*/
  color: #5d6f7b; /* kolor fontu, zmień według uznania */
  text-transform: uppercase;
  border-bottom: 1px solid #5d6f7b; /* podkreślenie, zmień według uznania */
  margin-bottom: 20px;
}

Przy korzystaniu z tej instrukcji pamiętajcie o prawach autorskich i prawidłowo podpisujcie źródło. Bardzo mi na tym zależy! ♥ 

Więcej trików i wskazówek dotyczących prowadzenia bloga znajdziesz na moim instagramie. Koniecznie zajrzyj! ;)

@kroltrefl.design

Komentarze [0]