środa, listopada 05, 2014

Jak zrobić ruchome banery na blogu?

Na pewno niektórzy z Was znają ten problem, gdy banerów ciągle przybywa, a miejsca na blogu ubywa. Kiedy jest ich za dużo nie wygląda to zbyt fajnie. Niektórych może to nawet odstraszać. Ja osobiście toleruję do pewnego poziomu, ale gdy widzę, że na blogu jest więcej takich banerów niż treści - no cóż czuję się dziwnie. Przy tworzeniu nowego wyglądu, który od jakiegoś czasu możecie podziwiać postanowiłam jakoś nad tym zapanować. Muszę przyznać - efekt udał mi się taki jak planowałam.
http://2.bp.blogspot.com/-_GfQtT2AKqU/VFkpTy3s63I/AAAAAAAAHBQ/YVinWcSC9rE/s1600/ban.png
Co nam potrzebne?

Trochę dobrych chęci
Bez tego ciężko coś osiągnąć. Prawda?
Link URL do obrazka/banera/zdjęcia
Aby sprawdzić czy jest dobry można wkleić go w przeglądarkę i jeśli otworzy nam się sam obrazek na białym tle tak jak tutaj to oznacza, że link jest właściwy.
~ Link do strony, gdzie ma przenosić
~ Kod, który pojawi się niżej.

Jak zrobić?
Zaczynamy od wejścia w Układ (1), następnie dodania gadżetu (2) i wyszukania HTML/JavaScript. Po otwarciu nowego okna wklejamy niżej podany kod, uzupełniamy go i zapisujemy.

<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2"><a href="LINK 1" target="_blank"><img alt="LINK 2" border="0" height="134" src="LINK 2"/></a></marquee>

Objaśnienia:
left - kierunek, w którym mają przesuwać się banery - w tym przypadku z prawej do lewej. Można wstawić: up (z dołu do góry), down (z góry na dół), right (z lewej do prawej).
2 - szybkość z jaką przesuwa się baner. Im wyższa liczba, tym szybciej się porusza.
LINK 1 - link do strony, na którą ma przenosić po kliknięciu.
LINK 2 - wcześniej wspomniany link URL do baneru. Pamiętajcie o dobrym skopiowaniu go!
134 - jest to wysokość, którą możemy sobie ustawić. Wszystkie dodane banery, będą się automatycznie pomniejszały.

Kod ten jest na jeden baner. Przy każdym kolejnym wklejamy między </a> a </marquee> ten kod:
<a href="LINK 1" target="_blank"><img alt="LINK 2" border="0" height="134" src="LINK 2"/></a>

Jeśli wszystko już zmienione, to dodajemy gadżet, ustawiamy w odpowiednim miejscu i zapisujemy rozmieszczenie. Przesuwające banery będą się zatrzymywać, gdy najedziemy na nie myszką.



Starałam się, by instrukcja była naprawdę zrozumiała i łatwa. Myślę, że każdy powinien sobie z nią poradzić. Dla ułatwienia nawet podlinkowałam obrazki z dobrze skopiowanym adresem URL oraz miejscem, gdzie należy wkleić kod. Jeśli będą jakieś problemy to piszcie śmiało w komentarzach.
Mam nadzieję, że komuś przyda się instrukcja. Dla tych co będą próbować: powodzenia!

Jeśli chcecie jakąś szczególną instrukcję to piszcie - jak tylko będę w stanie zrozumiale wytłumaczyć, chętnie to zrobię.

28 komentarzy:

  1. O! Z chęcią wykorzystam, jak nie teraz to na pewno w przyszłości, świetne to jest, dziękuję! :D

    different-view-of-the-life.blogspot.com - KLIK

    OdpowiedzUsuń
    Odpowiedzi
    1. Będzie mi miło, jak okaże się, że jednak komuś się przyda :)

      Usuń
  2. Odpowiedzi
    1. Mam cichą nadzieję, że wszystko dobrze wytłumaczyłam i nie ma błędów :)

      Usuń
  3. Przydatny post :D Ja robiła to trochę innym sposobem ale ten tez jest fajny
    blog ->klik

    OdpowiedzUsuń
  4. Bardzo fajny post i blog!!! :)
    Wszystkie posty są ciekawe i miło się je czyta ;)

    http://mademoisellejuliet.blogspot.com/

    OdpowiedzUsuń
  5. Ale świetna instrukcja <3 Na pewno przyda mi się na przyszłość ;)

    http://julia-and-fashion.blogspot.com

    OdpowiedzUsuń
  6. Ja chciałabym instrukcję, a może poradnik, gdzie mogę znaleźć np. takie słodkie grafiki jak masz w nagłówku :)


    W wolnej chwili zapraszam do mnie

    ♡Blog-kilk♡

    Pozdrawiam-Ola

    OdpowiedzUsuń
  7. Super post!
    Twoje tutoriale są świetne, przejrzyste i zawsze zrozumiałe, dzięki Tobie nareszcie "skumałam" rzeczy, których nie potrafiłam zrobić ;))

    justsayhei.blogspot.com

    OdpowiedzUsuń
  8. Super instrukcja! Z pewnością kiedyś ją zastosuję :)

    ITSLONELYTHINGS

    OdpowiedzUsuń
  9. Bardzo przydatna instrukcja! Szukałam jej już jakiś czas temu, ale bardzo się cieszę, że pojawiła się na Twoim blogu :)

    Pozdrawiam
    Mój Blog - klik!

    OdpowiedzUsuń
  10. Cudowny post! Zresztą jak zawsze :) Jesteś świetna, pomagasz ludziom za nic <3 Post bardzo przydatny i na pewno wiele osób z niego skorzysta :)
    Słoneczka życzę :]
    www.acratello.blogspot.com

    OdpowiedzUsuń
  11. Bardzo przydatny post :)
    Mam do Ciebie pytanie: jak zrobić ''tak jakby'' kategorię jak Ty masz: POMOCE BLOGOWE???
    Zapraszam na konkurs.Do wygrania m.in. post promujący, lecz są jeszcze inne nagrody!!!
    Pozdrawiam i czekam na odpowiedź :)
    Sylwia

    OdpowiedzUsuń
    Odpowiedzi
    1. Chodzi o rozsuwanie gadżetu? Czy może coś innego. Będzie mi łatwiej pomóc jak napiszesz do mnie na maila lub gg. :)

      Usuń
  12. Ja spróbuję coś przygotować by tekst przemieszczać w CSS3, bez „marquee” :)

    OdpowiedzUsuń
  13. Jesteś świetna <3 dziękuje i zapraszam na mojego :) http://wszysstkoowszystkimm.blogspot.com/

    OdpowiedzUsuń
  14. Bardzo dziękuję, świetny pomysł, wykorzystam na pewno, już przetestowane i rozbudowane do 3 gadżetów za sobą.

    OdpowiedzUsuń
  15. Bardzo przydatny post, pomógł zrobić porządek; wielkie dzięki :).

    OdpowiedzUsuń
  16. witaj stworzyliśmy baner który jest ruchomy i podzielony na 5 czesci czyli kazda czesc jest odnosnikiem do innego linka da sie wstawic taki baner?

    OdpowiedzUsuń
    Odpowiedzi
    1. Jeśli dobrze zrozumiałam, to wystarczy każdy odnośnik wstawić tak, jakby był nowym banerem. We wpisie wyjaśniłam pod koniec jak to zrobić ;)

      Usuń
  17. A jak zrobić, aby baner nie kończył się białym polem? Na moim jest 14 zdjęć i chciałabym, aby siebie dotykały.

    OdpowiedzUsuń
  18. Mam pytanie , nie da się tego zamykania poszerzyć ?Chodzi mi o to , żeby zdjęcia były całe , a nie poucinane

    OdpowiedzUsuń
  19. proszę o pomoc co zrobić by banery a mam ich kilka przesuwały się w pętli

    OdpowiedzUsuń
  20. Hej,
    właśnie robię ten baner ze zdjęciami z Instagrama. Chciałabym wiedzieć jak zrobiłaś te strzałki, aby przyspieszyć? Będę wdzięczna za odpowiedź.
    Pozdrawiam,
    Natalia

    OdpowiedzUsuń
    Odpowiedzi
    1. To już było razem z gadżetem, także nic nie zmieniałam :)

      Usuń
  21. proszę o pomoc jak zrobić by moje ruchome banery a mam ich kilka były w pętli chodzi mi żeby miedzy 1 banerem a ostatnim nie było przerwy
    dziękuje z góry za pomoc

    OdpowiedzUsuń
  22. super sprawa, a jak to jest z obciążeniem strony, duże przez taki ruchomy baner?

    OdpowiedzUsuń

Komentować może każdy. | Brak weryfikacji obrazkowej.
Komentarze, gdzie będzie przeważał spam będą usuwane.