Boas, hoje irei ensinar-vos como colocar um menu no topo do blog. É bem simples apenas precisam de prestar um pouco de atenção, então vamos lá aprender a colocar um menu no topo do blogger.
Em primeiro vamos a Modelo -> Editar HTML
Pressionamos:
Ctrl + F
E procuramos por:
<body>E depois desse código vamos colocar o código HTML a seguir:
<!-- Menu Topo -->
<div class='TugaDesignWebBack' style='height: 50px;'/>
<div class='TugaDesignWeb' href='/#'>Menu</div>
<div class='TugaDesignWeb' href='/#'>Menu</div>
<div class='TugaDesignWeb' href='/#'>Menu</div>
<div class='TugaDesignWeb' href='/#'>Menu</div>
Feito isto vamos substituir esta parte: href='/#'>Menu</div>
Onde tem "/#" devemos substituir por o link da página que nós queremos que o leitor vá e substituímos Menu pelo texto desejado.
Exemplo:
<div class='TugaDesignWeb' href='http://tugadesignweb.blogspot.pt/2014/09/css-button-lima-1.html'>CSS Button</div>
Se quiserem adicionar mais opções é só acrescentar: <div class='TugaDesignWeb' href='/#'>Menu</div>
Posto isto o menu deve ficar deste modo:
Agora vamos passar ao design do nosso menu no topo, para isso vamos usar código CSS:
Pressionamos:
Ctrl + F
E procuramos por:
]]></b:skin>Se quiserem um menu neste modo:
Adicionam este código CSS antes:
.TugaDesignWeb {
background: #FFF500;
text-align: center;
border-radius: 3px;
box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;
-webkit-transition: 0.3s;
-moz-transition-duration: 0.3s;
-htm-transition-duration: 0.3s;
display: inline-block;
font-style: normal!important;
color: black!important;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.26);
padding: 10px;
font: italic 15px arial;
position: relative;
font-weight: bold;
margin-left: 10px;
cursor: pointer;
padding-left: 50px;
padding-right: 50px;
text-shadow: 2px 2px 5px #800000;
box-shadow: 1px 1px 1px yellow;
top: 12%;
}
.TugaDesignWebBack {
width: 100%;
height: 32px;
background-color: black;
border: 2px solid yellow;
border-radius: 10px;
box-shadow: 2px 2px 5px #000000;
}
div.TugaDesignWeb:hover {
transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
background: #FFEB00;
text-decoration: none;
}
Se preferirem este menu colocam este código CSS antes:
.TugaDesignWebBack {
width: 100%;
height: 32px;
background: rgb(69,72,77);
background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
border: 1px solid rgb(129, 121, 121);
border-radius: 10px;
}
.TugaDesignWeb {
text-align: center;
border-radius: 3px;
-webkit-transition: 0.3s;
-moz-transition-duration: 0.3s;
-htm-transition-duration: 0.3s;
display: inline-block;
font-style: normal!important;
color: black!important;
padding: 10px;
font: italic 15px arial;
position: relative;
font-weight: bold;
margin-left: 10px;
cursor: pointer;
padding-left: 50px;
padding-right: 50px;
top: 12%;
background: rgb(169,3,41);
background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}
div.TugaDesignWeb:hover {
transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
background: #FFEB00;
text-decoration: none;
}
Espero que tenham aprendido a colocar um menu no topo do blog. Até à próxima aula, se quiserem modificar o Design ou se tiver algum erro, deixe nos comentários que eu ajudo!
0 comentários:
Enviar um comentário