Storm Design | Templates Exclusivos | Tutoriais de Web Design | Peça seu Template Exclusivo Grátis

Barra de rolagem no html

Oi pessoal -v- quanto tempo spoakspokasopk
vim pmostrar como fazer isso

Uma barra de rolagem,  é bem simples, é só colar esse código:

<div style="height:100px; width:200px; overflow:auto; background-color:
#FFFFCC; text-align: center;padding: 2px; margin:5px ">
<div style="width:160px"> 
Conteúdo da caixa de rolagem
</div></div>

e colocar o que deseja colocar dentro da caixa de rolagem onde está escrito "Conteúdo da caixa de rolagem"
~edição das partes em vermelho~
height: altura da caixa
width: largura da caixa
Background-color: cor do fundo da caixa
text-align: center, left ou right (posição do texto: centro, esquerda ou direita)
padding: margem interna
margin: margem externa

é isso pessoal ^^
Marcadores: , ,

Formulario de Contato em Modal

E ae pessoal o/
antes de começar, eu queria estar pedindo pra vocês se não entenderem algo ou estarem dando erro, comentem, pois eu acabei de aprender esse metódo kk xD


Primeiro, vocês vão em: Modelo > Editar Html. Procurem por:

<head>

E embaixo cole:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

 $(document).ready(function() {   

    $(&#39;a[name=modal]&#39;).click(function(e) {
        e.preventDefault();
       
        var id = $(this).attr(&#39;href&#39;);
   
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
   
        $(&#39;#mask&#39;).css({&#39;width&#39;:maskWidth,&#39;height&#39;:maskHeight});

         $(&#39;#mask&#39;).fadeIn(1000);   
        $(&#39;#mask&#39;).fadeTo(&quot;slow&quot;,0.8);   
   
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
             
        $(id).css(&#39;top&#39;,  winH/2-$(id).height()/2);
        $(id).css(&#39;left&#39;, winW/2-$(id).width()/2);
   
        $(id).fadeIn(2000);
   
    });
   
    $(&#39;.window .close&#39;).click(function (e) {
        e.preventDefault();
       
        $(&#39;#mask&#39;).hide();
        $(&#39;.window&#39;).hide();
    });       
   
    $(&#39;#mask&#39;).click(function () {
        $(this).hide();
        $(&#39;.window&#39;).hide();
    });           
   
});

 </script>

Logo depois, procurem po:

]]></b:skin>

 E acima dele:

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
  text-size: 20px;
}
 
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:600px;
  height:480px;
  display:none;
  z-index:9999;
  padding:20px;
}

 #boxes #dialog {
  width:600px;
  height:480px;
  padding:10px;
  background-color:#ffffff;
}

.close{display:block; text-align:right;}

Então você procura por:

</body>

E então acima dele cole:


 <div id='boxes'>

 <div class='window' id='dialog'>
<a class='close' href='#'>Fechar [X]</a><br/>
<b> </b><br/> 
Código do Formulario
<!-- Máscara para cobrir a tela -->
  <div id='mask'/>

 Nota** Você pode estar criando um formulário em Woofu Google Docs...
Marcadores: , , , , ,

Caixa de Pesquisa personalizada


Bem, só um fácil e rápido tutorial ^^
Primeiro vá em Editar Html
Pesquise por:

]]>

Cole acima dela o seguinte:

/* Busca
----------------------------------------------- */
.buscador {
margin:0pt;
padding:0pt;
}
.buscador span {
margin:0pt;
padding:0pt;
}
#search{
display: none;
}
#sidebar form {
margin:0;
padding:1px 0;
clear:both;
}
.searchtitle {
font:bold 14px "Aldo", sans-serif, "Lucida Sans", Tahoma!important;
color:#fff;
}
#searchform {
margin: 5px auto ;
padding: 0;
}
#searchform #s {
height:20px;
width:180px;
margin-left:10px;
font:14px Verdana, Arial, Helvetica, sans-serif;
border:1px solid #272727;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
}
#searchsubmit {
padding:0;
background:#272727;
color:#fff;
text-shadow: 0px 1px 2px #000;  (pode ser removido)
border:1px #000;
width:60px;
height:22px;
font:14px "Arial", "Lucida Sans Unicode", Verdana;
font-weight:normal;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
}
#searchsubmit:hover {
background:#ccc;
color:#000;
text-shadow: 0px 1px 2px #fff;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
}

Edite os campos em vermelho

Agora vá em adicionar um novo Gadget, e adicione o seguinte html:

<div class='buscador'>
<span>
<form action='/search' id='searchform' method='get'>
<table border='0' cellpadding='0' cellspacing='3'>
<tbody>
<tr>
<td><input id='s' name='q' type='text' value='Pesquisar...'/></td>
<td><input id='searchsubmit' type='submit' value='Buscar'/></td>
</tr>
</tbody>
</table>
</form>
</span></div>

Só salvar e ver como ficou ^^
Marcadores: , , , ,

Facebook na lateral


Vamos lá
1º - Vá em Editar Html.

2º - 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º - Salve o modelo.

Agora vamos adicionar essa Box em seu blog, então faça o seguinte:
Vá em 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">
//<!--
$(document).ready(function() {$(".box-curtir-flutuante").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.box-curtir-flutuante{background: url("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/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&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe></div></div>

6º - Feita as alterações, clique em Salvar.
Marcadores: , , ,
Assinar: Postagens (Atom)