Zapewne każda blogerka kreatywna, która tworzy i chce sprzedawać swoje wyroby, chciałaby mieć miejsce na swoim blogu w którym w przejrzysty sposób zaprezentuje to co robi. Testowałam różne zewnętrzne rozwiązania implementacji galerii na stronę statyczną bloggera. Z żadnej nie byłam w pełni zadowolona. Postanowiłam stworzyć na własne potrzeby galerię, która miała spełniać poniższe wymagania:

  • łatwa aktualizacja zdjęć
  • minimalistyczny wygląd
  • powiększenie zdjęcia po najechaniu kursorem
  • proste wdrożenie (wiedziałam, że będę chciał się tym z Wami podzielić, więc rozwiązanie musiało być proste do zainstalowania dla osoby, które nie zna HTML, CSS i innych bzdur)
W ten sposób powstała galeria projektów banerów blogowych mojego autorstwa. Oczywiście rozwiązanie to jest dostosowanie do moich potrzeb i wyobrażam sobie, że część z Was może mieć też inne potrzeby, dlatego śmiało pytajcie, piszcie jak powinna wyglądać Wasza idealna galeria. Jeśli okaże się, że jest takie zapotrzebowanie to chętnie przygotuję dla Was również inne galerie.

Galeria prac kreatywnych na blogu (galeria blogger)

baner na bloga
baner na bloga
baner na bloga
baner na bloga

galeria

aKROK 1: Przygotowanie zdjęć.

Możliwe jest pomniejszanie zdjęć za pomocą kodów CSS, żeby nie trzeba było martwić się ich obróbką. Ma to jednak jeden poważny minus – wydłuży ładowanie się strony i w ekstremalnych sytuacjach może sprawić, że czytelnik/potencjalny klient zrezygnuje z obejrzenia naszych prac, a tego nie chcemy. Dlatego warto poświęcić kilka dodatkowych minut i pomniejszyć zdjęcia. Jeżeli galeria ma dobrze wyglądać zdecyduj się na jedną ich orientacje (pionowe lub poziome) i zadbaj o identyczne proporcje długości krawędzi. Ja swoje pomniejszyłam tak, że szerokość wszystkich to 500px, a wyskość 333px. Na stronie galerii są one wyświetlane nieco mniejsze, ale zostawiłam pewien zapas, gdybym w przyszłości chciała zmienić koncepcję.
Wielkość zdjęć zmienisz we wszystkich programach do obróbki zdjęć. Mając już wszystkie zdjęcia musimy je umieścić w Internecie. Możecie do tego użyć np. albumów Google.

KROK 2: Zawartość galerii.

Galerię umieścimy na stronie statycznej bloggera, czyli takiej, której treść pozostaje cały czas taka sama (w przeciwieństwie do strony głównej bloga). W celu utworzenia strony statycznej logujemy się do bloggera i wybieramy STRONY. Tam klikamy NOWA STRONA. Jeśli chcemy oprócz zdjęć zamieścić tam jakąś treść to jest to dobry moment. Wpisujemy i formatujemy tekst tak jak przy tworzeniu posta.

Następnie w górnym lewym rogu klikamy na HTML i pod treścią, która tam jest (jeśli coś napisałyśmy) zamieszczamy poniższy kod galerii. Zastępując # kolejnymi adresami URL zdjęć, które mają się w galerii znaleźć. Jeśli nie wiesz skąd wziąć adres URL zdjęcia załadowanego do albumu google kliknij TU.

<div id=”galeria”> 

<div class=”sekcjagalerii”>
<img src=”#” /></div>
<div class=”sekcjagalerii”>
<img src=”#” /></div>

</div>

Powyższy kod przewiduje 2 zdjęcia w galerii. Możecie dodać ich oczywiście więcej. Wystarczy dla każdego kolejnego zdjęcia dodać przed ostatnim

</div>

kod:

<div class=”sekcjagalerii”>
<img src=”#” /></div>
Wskazówki: W trybie edycji wizualnej nie przestawiaj w żaden sposób zdjęć bo spowoduje to dodanie znaczników HTML, które mogą nam popsuć galerię. Dodatkowo radzę kod galerii przygotować w pliku tekstowym i go zapisać, a później dopiero wklejać na stronę statyczną. Jeśli blogger spłata nam psikusa i coś pokręci to nie będziemy musiały szukać błędów, bądź zaczynać pracy od początku. Jeśli wiemy, że zawartość galerii będziemy cyklicznie zmieniać warto zadbać o nazewnictwo zdjęć, aby łatwo odnaleźć je później w kodzie.
Gdy cała strona jest gotowa kliknij OPUBLIKUJ.

KROK 3: Wygląd galerii.

Zanim wykonasz ten krok, zdjęcia w galerii będą się wyświetlać jedno pod drugim, w oryginalnym rozmiarze, bez powiększenia i ramki. Zajmiemy się teraz wyglądem. Jeśli chcesz, aby Twoja galeria wyglądała tak jak u mnie, a główna kolumna Twojego bloga ma przynajmniej 800px to wystarczy, że zamieścisz poniższy kod w odpowiednim miejscu. W bloggerze przejdź do SZABLON. Pobierz kopię szablonu (jeśli nie wiesz jak to zrobić kliknij TU). Następnie kliknij EDYTUJ KOD HTML. Kliknij w dowolny fragment kodu i wciśnij jednocześnie CTRL i F. W okienku, które się pojawi wpisz

]]></b:skin>

i wciśnij ENTER.
Bezpośrednio nad odnalezionym fragmentem wklej poniższy kod i zapisz zmiany:

/* creative gallery by zyj-kochaj-tworz.pl */

#galeria
{float: left;
margin: 0;
padding: 0px;
width:780px;
background-color: #fff; }
.sekcjagalerii {
float: left;
 margin:20px;
border: 10px
solid #f1f1f2;
padding: 0;
width: 325px;
margin:22px;

.sekcjagalerii img {
width: 100%;
float: left; margin:0; padding: 0;

.sekcjagalerii img:hover {
margin:0; padding: 0;
opacity : 1.00;
}

.sekcjagalerii:hover {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
opacity : 1.00;}

Jeśli w powyższej instrukcji opisałam coś niejasno bądź użyłam skrótu myślowego i masz wrażenie, że czegoś w niej brakuje to pisz śmiało. Mam nadzieję, że powyższa instrukcja pomoże Wam w stworzeniu przejrzystej galerii prac kreatywnych. Piszcie również jak powinna wyglądać Wasza idealna galeria.

Twój głos jest dla mnie ważny

Na koniec mam małą prośbę. Zajrzyj na boczny pasek i zaznacz w mini-ankiecie jakiego rodzaju wpisy najbardziej chcesz widzieć na Żyj Kochaj Twórz.

 

Pin It on Pinterest

Pomogłam Ci lub Cię zainspirowałam?

Podziel się tą stroną z tymi, którzy też na to czekają.