Jak zmienić wygląd formularza kontaktowego

piątek, 15 stycznia 2016


Pewnie każdy z Was zna Bloggerowy formularz kontaktowy, kiedyś pojawiła się jedna instrukcja na temat tego gadżetu. Pokazywałam Wam w niej, jak wstawić formularz kontaktowy w podstronie. Teraz nadszedł czas na to, aby poprawić wygląd naszego gadżetu. Przyznacie chyba sami, że pierwotny wygląd tego gadżetu nie zachwyca.


To teraz czas na zmiany.

1. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy poniższy kod:


.contact-form-widget {max-width:100%; width:auto;}
.contact-form-email, .contact-form-name, .contact-form-email-message, .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover, .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {background: #fff; border-style: solid; border-color: #ddd; box-shadow: none; width: 100%; height:45px; font-size:14px; vertical-align:middle; padding:8px;}
.contact-form-button-submit {background: #e3cad1; border: none; float: none; height: 35px; margin: 5px 0 0 0; width: 310px; cursor: pointer; line-height:45px; font-size: 14px; text-transform: uppercase; font: normal normal 17px Open Sans; border-radius: 0px;}
.contact-form-button-submit:hover {background: #f5e9e2; border: none;}
.contact-form-name, .contact-form-email, .contact-form-email-message {max-width:none;}
.contact-form-email, .contact-form-name {margin-bottom:10px;}

Analiza kodu: 

.contact-form-widget {max-width:100%; width:auto;}
.contact-form-email, .contact-form-name, .contact-form-email-message, .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover, .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {background: #fff; border-style: solid; border-color: #ddd; box-shadow: none; width: 100%; height:45px; font-size:14px; vertical-align:middle; padding:8px;}
.contact-form-button-submit {background: #e3cad1; border: none; float: none; height: 35px; margin: 5px 0 0 0; width: 310px; cursor: pointer; line-height:45px; text-transform: uppercase; font: normal normal 17px Open Sans; border-radius: 0px;}
.contact-form-button-submit:hover {background: #f5e9e2; border: none;}
.contact-form-name, .contact-form-email, .contact-form-email-message {max-width:none;}
.contact-form-email, .contact-form-name {margin-bottom:10px;}

Kolor tła ramek imię, e-mail, wiadomość 
Styl obramowania ramek imię, e-mail, wiadomość 
Kolor obramowania ramek imię, e-mail, wiadomość 
Wysokość ramek imię, e-mail, wiadomość 
Rozmiar czcionki (chodzi o rozmiar czcionki, którą uzupełniamy nasze ramki)
Marginesy wewnętrzne 
Kolor tła, przycisku "wyślij" 
Wysokość przycisku "wyślij"
Szerokość przycisku "wyślij"
Wielkość i rodzaj czcionki przycisku "wyślij" 
Zaokrąglone rogi przycisku "wyślij"
Tło przycisku "wyślij" po najechaniu myszką 

To już wszystko. Szybko, łatwo i przyjemnie. Mam nadzieję, że komuś się ten kod przyda :) 
Udostępnij ten wpis:
Czytaj dalej »

Jak zrobić i wstawić ruchome banery na bloga

piątek, 8 stycznia 2016


Ostatnio bardzo dużo osób pytało się jak zrobić i wstawić ruchome banery na bloga. Nie wiem skąd nagle takie duże zainteresowanie, ale nie ważny jest powód. Najważniejsze jest to, że ta instrukcja pomoże nam zrobić porządek z dużą ilością banerów na naszym blogu, które tylko zajmują miejsce w kolumnie bocznej, przez co blog, potrafi ciągnąć się w nieskończoność. Między nami mówiąc, miałam nie publikować tej instrukcji z paru powodów, ale nie wnikajmy w to teraz. Mam nadzieję, że komuś się przyda ta instrukcja.

Instrukcja jest bardzo prosta i opierać się będzie tylko i wyłącznie na kodzie HTML/JavaScript i wrzuceniu zdjęć na hosting, więc nie ma opcji, abyśmy coś popsuli

1. Przygotowujemy sobie banery, które mają nam się wyświetlać + linki, aby po kliknięciu w baner odsyłało nas na daną stronę.

2. Przechodzimy do strony TinyPic, która umożliwia nam hosting zdjęć/plików graficznych i wklejamy po kolei nasze banery.

Zaznaczamy opcje "Dodaj plik ze swojego dysku", a następnie wybieramy "Wybierz plik".  Po wybraniu pliku wybierz "Prześlij".




Jest opcja wybrania wielu plików na raz (dokładnie to 2), ale u mnie to nie przeszło, możecie jednak próbować, może akurat Wam się uda :)

3. Kiedy nasze pliki już się pojawią, to pod obrazkiem będziemy mieli link, który będzie nam potrzebny. Musimy go skopiować i wkleić na chwilę do notatnika, aby się "nie zgubił".


4. Przechodzimy teraz do układ - dodaj gadżet - HTML/JavaScript i dodajemy poniższy kod:

<marquee behavior="scroll">
<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>
</marquee>

Zdania pogrubione, odpowiednio podmieniamy. Jeśli chcemy mieć więcej niż 3 banery to po ostatnim </a>, a przed </marquee> wstawiamy:

<a href="LINK DO STRONY"><img src="LINK DO OBRAZKA" />
</a>
Udostępnij ten wpis:
Czytaj dalej »

Copyright © Szablon wykonany przez My pastel life