Tutorial - Menu Sweet Simple


Hey pixels! como já devem ter reparado, eu fiquei sem postar alguns dias, na verdade nem foi culpa do tempo e sim da minha criatividade, eu não tinha ideias para postar, mesmo por que o blog ainda não tem uma ask acho que o blog ainda e muito pequeno para isso, o que adianta ter uma ask e não 
ter leitores? Estava completamente confusa em relação a isso, mas até que enfim eu tive uma ideia do 

que postar, decidi criar um menu para vocês usarem, não é grande coisa, mesmo porque ainda sou iniciante no HTML, mas achei até que ficou bonitinho, coloquei o nome do menu de "Sweet Simple" ele e bom para ser usado em templates fofos por ser pequeno, acho que ele mantem o estilo kawaii, se quiserem ver o preview do menu aqui está o link. Espero que gostem do menu.


Primeiro abra seu HTML >>> agora click na caixinha do HTML e pressione ctrl + f.
Cole na caixinha:
 ]]></b:skin>

quando achar cole acima o seguinte código:

.MenuSweetSimple {
font-family: tahoma; /* fonte */
font-size: 10px; /* tamanho da fonte */
line-height: 10px; /* altura da linha */
text-align: center; /* centralização do texto */
width: 35px; /* largura do menu */
color: #000; /* cor do texto */
background: #fff; /* fundo */
padding: 5px; /* espaço entre o texto e as bordas */
margin: 5px; /* espaço entre os links */
display: inline-block;
border-radius: 5px;
border: 1px solid #696969} /* cor da borda */
.MenuSweetSimple:hover {
Background: #000; /* fundo */
color: #fff /* cor do texto */
border: 1px solid #fff /* cor da borda */
}

Em um Gadget de HTML/JAVASCRIPT cole:

<div class="MenuSweetSimple"><a href="LINK DA PÁGINA">Nome da Pagina</a></div>
<div class="MenuSweetSimple"><a href="LINK DA PÁGINA">Nome da Pagina</a></div>
<div class="MenuSweetSimple"><a href="LINK DA PÁGINA">Nome da Pagina</a></div>
<div class="MenuSweetSimple"><a href="LINK DA PÁGINA">Nome da Pagina</a></div>

obs: podem usar a vontade, mais creditem sempre.



4 comentários: