Podgląd live w poście

Na tym przykładzie będę omawiać podgląd live:

TYTUŁ MENU

NAZWA1 NAZWA2 NAZWA3 NAZWA4 NAZWA5

W uproszczeniu wykorzystuje się kod, który normalnie dajemy do widgetu HTML/Java Script oraz css, jednak wpisujemy go w poście. Całość oczywiście dajemy do wersji HTML posta.

Schemat jest taki:

<div id="selektor">
elementy w języku HTML
</div>
<style type="text/css">
.selektor {}
</style> 

Nie będę szczegółowo opisywać różnych opcji elementów w języku HTML, ponieważ tutaj można wpisać praktycznie wszystko. Najpopularniejsze są oczywiście linki, które często wklejmy do widgetu HTML/Java Script, aby zwiększyć możliwości efektów. Css też powinien osobom zaawansowanym być znany, więc nie będę się tutaj rozpisywać. Do zapamiętania ważne jest, że jeśli użyjesz jednego selektora w jednym poście, w innym użyj innego selektora (możecie zmienić po prostu jedną literkę), inaczej kody będą się łączyć. Elementy z dwóch postów przyjmą wszystkie wartości z obu kodów.

Dla przykładu podaję kod css do tych linków na początku posta.
Kod jest udostępniony w celach edukacyjnych i przykładu,
kopiowanie w celach rozpowszechniania jest zabronione.  
Jeśli użyjesz go na swoim blogu, dodaj credit w formie odnośnika do Land of Instructions.


<center>
<div id="nazwa">
<div class="abc">
<b>TYTUŁ MENU</b>
</div>
<a class="log" href="https://www.blogger.com/LINK">NAZWA1 </a>
<a class="log" href="https://www.blogger.com/LINK">NAZWA2</a>
<a class="log" href="https://www.blogger.com/LINK">NAZWA3</a>
<a class="log" href="https://www.blogger.com/LINK">NAZWA4</a>
<a class="log" href="https://www.blogger.com/LINK">NAZWA5</a>
<a class="log" href="https://www.blogger.com/LINK">NAZWA6</a>
</div>
</center>
<style type="text/css">
.abc {
color: #fff !important;
width: 200px;
font-size: 25px;
font-family: PlayFair Display;
text-transform: lowercase;
letter-spacing: 1px;}

a.log:link {
background: #ccc !important;
color: #fff !important;
display: block;
width: 230px;
margin: 2px;
text-align: center;
text-decoration: none;
letter-spacing: 1px;
font-size: 10px;
font-family: Verdana;
letter-spacing: 1px;
border: 0px !important;
webkit-transition: all 350ms;-moz-transition: all 350ms;-o-transition: all 350ms;transition: all 350ms;}

a.log:link:hover{
background: #93bab9 !important;
color: #fff !important;
border-radius: 50%;
webkit-transition: all 350ms;-moz-transition: all 350ms;-o-transition: all 350ms;transition: all 350ms;}
</style>

Czerwonym zaznaczone są podstawowe elementy, bez których kod nie zadziała.

Na zielono jest dodatkowy selektor, który stworzyłam, ponieważ chciałam dla tytułu menu dać inny efekt niż do linków.
Różowy to podstawowe opcje html, które można dodać (tutaj pogrubienie i wyśrodkowanie)

Wydaje mi się, że wszystko jest w miarę proste, jeśli macie jakieś wątpliwości to piszcie.

Najważniejsze jest, by zapamiętać jak się tworzy selektory (<div class="xyz">) oraz by po zakończeniu, zamknąć kod (</div>).