Jak zrobić portfolio/galerię na Bloggerze

czwartek, 14 grudnia 2017

Od ostatniej instrukcji minęło trochę czasu, a więc czas na kolejną. W dzisiejszym tutorialu przedstawię Wam jak w prosty sposób można dodać galerię/portfolio do naszego bloga - w postach, na stronie głównej lub w podstronach. Jedyne na czym będziemy pracować to kod CSS oraz kod HTML, który wklejamy w sekcji HTML podczas tworzenia wpisu lub do gadżetu HTML/JavaScript, więc nie powinno być problemu z instalacją tego gadżetu :)

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

Wklejamy kod:

.galeria { padding: 0 5px; float: left; width: 50%; } div.galeria img { width: 100%; height: auto; } div.galeria img:hover { opacity: 0.70; } .galeria { box-sizing: border-box; } .img-galeria:after { content: ""; display: table; clear: both; }

Wartość w tym fragmencie - width: 50%; - możemy edytować, odpowiada ona za wielkość naszych okienek/zdjęć

2. Teraz przechodzimy do sekcji HTML we wpisie lub do układ - dodaj gadżet - HTML/JavaScript i wklejamy kod:

<div class="img-galeria"> <div class="galeria"> <a href="LINK" target="_blank"> <img alt="Img" src="LINK DO ZDJĘCIA" /> </a> </div> <div class="galeria"> <a href="LINK" target="_blank"> <img alt="Img" src="LINK DO ZDJĘCIA" /> </a> </div> <div class="galeria"> <a href="LINK" target="_blank"> <img alt="Img" src="LINK DO ZDJĘCIA" /> </a> </div> <div class="galeria"> <a href="LINK" target="_blank"> <img alt="Img" src="LINK DO ZDJĘCIA" /> </a> </div> </div>

LINK - możemy wkleić link, do którego przeniesie nas, po kliknięciu w zdjęcie. Możemy słowo "LINK" zastąpić # jeśli nie chcemy, aby po kliknięciu w zdjęcie przeniosło nas na inną stronę.

LINK DO ZDJĘCIA - link do zdjęcia

Efekt:

Jeśli spodobał Ci się wpis, przekaż go dalej :)