Blogerzy wszystkich platform, łączcie się!

Dyskusje Blogerów, Fotoblogerów i Vlogerów, fora blogowe, graficzne, ogólnotematyczne
rozmowy o blogach, porady, instrukcje, ciekawostki z internetu



::
Autor Wiadomość
yellowobsession 
WordPress.Klub

Imię: Kamil
Dołączył/a: 07 Lut 2012
Posty: 31

Wysłany:    [blogger] Jak stworzyć wyskakujące okienko?

Jak stworzyć wyskakujące okienko w formie obrazka,
Wiadomość (widoczna dla zarejestrowanych)

podobne do tego,ale tak jak napisałem już wcześniej w formie obrazka
 
  podziel si� tym postem na:




Utwórz darmowe konto na forum --- Zaloguj się --- Polub Blogowicza na FB!
Dołącz do grupy Bloggerów na FB

Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 38
Dołączył/a: 01 Sty 2006
Posty: 8948
Miasto: Wrocław

Wysłany: 2012-06-05, 05:33   okno lightbox wyskakujące raz na dobę /godzinę /odwiedzinę

Klasyczne popupy idą w zapomnienie, bo przeglądarki sobie z nimi radzą bez problemu. Taki efekt osiągniesz poprzez warstwę z pojawiającym się DIV na żądanie.

słowa kluczowe: HTML, CSS, jQuery, JavaScript.

Musimy utworzyć okienko pojawiające się przy ładowaniu strony z efektem lightbox. Dodatkowo musi się nam ono pojawiać raz na określony czas (np. raz dziennie) i ewentualnie na wybranej stronie (np. tylko na głównej).

Zaczynamy od przygotowania skryptu i pola okienka. Wszystkie kody umieszczamy w edytorze HTML szablonu z zaznaczonym "Rozszerz szablony widżetów". Wybrałem do tego kody źródłowe stąd:
Wiadomość (widoczna dla zarejestrowanych)
i dopasowałem do naszych potrzeb (opisanych wyżej + Blogger).

1. Odszukujemy ]]>< i tuż nad dopisujemy styl naszego okienka:
Wiadomość (widoczna dla zarejestrowanych)
Elementy mają przypadkowy wygląd zatem na końcu trzeba go będzie dopasować pod swój szablon.
2. Następnie odnajdujemy </head> i tuż nad dodajemy:
Wiadomość (widoczna dla zarejestrowanych)
Ten fragment odwala całą robotę. Przyciemnia tło, ustawia ciasteczka, zarządza wyświetlaniem i chowaniem okna. Jeżeli chcemy zmienić czas po jakim wygasa ciasteczko musimy w tym kodzie:

Kod

createCookie('hasLaunch', 1, 7);
zamienić 7 na inną ilość dni np. 1 (doba). Potrzebujemy mniejsze odstępy? godzina to 1/24 doby, czyli 0.041666 - trzeba zatem wziąć kalkulator i obliczyć sobie ile musimy tam wpisać.
3) Trzeci fragment dopisujemy tuż pod <body 'tutaj coś będzie'>:
Wiadomość (widoczna dla zarejestrowanych)
w miejsce <!-- tutaj tekst --> wstawiasz tekst, obrazek - dowolny HTML czy Javascript, jakiś formularz itd.

---------------------

Jeżeli chcemy żeby nasz boks pojawiał się tylko po wejściu na stronę główną naszego blogspota to musimy trzeci kod wrzucić wewnątrz pętli:

Kod

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- tutaj kod z punktu 3 -->
<b:else/>

</b:if>
Na wybranej podstronie? to wtedy pierwszą linijkę podmieniamy na:
Wiadomość (widoczna dla zarejestrowanych)
zamiast POST-URL wklejamy permalink do posta lub strony.
Na podstronach postów i statycznych stronach?
Wiadomość (widoczna dla zarejestrowanych)
Tylko na statycznych stronach?
Wiadomość (widoczna dla zarejestrowanych)
Wszędzie poza stroną główną?
Wiadomość (widoczna dla zarejestrowanych)
Na stronach kategorii (etykiet)?
Wiadomość (widoczna dla zarejestrowanych)


demo:
Wiadomość (widoczna dla zarejestrowanych)
okienko wyskakuje raz na dobę.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku. :^^:
 
  podziel si� tym postem na:
yellowobsession 
WordPress.Klub

Imię: Kamil
Dołączył/a: 07 Lut 2012
Posty: 31

Wysłany: 2012-06-05, 12:00   

starałem się wkleić wszystko krok po kroku jak ty napisałeś,
jednak na stronie wyswietla się puste okienko tylko z krzyzkiem zamknij
Wiadomość (widoczna dla zarejestrowanych)


może zle wkleiłem kod,
nie znalazłem zadnego <body 'tutaj coś będzie'>,
jedyny jaki znalazłem podobny to <body> i pod tym wkliłem kod:
Wiadomość (widoczna dla zarejestrowanych)
 
  podziel si� tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 38
Dołączył/a: 01 Sty 2006
Posty: 8948
Miasto: Wrocław

Wysłany: 2012-06-05, 14:38   

na forum korzystamy ze znaczników [ logged ] i [ code ], nie [ hide ] ;)

wkleiłeś kod obrazka wewnątrz komentarza, dlatego się nie pojawia

Kod

<!-- tak się oznacza komentarze w dokumencie -->
powinno być tak:
Wiadomość (widoczna dla zarejestrowanych)
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku. :^^:
 
  podziel si� tym postem na:
Wyświetl posty z ostatnich:   
::
Odpowiedz do tematu
Nie możesz pisać nowych tematów. Zobacz szczegły.
Nie możesz odpowiadać w tematach. Zobacz szczegły.
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB & Weblove.pl © 2006-2024 Wrocław | modified by Przemo © 2003 phpBB Group.
skocz na górę   |  shoutbox
 
Dodaj na Facebooku:

Zobacz także:


Szablony blogów i stron na wordpress
ogromna baza motywów WP, podzielona na kategorie tematyczne. Proste, jednostronicowe wizytówki lub zaawansowane układy, także z funkcją sklepu internetowego (ecommerce).
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz