Menu Fixo no Topo do Blog com Redes Sociais

em quarta-feira, 15 de julho de 2015





No tutorial de  hoje, trago um menu fixo no topo do blog. A instalação é simples veja como mostra no modelo abaixo:


    Vá em " Layout">>Adicionar um Gadget e escolha HTML/JavaScript como mostra figura abaixo:

 Cole o seguinte Código:

<style>
#mymenuda {
background: #363636; /* Cor do background */
border-left: 200px solid #363636; /* Tamanho e cor da borda - não retire pois ela centraliza o menu */
width: 100%;
height: 32px;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
#mymenu {
background: #fff; /* Cor da fonte */
font-family: &#39;Arial&#39;, corsiva; /* Nome da fonte */
font-size: 20px; /* Tamanho da fonte */
text-transform: captalize;
}
#mymenu li {
list-style-type: none;
display: inline;
float: left; /* Posicionamento do menu */
padding: 0px;
}
#mymenu li a {
color: #fff;
text-decoration: none;
padding-right: 24px;
line-height: 37px;
}
#mymenu a:hover {
color: #EED5D2; /* Cor da fonte em hover */
}
#mymenu ul {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
margin-left: 40px;
}
#mymenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
padding-left: -40px;
}
#mymenu li ul a {
font-size: 12px;
line-height: 24px;
}
#mymenu li:hover ul ul,
#mymenu li:hover ul ul ul,
#mymenu li.sfhover ul ul,
#mymenu li.sfhover ul ul ul {
left: -999em;
}
#mymenu li:hover ul,
#mymenu li li:hover ul,
#mymenu li li li:hover ul,
#mymenu li.sfhover ul,
#mymenu li li.sfhover ul,
#mymenu li li li.sfhover ul {
left: auto;
}
#mymenuright {
float: right;
color: #fff;
}
/* BARRA DE PESQUISA */
.search{
float: left; /* Flutuando a esquerda */
font-family: Georgia, Tahoma; /* Nome da fonte */
}
.searchbar{
margin-top:7px;
height: 14px;
width: 240px;
color: #ccc; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo */
}
.searchbut{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGtSQktg_S9fRJ0wjD5lHYb0fWf5KUXyXC5C4SECjPq-UJIC4_-UBBhByrTlNRs8bFxLZGpvUA6SxhLR2xNPpmf0sizhF6j1LHrqHFnLNQlyVZr451g8qzLSKiUg6ouaf_W90EYRuopYo/s1600/2evyidy.png'); /* Link da imagem do botão de pesquisar | tamanho: 20x20px */
width:20px;
height:20px;
border: 0;
margin:6px;
}

</style>
<div id="mymenuda">

<div id="mymenu">

<li><a href=" Link ">Texto Link</a></li>

<li><a href="Link ">Texto Link</a></li>

<li><a href=" Link ">Texto Link</a></li>
<li><a href=" Link ">Texto Link</a></li>
<li><a href=" Link ">Texto Link</a></li></div>
<form action="/search" class="search" method="get">
<input class="searchbox" id="s" name="q" type="text" value="" />
<input class="but" type="submit" value="" />
</form>
<a href="LINK FACEBOOK" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOO6Grg60CzoASgtSywclzjmbVfk2WAhE_wOwsc76weRWCwZRmepxLpeLm0gsrrgX5FCUAWSduIB077VZpiAH7aHNxQSiS-ggJFX-armk-X5qjLaXdAAfpqrUZAeJi9AjZOsa8pKRxtYE/s1600/face.png" /></a>
<a href="LINK FEED" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQfC2WQCzyJPrPEjMIwPUJ_-V1fEKPv8y5SqM-tEbWMisLoG_q2hO7wtirnLu05AnngRYtCUXp6XzSfNnnUonlwf4CYQTYC6e2as1j1uPt8M8qMin9oTVKOKY451q_VEBohhSkWPQHMmw/s1600/feed.png" /></a>
<a href="LINK GOOGLE PLUS" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbiAMaxG8nhpJKf5TdTWnl_MLRkY-1H9gCiEd6zuJ31WMVwRXqj2Jr3hl-5G0oZXcsaSxFUVk1_PERuaHg5s8oDUoOLFNiP8hPUxWY7YOSbgGZuw3mHlUMI5dRxQY4w_X2ljUMd8JNLLY/s1600/gplus.png" /></a>
<a href="LINK INSTAGRAM" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMB5rmVqfSB-HLCyZRmdEnzlTcz2Spu41CZBM-YTHbYtfNnBaewcWnEQOfwmkciQcCOCo6ChT1OJdzoHvSeM5hHBiGutygBlTKKiWqRMr_iAlvfrrNZn_Zzh2qRMN-AxVdbZu7Yf9z7Nc/s1600/insta.png" /></a>
<a href="LINK TWITTER" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4_MavFXL-3nhb-9nh1sdiTVclEdvYsnEKoFdViuESoEejtH-mx5RfaNDLu3hOESisGHbiKUykKXBuGLaEKJ5m-JJ5LO2jaH2v4IWA96syWnkRDEAPr61qTEYnOrvh2jKho4iAJ4H7f5o/s1600/tter.png" /></a>
<a href="LINK YOU TUBE" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFfnooA2qUtq5XfVGg9MxXGlDmcZknFCmErHJ5ced3E-1GGibuPlkcObH1eAItDHG_mcsajkVstSu8CKNuEL-OtHyOGAECAJkNcN6MnqAn5n4pz56RwDUYgIdxbDTrN66DQEyqxi1s-S4/s1600/yuo.png" /></a>
</div></div>

Obs: Os lugares em vermelho é onde você deve modificar.
Ex: 

Links do menu
Link: é o link do texto que será exibido ou da home do seu blog ou qualquer outra página.
Texto Link: é o testo que será exibido no menu.

Redes sociais 
LINK FACEBOOK: é o link do seu perfil ou fanpage do facebook.
Pagar Instalação
R$ 12,00 

Nenhum comentário:

Postar um comentário