✿Modelos Para Menu Escondido Com Tags (feito por mim)

Boa Tarde , eu dormi o dia inteiro , sem contar que a casa está cheia - infelizmente - , me levantaram do meu sono profundo (que eu precisava) , para concertar o ventilador , que tinha parado de funcionar. Eu to assistindo Dragões : A Origem das Corridas de Dragão , eu amei é a coisa mais fofa do mundo , é sempre bom sorrir um pouco , quando alguém está completamente mal , e tentando seguir em frente fica sempre melhor , e devemos lutar não é? Eu sei demonstrar que sou forte mais na verdade estou péssima por dentro. Como se alguém fosse perceber. Hoje o ser humano não liga para um ao outros , se importam apenas consigo mesmo , deixando as pessoas que tem menas ''capacidade'' de fora por que o ser humano pra mim é uma coisa suja. (Mais isso é outra História).

Como eu ainda quero postar muitos tutoriais e goodies que eu quase nunca posto , resolvi então trazer alguns modelos para Menu Escondido , mais com Tags Prometo que não é a coisa mais bonita do mundo , porém , eu to tentando acrescentar coisas novas , eu outras coisas fazendo assim , uma grande coisa , entendeu? Não? Então vamos ao tutorial.

01. Eu já postei o tutorial veja :Vizualize o Tutorial do Menu
02. Primeiramente devemos alterar o HTML , então vá no HTML de seu blog e procure por ]]>< :
03. Logo a cima você cola esse código :

Código do Modelo Um

.dd1{
width:30%;
padding: 5px 0 4px 0;
margin: 0 0 4px 4px;
float: left;
height: 17px;
text-align: center;
font-family: "Verdana";
font-size: 11px;
background: #4c4353;
box-shadow: inset 0 0 1px #342c3a;
-webkit-transition: all 1.5s ease-out;
}
.dd1:hover{
background: #665d6c;
box-shadow: inset 0 0 3px #514758;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-shadow: 1px 1px 0 #514758;
-webkit-transition: all 1.5s ease-out;
}
.dd1 a{
color: #9d9a9f;
text-shadow: 1px 1px 0 #3d3344;
text-decoration: none;
}
.dd1 a:hover{ text-shadow: 1px 1px 0 #514758;}
@font-face { font-family: "farma"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.dd2{
width:30%;
padding: 5px 0 4px 0;
margin: 0 0 4px 4px;
float: left;
height: 17px;
text-align: center;
font-family: "Verdana";
font-size: 11px;
background: #925f82;
box-shadow: inset 0 0 3px #7a4369;
-webkit-transition: all 1.5s ease-out;
}
.dd2:hover{
background: #b085a3;
box-shadow: inset 0 0 3px #7a4369;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all 1.5s ease-out;
}
.dd2 a{
color: #fff;
text-shadow: 1px 1px 0 #7f4a6e;
text-decoration: none;
}
.dd2 a:hover{ text-shadow: 1px 1px 0 #8e5b7e;}
.sidemenu {
position: fixed;
padding:10px;
top: 0;
opacity:0.8;
width: 200px;
height: 100%;
border-right: 15px solid #4c4353;
left: -218px;
background-color: #FFFAFA;
font-family:calibri;
font-size:13px;color: #4c4353;
text-align: justify;
-webkit-transition: all .7s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .7s ease-out;
transition: all .7s ease-out;
z-index: 151234354}
.sidemenu:hover {
opacity: 1;left: 0px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .7s ease-out;
-o-transition: all .7s ease-out;
transition: all .7s ease-out;
04. Vá em adicionar Gadgets Java/Scritp e coloque o modelo numero um (se escolher) :
Modelo Um - Vinho e Lilás (o menu de tag) e uma foto com Sorvete
<div class="sidemenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6b6A_OuPSavxQlYGIALcHx4_Yi7HHk6XGn43gMPJFUK16ltycdagFqQzizUA0p3CVdTsuuzTUkqe6HnoAt6-92171XK43VrPCHwwasSPN94R16JlFi154zjnu2vcZU6JEI31AFOzLLUY/s1600/v6.png" height="200" width="200"/><br/><center><small> Sejam bem vindos , esse é o menu escondido , e o modelo de tag para por então ficar (Menu Escondido com modelo de Tag) ,tudo junto , espero que gostem e que fique a vontade. Até ~ </small><br />
<div style='text-align:center;margin-left:px; margin-bottom:10px;margin-top:15px;text-transform:uppercase;'>
<div class="dd1"><a href="/">Título</a></div>
<div class="dd2"><a href="/">Título</a></div>
<div class="dd1"><a href="/">Título</a></div>
<div class="dd2"><a href="/">Título</a></div>
<div class="dd1"><a href="/">Título</a></div>
<div class="dd2"><a href="/">Título</a></div>
<div class="dd1"><a href="/">Título</a></div>
<div class="dd2"><a href="/">Título</a></div>
<div class="dd1"><a href="/">Título</a></div>
<div class="dd2"><a href="/">Título</a></div>
<div class="dd1"><a href="/">Título</a></div>
<div class="dd2"><a href="/">Título</a></div>
</div></center></div>

Código do Modelo Dois
.dd1{
width:30%;
padding: 5px 0 4px 0;
margin: 0 0 4px 4px;
float: left;
height: 17px;
text-align: center;
font-family: "Trebuchet MS";
font-size: 11px;
background: #DB7093;
box-shadow: inset 0 0 1px #342c3a;
-webkit-transition: all 1.5s ease-out;
}
.dd1:hover{
background: #FF6EC7;
box-shadow: inset 0 0 3px #514758;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-shadow: 1px 1px 0 #FF6EC7;
-webkit-transition: all 1.5s ease-out;
}
.dd1 a{
color: #fff;
text-shadow: 1px 1px 0 #DB7093;
text-decoration: none;
}
.dd1 a:hover{ text-shadow: 1px 1px 0 #FF6EC7;}
@font-face { font-family: "farma"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.dd2{
width:30%;
padding: 5px 0 4px 0;
margin: 0 0 4px 4px;
float: left;
height: 17px;
text-align: center;
font-family: "Verdana";
font-size: 11px;
background: #FF6EC7;
box-shadow: inset 0 0 3px #7a4369;
-webkit-transition: all 1.5s ease-out;
}
.dd2:hover{
background: #DB7093;
box-shadow: inset 0 0 3px #7a4369;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all 1.5s ease-out;
}
.dd2 a{
color: #fff;
text-shadow: 1px 1px 0 #FF6EC7;
text-decoration: none;
}
.dd2 a:hover{ text-shadow: 1px 1px 0 #DB7093;}
.sidemenu {
position: fixed;
padding:10px;
top: 0;
opacity:0.8;
width: 200px;
height: 100%;
border-right: 15px solid #DB7093;
left: -218px;
background-color: #FFFAFA;
font-family:calibri;
font-size:13px;
color: #DB7093;
text-align: justify;
-webkit-transition: all .7s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .7s ease-out;
transition: all .7s ease-out;
z-index: 151234354}
.sidemenu:hover {
opacity: 1;left: 0px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .7s ease-out;
-o-transition: all .7s ease-out;
transition: all .7s ease-out;
05. Vá em adicionar Gadgets Java/Scritp e coloque o modelo numero dois (se escolher) :
Modelo Dois - Neon Pink & Medium Violet Red
<div class="sidemenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiObKpscKFywLm-2D9pNtUAZvQogxVtiXJ4cEl8OsvF1NGlmsJs4DesLcwrYByoyzy_ZCPTajNpe6WUEVgnkJomVzdE6EL8aQAtQpsikI_7haC-XCf3JqRaG6w26eJ6tGxt8zuoKYH8klU/s1600/v8.png" height="250" width="200"/><br/><center><small> Sejam bem vindos , esse é o menu escondido , e o modelo de tag para por então ficar (Menu Escondido com modelo de Tag) ,tudo junto , espero que gostem e que fique a vontade. Até ~ </small><br />
<div style='text-align:center;margin-left:px; margin-bottom:10px;margin-top:15px;text-transform:uppercase;'>
<div class="dd1"><a href="/">Título</a></div>
<div class="dd2"><a href="/">Título</a></div>
<div class="dd1"><a href="/">Título</a></div>
<div class="dd2"><a href="/">Título</a></div>
<div class="dd1"><a href="/">Título</a></div>
<div class="dd2"><a href="/">Título</a></div>
<div class="dd1"><a href="/">Título</a></div>
<div class="dd2"><a href="/">Título</a></div>
<div class="dd1"><a href="/">Título</a></div>
<div class="dd2"><a href="/">Título</a></div>
<div class="dd1"><a href="/">Título</a></div>
<div class="dd2"><a href="/">Título</a></div>
</div></center></div> 
Até Mais ~

2 comentários:

Olá , antes de você comentar , existe regras e gosto de pessoas que respeitem.
- Não fale nenhum palavra
- Aqui é proibido ofender as pessoas
- Não coloque comentários anônimos , se você tem medo , não comente
- Aceito Tags , Celinhos , etc ..

Regras básicas , porém , precisam saber que aqui é um lugar de paz. E eu não quero brigas , a não ser que de alguma form aja. Espero que gostem do blog , e se quiserem seguir , fiquem a vontade. Ate~ (Agora comente).