{042} I just want to feel this moment

(weheartit)

Helloł!

Tu znowu Julka.

Przepraszam za to, że nie dodałam wcześniejszej notki,

ale nie mogłam wejść na lapka :C

W dzisiejszej notce dam wam kod na "pozdrowionka".

Jest to bardziej gadżet niż przydatne cuś na bloga.

Na początku demonstracja:

No więc wchodzimy na bloga i widzimy

z boku taki znaczek.

Oczywiście jesteśmy Polakami, więc musimy sprawdzić co to jest.

Klikamy i ukazuje się przed nami coś takiego.

Dziwimy się i wpisujemy byle co.

A oto przed nami wyskakuje miła niespodzianka (chociaż znaczek mówił sam

za siebie).

Jakież to miłe ^^

To teraz nadszedł czas na instrukcję, mam nadzieję, że chociaż w połowie

coś z tego zrozumiecie.

Jest to kod javascript na coś w rodzaju

alertu, ale to nazywa się prompt,

czyli że można coś do tego okienka wpisać

(jest jeszcze okienko confirm, ale to już inna bajka).

Oprócz kodu javascript dam wam kod na css dla tego okienka,

ponieważ znając ludzi nie wszyscy by chcieli mieć zwyczajny napis zamiast

fajnego obrazka. Te wszystkie kody, które wam podam należy wpisać

w ramce HTML.

Instrukcja:

1. Skopiuj i wklej ten kod:

<input type="text" id="prompt" value="Pozdrowienia" />

<script type="text/javascript">

    function oknoPrompt() {

    var imie = prompt('Podaj swoje imię:', '');

        if (imie != null) {

            alert('Witaj ' + imie + '! Pozdrowienia od Infinity Projects ;*');

        } else {

            alert('Anulowałeś akcję');

        }

    }

    document.getElementById('prompt').onclick = function() {

        oknoPrompt()

    }

</script>

2. Pozmieniaj kolorowy tekst na swój.

Pozdrowienia - jeśli nie chcesz użyć kodu css, aby

tym na co mamy kliknąć był obrazek możesz zostawić tekst.

Czyli zamiast obrazka będzie tekst taki jaki wpiszesz zamiast Pozdrowienia.

Podaj swoje imię: - (zobacz 2 obrazek w demonstracji) zamiast tego 

możesz wpisać co chcesz.

Witaj - tekst przed imieniem, po jego wpisaniu należy zrobić spację,

aby nie połączył się z imieniem. Widać to tutaj: Witaj 

! Pozdrowienia od Infinity Projects ;* - tekst po imieniu. Można go całego usunąć i mieć tylko

"Witaj ...". Ważne jest aby na początku zrobić spację lub dać jakiś znak interpunkcyjny.

Anulowałeś akcję - (zobacz 3 obrazek w demonstracji) jeśli nie chcemy wpisywać swojego imienia

możemy kliknąć po prostu Anuluj. Wtedy ukaże nam się napis taki,

jaki napiszemy zamiast Anulowałeś akcję.

To już cały kod javascript, teraz przechodzimy do css, w którym

usuniemy zbędną ramkę, ustalimy szerokość i wysokość oraz

dodamy obrazek zamiast tekstu.

Ten kod podam wam stopniowo, abyście sami

ustalili co chcecie w nim zawrzeć.

Nadal pracujemy w ramce HTML.

1. Wpisz początek kodu:

<style>#prompt {

2. Ustal znaczek czyli tło:

background: url("WKLEJ SWÓJ LINK DO OBRAZKA");

3. Ustal powtarzalność tła (więcej o powtarzalności tła znajdziesz TUTAJ):

background-repeat: no-repeat;

4. Wybierz kolor czcionki, lub ustaw ją na przeźroczystą:

color: transparent;

5. Wpisz szerokość i wysokość znaczka (musi być taka sama lub trochę większa od

jego wymiarów):

width: 200px; height: 100px;

6. Usuń obramowanie:

border: none;

7. Zakończ kod wpisując:

}</style>

8. Gotowy kod wygląda tak:

<style>#prompt {background: url("WKLEJ SWÓJ LINK DO OBRAZKA"); background-repeat: no-repeat; color: transparent; width: 200px; height: 100px; border: none;}</style>

Oczywiście można dodać własne ustawienia, jak cień, lub zmienić kolor obramowania zamiast

je usunąć, itp. itd.

To tyle C: jak macie jakieś pytania to proszę o napisanie w komentarzu.

PS: Przyjmę 2 zamówienia na szablon wykonane moim nowym stylem,

który znajdziecie w poprzednich postach.