2 sposoby na ułożenie banerów w bloggerze

Nadmiar banerów wprowadza chaos na stronie i psuje jej estetykę. Najlepiej ograniczyć je do minimum. Ale co zrobić jeśli nie chcesz/nie możesz z żadnego zrezygnować? Czasem mała zmiana daje duży efekt. Zobacz jak ułożyć banery, by zajmowały mniej miejsca i nie szpeciły strony.

 

Pierwsze do czego zachęcam to: zastanów się czy wszystkie banery, które obecnie masz na blogu naprawdę są ci potrzebne? Być może część współprac już wygasła i spokojnie można je usunąć? Wiem, że wiele osób "trzyma" banerki jako "historię" współprac. Zamiast jednak dodać je do paska bocznego czy stopki lepiej założyć Stronę Statyczną "Współpracowałam z ...", albo wymienić te marki w zakładce "Współpraca"?

Jeśli jednak w pasku bocznym czy stopce masz sporo banerów, których z jakichś powodów nie chcesz usunąć, spróbuj je jakoś ujednolicić. Jeśli masz możliwość wyboru, wybieraj banery w stonowanych kolorach. Możesz też np. nadać im taką samą szerokość, albo dociąć do kwadratu - to już wprowadzi pewien ład. Jeszcze lepiej ułożyć je obok siebie, by zajmowały mniej miejsca i nie tworzyły bałaganu. I instrukcję jak to zrobić chciałam ci dzisiaj pokazać!

Poniżej pokazuję dwa sposoby na ułożenie gadżetów. Pierwszy to dwa banery w jednej linii, w drugim przykładzie trzy. Wystarczy skopiować wybrany kod i wkleić ko jako gadżet HTML/Java w pasku bocznym lub stopce.

Sposób nr 1 {dwa banery obok siebie}

<div class="banery">
<a href="LINK DO STRONY"><img src="LINK DO OBRAZKA"/></a>
<a href="LINK DO STRONY"><img src="LINK DO OBRAZKA"/></a>
</div>
<style>
.banery a img {width:48%;display:inline-block;vertical-align:bottom}
.banery a:nth-child(odd) img{margin-right:2%}
</style>

Sposób nr 2 {trzy banery obok siebie}

 

<div class="banery">
<a href="LINK DO STRONY"><img src="LINK DO OBRAZKA"/></a>
<a href="LINK DO STRONY"><img src="LINK DO OBRAZKA"/></a>
<a href="LINK DO STRONY"><img src="LINK DO OBRAZKA"/></a>
</div>
<style>
.banery a img {width:31%;display:inline-block;vertical-align:middle}
.banery a:nth-child(3n+2) img{margin-leftt:2.2%;margin-right:2.2%;}
</style>

Powyższe przykłady pokazują jeden rząd banerów, ale jeśli masz ochotę dołożyć kolejny po prostu wklej kolejne linie kodu (tuż pod poprzednimi) wg wzoru:

<a href="LINK DO STRONY"><img src="LINK DO OBRAZKA"/></a>

LINK DO STRONY → tu wklejasz link do przekierowywanej witryny, np. https://zblogowani.pl/ (staraj się unikać linkowania do stron bez certyfikatu SSL czyli które mają początek http)

LINK DO OBRAZKA → tu wklejasz link do wybranego baneru. Jeśli masz je obecnie w pasku bocznym, wystarczy kliknąć na niego prawym klawiszem myszki i wybrać "Kopiuj adres obrazu". (jeśli to nowy baner, może go po prostu dodać jako gadżet obraz, skopiować adres wg powyższej instrukcji, a następnie usunąć obraz z paska bocznego).


Prawda, że proste?
Jeśli jednak masz jakieś pytania, śmiało pisz!