Jak utworzyć ankietę i wstawić ją na bloga

poniedziałek, 23 listopada 2015


Ostatnio na blogu pojawiła się ankieta, która powstała za pomocą formularza Google. Parę dni później, po opublikowaniu ankiety na blogu, pojawiła się nowsza wersja formularzy. Nie wiem ile osób chciałoby umieścić taką ankietę u siebie na stronie, ale postanowiłam pokazać, jak wykonać taki formularz w nowszej wersji i umieścić go np. we wpisie.

1. Na początek wchodzimy na nasz dysk Google.


2. Przeniosło nas na nasz dysk. Wybieramy: Nowy - Więcej - Formularze Google


3. Otworzy nam się nowy formularz gdzie możemy zacząć zabawę ze wstawianiem pytań i z ich dostosowaniem.



4. Jeśli mamy już gotowe pytania odpowiedzi, to czas zabrać się za wygląd naszej ankiety. Na samej górze mamy ikonki. Jeśli chcemy zmienić wygląd naszego formularza wybieramy tą z paletą.


Mój formularz prezentuje się tak:


5. Skoro już dopracowaliśmy nasz formularz, to teraz będziemy wstawiać go do wpisu.


Teraz przechodzimy do wpisu i wybieramy HTML



Udostępnij ten wpis:
Czytaj dalej »

Jak zrobić rozwijane menu

czwartek, 12 listopada 2015


Nie wiem czy pamiętacie, jak napisałam kiedyś wpis o tym, jak zrobić rozwijane menu na podstawie profilki.pl. Ta opcja bez wątpienie jest szybka i nie ma strachu o to, że coś popsujemy. Jednak, słyszałam od Was, że nie zawsze menu ze strony profilki.pl działa poprawnie, dlatego w dzisiejszym wpisie pokażę Wam, jak takie menu wykonać samemu. Nie musicie się o nic martwić, ponieważ będziemy pracować tylko na gadżecie HTML/JavaScript i kodach CSS. Oprócz tego na końcu tego wpisu znajdziecie ankietę, dotyczącą bloga. Bardzo proszę o wypełnienie jej, ponieważ pomoże mi to w usprawnieniu mojej strony.

1. Tradycyjnie przechodzimy do układu naszego bloga. Pamiętajmy o tym, aby usunąć gadżet strony. Układ - dodaj gadżet - HTML/Javascript



2. Wklejamy kod i klikamy "zapisz":



<!-- START MENU -->
<div id='NavMenu'>
<div id='NavMenuleft'>
<ul id='nav'>
<li><a href='LINK'>NAZWA STRONY</a></li>
<li><a href='LINK'>NAZWA STRONY</a></li>
<li><a href='LINK'>NAZWA STRONY</a></li>
<li><a href='#'>KATEGORIE</a>
<ul>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
</ul>
</li>
<li><a href='#'>KATEGORIE2</a>
<ul>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
</ul>
</li>
</ul></div>
</div>
<!-- KONIEC MENU -->

3. Teraz przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS  i wklejamy kod:


/* MENU */
.tabs-inner .section:first-child ul { margin-top: 0px; border: 0 solid #eee; }
.tabs-inner .widget ul { background:#fff;  text-align: center !important;  }
.tabs-inner .widget li a { font-family:'Lato',sans-serif; text-transform: uppercase; font-size:12px;
letter-spacing: 3px; color:#222222; border: 0px solid #ffffff; }
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #888888;  text-decoration: none; }
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
width: 100%;
height: 45px;
position: relative;
margin: 0 auto;
padding: 0;
}
#NavMenuleft {
width: 100%;
float: none;
margin: 0 auto;
padding: 0;
}
#nav {
margin: 0 auto;
padding: 0;
}
#nav ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #222222;
display: block;
margin: 0;
padding: 15px;
}
#nav li a:hover, #nav li a:active {
color: #888888;
margin: 0;
padding: 15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 150px;
color: #222222;
float: none;
margin: 0;
padding: 7px 10px;
text-align:left;
}
#nav li li a:hover, #nav li li a:active {
color: #888888;
padding: 7px 10px;
width:147px;
border-left:3px solid #888888;transition: all 0.3s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
border: 0px solid black;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
#nav li ul a { width: 140px;  }
#nav li ul ul { margin: -32px 0 0 171px;  }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}

Analiza kodu:
Wszystkie pogrubione wartości są zmienne!

.tabs-inner .section:first-child ul { margin-top: 0px; border: 0 solid #eee; }
.tabs-inner .widget ul { background:#fff;  text-align: center !important;  } - kolor tła i wyrównanie.tabs-inner .widget li a { font-family:'Lato',sans-serif; text-transform: uppercase; font-size:12px;letter-spacing: 3px; color:#222222; border: 0px solid #ffffff; } - rodzaj fontu, wygląd tekstu (tutaj ustawione na tekst pisany wielkimi literami, jeśli nie chcemy tej opcji w miejsce uppercase wpisujemy none), wielkość fontu, odległość między literami, kolor teksu, grubość, rodzaj i kolor ramki.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #888888;  text-decoration: none; } - kolor fontu, po najechaniu myszą.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
width: 100%;
height: 45px; - wysokośćposition: relative;
margin: 0 auto;
padding: 0;
}
#NavMenuleft {
width: 100%;
float: none;
margin: 0 auto;
padding: 0;
}
#nav {
margin: 0 auto;
padding: 0;
}
#nav ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #222222; - kolor odwiedzonego linkudisplay: block;
margin: 0;
padding: 15px}
#nav li a:hover, #nav li a:active {
color: #888888; - kolor tekstu po najechaniu mysząmargin: 0;
padding: 15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;  - kolor tła, rozwijanej części menu width: 150px;
color: #222222; - kolor tekstu, rozwijanej części menu float: none;
margin: 0;
padding: 7px 10px;
text-align:left; - wyrównanie}
#nav li li a:hover, #nav li li a:active {
color: #888888; - kolor tekstu po najechaniu myszą w rozwijanej części menu padding: 7px 10px;
width:147px;
border-left:3px solid #888888; transition: all 0.3s ease-in-out; - efekt (pasek z lewej strony) przy najechaniu myszą na tekst w rozwijanej części menu. Grubość, rodzaj i kolor-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
border: 0px solid black;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
#nav li ul a { width: 140px;  }
#nav li ul ul { margin: -32px 0 0 171px;  }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}

4. Efekt końcowy:



Na koniec (tak jak wspomniałam na początku wpisu) chciałabym Was prosić o wypełnienie ankiety, która znajduje się poniżej :)

Udostępnij ten wpis:
Czytaj dalej »

Copyright © Szablon wykonany przez My pastel life