Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens
Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens

Como Adicionar menu LavaLamp no Blog .

Lukas
Para esse tutorial necessita de um pouco de conhecimento.
 
Não é em todos os templates que vai dar certo.
 
Código 1 coloca antes de ]]></b:skin>


/* Styles for the entire LavaLamp menu */
.lavaLamp {
    position: relative;
    height: 0px; width: 421px;
    background: url("../image/bg.gif") no-repeat top;
    padding: 72px; margin: -40px 0;
    overflow: hidden;
}
    /* Force the list to flow horizontally */
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        /* Represents the background of the highlighted menu-item. */
        .lavaLamp li.back {
            background: url("http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20Driigo/lavalampd.png") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
                background: url("http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20Driigo/lavalampd.png") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        /* Styles for each menu-item. */
        .lavaLamp li a {
            font: bold 12px tahoma, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #fff;
outline: center;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
padding:5px 13px 0px 0px;
margin:3px 0px 0px 15px;
}

Código 2 coloca antes de </head>

<script src='http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20Driigo/jquery-1.2.3.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20Driigo/jquery.lavalamp.min.js' type='text/javascript'/>
<!-- Optional -->
<script src='http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20Driigo/jquery.easing.min.js' type='text/javascript'/><script type='text/javascript'>

$(function() { $(&quot;.lavaLamp&quot;).lavaLamp({ fx: &quot;backout&quot;, speed: 700 })});</script>


Código 3


Coloque abaixo de <body>  ouu aonde se quizer 
deixar o menu (isso necessita um pouco de conhecimento)

<div id='topo-menu'>
<div id='menu'>
<ul>
<li class='back'><div class='left'/></li>
<ul class='lavaLamp'>
  <li><a href='/'>Home</a></li>
            <li><a href='/'>Parceria</a></li>
            <li><a href='/'>Contato</a></li>
            <li><a href='/'>Mapa Do Site</a></li>
 <li><a href='/'>Pedidos</a></li>
        </ul>
<li class='back' style='left: 10px; width: 57px; display: block; overflow: hidden;'><div class='left'/></li></ul></div></div>

 
Boa sorte!
Deixe Seu Comentario

Colocar Opacidade nas Imagens do Blog

Lukas
Esse Efeito é muito simples, e funciona no Internet Explorer, 
Firefox, Chrome, 
Opera, Netscape, Safari, 
é um efeito muito util para imagens do seu site ou blog.
antes da tag ]]>

/*Opacidade Por Download Roots*/
img:hover {
filter: alpha(opacity=65);
opacity: 0.5;
}
Deixe Seu Comentario

Como Adicionar uma Box

Lukas
Primeiro vá no Blogger/ design/ Editar html.

aperte CTRL + F e procure por ]]></b:skin>.

depois copie o código abaixo e cole acima do ]]></b:skin>

.destaquebydriigo{
float:right;
padding:60px 0 0px 15px;
padding-top:47px;
margin-right:-82px;
margin-top:6px;
}

depois copie o proximo código e cole no lugar do header que fica próximo de <body>
(pode variar de template a template)

<!-- Video em Destaque -->
<div class='destaquebydriigo'>
<iframe frameborder='0' height='244' src='http://www.youtube.com/embed/E3ayWiBDgb0' width='370'/>
</div>
<!-- Video em Destaque -->



Pronto, agora pra mudar de lado e mover ele é só alterar os valores.
Deixe Seu Comentario

Botão de Seguir Flutuante

Lukas
Aeee, galerinha venho trazer um tuto bem legal. Sabe aquele bug que dá no widget dos seguidores então diga Adeus aos problemas, esse tutorial irá facilitar suas vidas. então vamos ao tutorial!


1º vá em Design > Elementos da página > Adicionar um Gadget> HTML/JavaScript. 
AGORÁ COLE O SEGUINTE CÓDIGO:
2ºObs*
Laranjado: o ID do seu blog que e encontrado na barra de endereço.
Verde: nome do seu site quer que aparaça quando passar o mouse por cima.
 
CÓDIGO:
<a href="http://www.blogger.com/follow-blog.g?blogID=SEU ID"              style="display:scroll;position:fixed;top:10px;left:12px;" target="_blank" title="Clique Para Seguir NOME DO SEU SITE">
<img src="http://th1010.photobucket.com/albums/af230/daianepiva/th_seguir.png" /></a>
 
 
Deixe Seu Comentario

Como colocar caixa de AVISO no Blog

Lukas
Coloque o Codigo Abaixo , Antes de ]]></b:skin>

}
#avisos {
background:url(http://i.imgur.com/VfvRG.png) no-repeat;
margin: auto;
float:right;
margin-top:20px;
width:500px;
height:156px;
}
#avisos h2{
width:0px !important;;
height:0px !important;;
overflow:hidden !important;;
}
#avisos marquee{
width:285px;
heigth:685px;
color:#FFF;
margin:105px 0 0 110px;
}

Coloque o Codigo Abaixo , Antes de <div class='leftsidebar-wrapper'>

<div id='avisos'>
<marquee behavior='SCROLL' direction='Left'>
<span style='font-weight:bold;'>Aviso</span> PoP Tutoriais. <span style='font-weight:bold;'>G Criation</span>Melhor Designer? So Aqui</marquee>
</div>

</div>
Deixe Seu Comentario

Efeito HOVE em Icones ou em outra imagem

Lukas
1.Primeiro Antes de Tudo Faça um backup não me responsabilizo por danos em templates
1.1 Vamos Usar como exemplo pra nosso tutoriais os Icones do Chrome, Firefox, Explore.
2. Adicionando o CSS Procure por ]]></b:skin>  e cole acima o codigo destacado abaixo:
#chrome:hover {
background:url(http://i.imgur.com/uY0TP.png) no-repeat;
width:190px;
height:40px;
float:left;
}


#chrome {
background:url(http://i.imgur.com/OJsM8.png) no-repeat;
width:190px;
height:40px;
float:left;
}


#explore:hover {
background:url(http://i.imgur.com/cjzp8.png) no-repeat;
width:190px;
height:40px;
float:left;
}

#explore {
background:url(http://i.imgur.com/ZwfXA.png) no-repeat;
width:190px;
height:40px;
float:left;
}


#firefox:hover {
background:url(http://i.imgur.com/otRnZ.png) no-repeat;
width:190px;
height:40px;
float:left;
}

#firefox {
background:url(http://i.imgur.com/wHErD.png) no-repeat;
width:190px;
height:40px;
float:left;
}

3. Adicione o HTML  Destacado abaixo no Local que você queira por eles.
3.3 Onde por o HTML? Procura por <body>.
<div id="chrome">
</div>
<div id="firefox">
</div>
<div id="explore">
</div>
Deixe Seu Comentario

Como colocar Publicidade

Lukas
COLOCAR NO TOPO
 Entre no Seu Blog Depois Em Design -> Editar Html -> de um Ctrl+ F e Procure Por: <div class='corpo'>

<center>
<a href='LINK-DO-SITE' target='_blank'><img alt='Anuncie Aqui!!' border='0' src='LINK-DA-IMAGEM'/></a>
<a href='LINK-DO-SITE' target='_blank'><img alt='Anuncie Aqui!!' border='0' src='LINK-DA-IMAGEM'/></a>
<a href='LINK-DO-SITE' target='_blank'><img alt='Anuncie Aqui!!' border='0' src='LINK-DA-IMAGEM'/></a>
<a href='LINK-DO-SITE' target='_blank'><img alt='Anuncie Aqui!!' border='0' src='LINK-DA-IMAGEM'/></a>
<a href='LINK-DO-SITE' target='_blank'><img alt='Anuncie Aqui!!' border='0' src='LINK-DA-IMAGEM'/></a>
<a href='LINK-DO-SITE' target='_blank'><img alt='Anuncie Aqui!!' border='0' src='LINK-DA-IMAGEM'/></a>
<a href='LINK-DO-SITE' target='_blank'><img alt='Anuncie Aqui!!' border='0' src='LINK-DA-IMAGEM'/></a></center>



COLOCAR NO FIM
Entre no Seu Blog Depois Em Design -> Editar Html -> de um Ctrl + F e Procure Por: </body>



<center>
<a href='LINK-DO-SITE' target='_blank'><img alt='Anuncie Aqui!!' border='0' src='LINK-DA-IMAGEM'/></a>
<a href='LINK-DO-SITE' target='_blank'><img alt='Anuncie Aqui!!' border='0' src='LINK-DA-IMAGEM'/></a>
<a href='LINK-DO-SITE' target='_blank'><img alt='Anuncie Aqui!!' border='0' src='LINK-DA-IMAGEM'/></a>
<a href='LINK-DO-SITE' target='_blank'><img alt='Anuncie Aqui!!' border='0' src='LINK-DA-IMAGEM'/></a>
<a href='LINK-DO-SITE' target='_blank'><img alt='Anuncie Aqui!!' border='0' src='LINK-DA-IMAGEM'/></a>
<a href='LINK-DO-SITE' target='_blank'><img alt='Anuncie Aqui!!' border='0' src='LINK-DA-IMAGEM'/></a>
<a href='LINK-DO-SITE' target='_blank'><img alt='Anuncie Aqui!!' border='0' src='LINK-DA-IMAGEM'/></a></center>
Deixe Seu Comentario
Assinar: Postagens