Top Downs Evollution

Como Fazer um Menu Vertical Fixo no Blogger

Johny Michael

sábado, 24 de março de 2012

Vamos mostrar como colocar um menu vertical fixo na lateral do seu blog, mas esse menu tem o estilo expansível, ou seja, quando passa o mouse sobre o menu o ícone expande e mostra o título do menu dando uma melhor aparência e atraindo atenção dos visitantes. Caso esteja procurando um menu com links lado a lado veja como fazer um menu horizontal.

Fonte: DicasParaBlogs

O código é muito simples de colocar no blog você só precisa entrar na pagina layout, adicionar gadget, escolher a opção HTML/javascript e colar o seguinte código:

<style type="text/css">

/* CSS Style for Horizontal Menu - info @ http://www.spiceupyourblog.com*/

#hor {

list-style:none;
padding:0;
margin:0;
}
#hor li {
float:left;
padding:5px;
}
#hor a {
display:block;
height: 12px;
text-indent:-999em;
}
#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}
#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}
#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}
/* CSS Style for Vertical Menu */
#ver {
list-style:none;
padding:0;
margin:0;
}
#ver li {
padding:2px;
}
#ver li a {
display:block;
height:12px;
text-indent:-999em;
}
#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}
#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}
#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}
.clear {
clear:both;
}
*{
/* A universal CSS reset */
margin:0;
padding:0;
}
#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;
/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh36OvQB05u4KGknQyg5VUAzXJ9zRsD0kOZ5NTKpV2w3OO-xMXX42ftGdbg8OP9ube9xfFJKZcFoJoIzp5_abCQId1bB-sQmoBFAhlBtu72DAZGGrAsRJZG_kgsOy5VqDFCN7QOjy1cUUs/s1600/navigation.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
/* Green Button */
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Orange Button */
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
/* Yellow Button */
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
/*End menu css - info @ http://www.spiceupyourblog.com */
</style>
<div style='position: fixed; top: 40%; left: 10px;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="endereço da pagina">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="endereço da pagina">
<span>Sobre</span>
</a>
</li>
<li>
<a class="services" href="endereço da pagina">
<span>Serviços</span>
</a>
</li>
<li>
<a class="portfolio" href="endereço da pagina">
<span>Portfolio</span>
</a>
</li>
<li>
<a class="contact" href="endereço da pagina">
<span>Contato</span>
</a>
</li>
</ul>
</div><a href="http://www.spiceupyourblog.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

Você apenas precisa trocar os links e texto do menu, mas cuidado, por exemplo, no trecho: <a class="contact" href="endereço da pagina">

<span>Contato</span> a parte class="contact" é o estilo CSS e você não deve mexer nele. O que podemos alterar é o texto Contato que aparece no final: <span>Contato</span>

Caso o menu fica muito perto da lateral da pagina você pode aumentar a margemmudando o valor 10 nesta linha:<div style='position: fixed; top: 40%; left: 10px;'/>

Temos Atualmente: 0 comentários

Tutoriais

COMO MUDAR PRIMEIRA LETRA DO TITULO DO POST

Johny Michael

Eae galerinha, hoje vou ensinar como mudar de cor a primeira letra do post e da sidebar.

1º Vá no painel do seu blog > Design > Editar HTML

2º Aperte CTRL+F e procure pela tag ]]></b:skin>

3º ACIMA desta tag coloque o seguinte código: DOWNLOAD DO CODIGO

OBS.: Se não funcionar, pode estar ocorrendo algum conflito entre CSS, entao para resolver isso coloque o codigo um pouco mais acima, MAS ATENÇÃO, cuidado para não interromper nenhuma outra CSS.

Temos Atualmente: 0 comentários

Tutoriais

Adicionar Box Expansível do Facebook com Efeito Jquery em seu Blog

Johny Michael

Hoje nós iremos aprender a como adicionar uma box expansível do Facebook no Blogger. Essa box possui o efeito Jquery isso faz que a box contenha um efeito mais elegante. Esse Box tem o seguinte funcionamento: ao adicionar esse widget, aparecerá o botão do Facebook flutuando no seu blog, mas quando você posicionar o mouse por cima desse botão, irá expandir e aparecerá a caixa de curtir do Facebook. Veja a Demostração: http://demo2ub.blogspot.com

Vamos ao Tutorial:
1º - Vá no Painel de Controle de seu Blog e clique na Guia Modelo.
2º - Clique no Botão Editar HTML.
3º - Agora pressione as teclas CTRL+F e procure por:

</ head>

4º - E ACIMA dele cole o seguinte código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

5º - Clique em Salvar Modelo.

Agora vamos adicionar essa Box em seu blog, então faça o seguinte:
Clique na Guia Layout → Adicionar um Gadget e selecione a opção "HTML/JavaScript". (Não adicione título no gadget). Na caixa do Gadget cole o código abaixo:

<script type="text/javascript">
//
</script>
<style type="text/css">
.box-curtir-flutuante{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUfYNGLzdjIFESDkq6mV5ZHJJ2hh-i_smKfxAxbSCPXTOo3GmJwXk0gPZBMzCgjg86UVYEGiRmr12bi3DUTycUoX7MEGxo-M43Pi9Iw0SmqjENrvmdsq9dHgUPj4Xo9dcRgc_uw0HctgU/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.box-curtir-flutuante div{border:none;position:relative;display:block;}
.box-curtir-flutuante span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.box-curtir-flutuante span a{color: #808080;text-decoration:none;}
.box-curtir-flutuante span a:hover{text-decoration:underline;}
</style><div class="box-curtir-flutuante" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=COLOQUE-O-URL-DA-SUA-PÁGINA-DO-FACEBOOK&width=251&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe></div></div>

Lembre-se de alterar o texto destacado em vermelho, pelo Url da sua Página do Facebook.

6º - Feita as alterações, clique em Salvar

Temos Atualmente: 0 comentários

Tutoriais

Menu Hover

Johny Michael

Peguei um Menu Hover no Google todo Bugado , as Imagens Tudo ja tinham sido deletadas ,

entao eu tirei os bugs e criei novas imagens irei estar postando um tutorial para colocar no blog

e o download as png e psd :D

Antes de ]]></b:skin> :

#menuimagem{

width:100px;

height:100px;

display:block;

position:absolute;

margin:399px 0 0 150px;

}

#home {

background:url(http://img16.imageshack.us/img16/6269/homeedz.png) no-repeat;

width:173px;

height:70px;

float:left;

}

#home:hover {

background:url(http://img822.imageshack.us/img822/6388/homehoverw.png) no-repeat;

width:173px;

height:70px;

float:left;

}

#HOME{

width:208px;

height:57px;

display:block;

position:absolute;

margin:-22px 0 0 20px;

}

#contato2 {

background:url(http://img19.imageshack.us/img19/1042/contatohover.png) no-repeat;

width:173px;

height:70px;

float:left;

}

#contato2:hover {

background:url(http://img19.imageshack.us/img19/1042/contatohover.png) no-repeat;

width:173px;

height:70px;

float:left;

}

#CONTATO2{

width:208px;

height:57px;

display:block;

position:absolute;

margin:-22px 0 0 200px;

}

#parceiros {

background:url(http://img402.imageshack.us/img402/2631/parceiross.png) no-repeat;

width:173px;

height:70px;

float:left;

}

#parceiros:hover {

background:url(http://img600.imageshack.us/img600/493/parceiroshover.png) no-repeat;

width:173px;

height:70px;

float:left;

}

#PARCEIROS{

width:208px;

height:57px;

display:block;

position:absolute;

margin:-22px 0 0 380px;

}

#pedidos {

background:url(http://img694.imageshack.us/img694/3673/pedidosjm.png) no-repeat;

width:173px;

height:70px;

float:left;

}

#pedidos:hover {

background:url(http://img10.imageshack.us/img10/9739/pedidoshover.png) no-repeat;

width:173px;

height:70px;

float:left;

}

#PEDIDOS{

width:208px;

height:57px;

display:block;

position:absolute;

margin:-22px 0 0 560px;

}

#equipe {

background:url(http://img205.imageshack.us/img205/2010/equipea.png) no-repeat;

width:173px;

height:70px;

float:left;

}

#equipe:hover {

background:url(http://img38.imageshack.us/img38/7741/equipehover.png) no-repeat;

width:173px;

height:70px;

float:left;

}

#EQUIPE{

width:208px;

height:57px;

display:block;

position:absolute;

margin:-22px 0 0 741px;

}

Depois de <body> no lugar que quiser onde o menu fique coloque isto :

<div id='menuimagem'>

<div id='HOME'>

<a href='#' id='home' title='Volte Para a Pagina Inicial'/>

</div>

<div id='CONTATO2'>

<a href='#' id='contato2' title='Entre em Contato !'/>

</div>

<div id='PARCEIROS'>

<a href='#' id='parceiros' title='Seja um Parceiro !'/>

</div>

<div id='PEDIDOS'>

<a href='#' id='pedidos' title='Faça Aqui Seu Pedido !'/>

</div>

<div id='EQUIPE'>

<a href='#' id='equipe' title='Veja os Membros de Nosso Site!'/>

</div>

Baixe Tambem as PSD :

Servidor: 4Shared

Tamanho: 4,631 kB

Contém:

*PSD's + PNG's

Temos Atualmente: 0 comentários

Tutoriais

Icone de Feed Flutuante no blog

Johny Michael

Atendendo a pedidos, através de 'Sugestão de postagens', hoje vou ensinar como colocar um ícone de Feed com efeito flutuante, igual ao usado aqui no Gothic Darkness.

A primeira coisa que você deve fazer é escolher um ícone (imagem) de Feed.

Agora clique na aba "Layout" e entre na edição HTML do seu template, clique em "Expandir modelos de widgets" e procure pela tag ]]>

e cole logo ABAIXO dela:

VER CODIGO

Ajuste os valores em:
top:10px; -> Distância da imagem para o topo
left:10px; -> Aqui você define a distância da imagem para esquerda.
Se quiser que a imagem fique flutuando à direita, altere "left" para "right".

GOSTO? COMENTE

Temos Atualmente: 0 comentários

Tutoriais

Como colocar xat no blog

Johny Michael

Faça um backup do template antes.

Vamos lá.

Faça login no blogger.
Clique em design/editar html.
De um ctrl+f e procure por ]]></b:skin>
Vc vai colar o código abaixo antes desse código

#banner-xat{

width:125px;

height:125px;

margin-top:220px;

float:right;

margin-right:23px;

border:0;

}

.xat-xdesigner {background:url(http://i.imgur.com/kQPAv.png) no-repeat;width:650px;height:400px;clear:both;margin:0 0 30px 100px;padding:20px 0 0 0;}

.xat-xdesigner embed{width:435px;height:341px;overflow:hidden;margin-top:10px;margin-left:-1px;margin-right:-4px;}

.xat-xdesigner h2{width:0px !important;;height:0px !important;;overflow:hidden !important;;}

Agora a segunda parte e mais enjoada
o segundo código deve ser colado antes do código do rodapé do blog!!
no meu blog o código é esse <div class='rodape'>

cole o código abaixo acima do código do rodapé

</div>

</center>

OBS: Aonde Estiver Isso Coloke o Codigo do Seu Xat Apartir do <Embed> Até </Embed>

<embed align='middle' allowscriptaccess='sameDomain' flashvars='id=154777308' height='290' name='chat' pluginspage='http://xat.com/update_flash.shtml' quality='high' src='http://www.xatech.com/web_gear/chat/chat.swf' type='application/x-shockwave-flash' width='375'/>

Temos Atualmente: 0 comentários

Tutoriais