2 - Resultado do cálculo automático no edit

Codigo: <body><script>function soma() { form.campo4.value = (form.campo1.value*1) - (form.campo2.value*1) } </script> <form name="form">Valor 1: R$ <input name="campo1" id="campo1" size=5 value="" onkeyup="soma()" /><br/>Desconto: R$ <input name="campo2" id="campo2" size=5 value="0.10" onkeyup="soma()" readonly/><br/>Resultado: <input name="campo4" size=5 readonly/></form></body></html>

Valor 1: R$ Desconto: R$ Resultado:

1 - Resultado do cálculo automático no edit

<form action="" method="post"> Valor: <input type="text" name="valor_unitario" id="valor_unitario" /> Taxa: <input type="text" name="qnt" id="qnt" value="0.10" readonly="readonly" /> Total: <input type="text" name="total" id="total" readonly="readonly" /> </form> <script type="text/javascript">function id(el) { return document.getElementById( el ); } function total( un, qnt ) { return parseFloat(un.replace(',', '.'), 10) - parseFloat(qnt.replace(',', '.'), 10); } window.onload = function() { id('valor_unitario').addEventListener('keyup', function() { var result = total( this.value , id('qnt').value ); id('total').value = String(result.toFixed(2)).formatMoney(); }); id('qnt').addEventListener('keyup', function(){ var result = total( id('valor_unitario').value , this.value ); id('total').value = String(result.toFixed(2)).formatMoney(); }); } String.prototype.formatMoney = function() { var v = this; if(v.indexOf('.') === -1) { v = v.replace(/([\d]+)/, "$1,00"); } v = v.replace(/([\d]+)\.([\d]{1})$/, "$1,$20"); v = v.replace(/([\d]+)\.([\d]{2})$/, "$1,$2"); v = v.replace(/([\d]+)([\d]{3}),([\d]{2})$/, "$1.$2,$3"); return v; }; </script>

Valor:
Taxa:
Total:

Calcular comissão % automaticamente

<script>function calcular() { var comissao = (parseFloat($("#valorPorcentagem").val())/100) * parseFloat($("#valor_vendedor").val()); $("#comissao").val(comissao); } </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select id="valorPorcentagem"> <option value="10">10%</option> <option value="5">5%</option> <option value="1.99">1.99%</option> <option value="2.99">2.99%</option> <option value="3.99">3.99%</option> <option value="4.99">4.99%</option> </select> Valor: R$ <input id="valor_vendedor" onkeyup="calcular()"><b>Comissao: R$</b><input type="text" name="total" id="comissao" readonly>

10% 5% 1.99% 2.99% 3.99% 4.99% Valor: R$
Comissao: R$

Consultas SQL utilizando PDO (PHP Data Objects)

<?php // Instancia o objeto PDO $pdo = new PDO('mysql:host=localhost;dbname=banco', 'user', 'senha'); // define para que o PDO lance exceções caso ocorra erros $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); ?> <?php // executa a instrução SQL $consulta = $pdo->query("SELECT nome, usuario FROM tabela;"); while ($linha = $consulta->fetch(PDO::FETCH_ASSOC)) { // aqui eu mostro os valores de minha consulta echo "ID: {$linha['nome']} <br /> Saldo: {$linha['usuario']}<br /><br />"; } ?>

Texto - HTML5

<html lang="pt-br"> <style> h2 { font-family: Arial; font-size: 15pt; color: #828282; } </style> <h2 style="text-align: center;"> <b>Texto no centro em negrito</b></h2> <h2 style="text-align: center;"> <i>Texto no centro itálico</i></h2> <h2 style="text-align: center;"> Texto no centro</h2> <h2 style="text-align: left;"> Texto a esquerda</h2> <h2 style="text-align: right;"> Texto a direita</h2> <h2 style="text-align: justify;"> Texto justificado</h2>

Codigo Style para mudar cor e tamanho da fonte no site

<style> h1 { font-family: arial; font-size: 100pt; color:blue; text-shadow: 2px 2px 2px red; } </style> <style>h2 { font-family: arial; font-size: 50pt; color:blue; text-shadow: 2px 2px 2px red; } </style> <h1>Ola mundo</h1><h2>Ola mundo</h2>

Tag usada para os acentos aparecerem sem erros no site

Tag usada para os acentos aparecerem sem erros no site, recomendado usar entre as tags <head> <meta charset="UTF-8"/>

CERTIFICADO SSL

Depois de instalado o CERTIFICADO SSL no seu domínio, Caso utilize um script PHP comum, puro, onde todas as páginas passam pelo index.php, basta adicionar as linhas abaixo logo no início do seu index.php desta forma todas as paginas que passam pelo index.php terão o certificado... <?php if($_SERVER["HTTPS"] != "on") { header("Location: https://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URL"]); exit(); } ?>

Link do Roda-Pé do site - Desenvolvido por:

Codigo: <p><a href="#" target="_blank"><FONT FACE="Arial" SIZE="2"><font color="#1C1C1C"> Desenvolvido por: Nome Aqui </font></a></p>

Pesquisa interna dentro do site

Esse é um script para quem não quer pôr as mãos em Servers-Side (PHP/ASP) e BD's (MySQL), mas quer que os visitantes possam fazer uma pesquisa interna, isto é, dentro do site. <!-- INICIO DO FORMULARIO DE PESQUISA --><FORM method="GET" action="http://www.google.com.br/custom"><INPUT type="text" name="q" size="25" maxlength="255" value="" style="width:214px;"><INPUT type="submit" name="btnG" value="Pesquisar" style="width:88px;"><INPUT type="hidden" name="domains" value="http://www.seusite.com.br"><INPUT type="hidden" name="sitesearch" value="http://www.seusite.com.br"><INPUT type="hidden" name="cof" value="GALT:#488000;S:http://www.seusite.com.br;VLC:#800080;AH:center;BGC:#FFFFFF;LC:#0000FF;GFNT:#7777CC;L:http://www.seusite.com.br/sualogo.jpg;ALC:#FF0000;T:#000000;GIMP:#FF0000;"></FORM><!-- FIM DO FORMULARIO DE PESQUISA -->

Menu - Fazer rolar suavemente para seu destino ao invés de saltar instantaneamente.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script> <script type="text/javascript">jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top}, 2000); }); }); </script> Para alterar a velocidade do scroll, é só modificar o número 2000. Depois, é só definir seus links de âncora com a classe “scroll” e não esquecer de que o destino deve ter a id igual ao link. <a href="#footer" class="scroll">Descer</a>(...) <div id="footer">Rodapé</div>

Caixa de pesquisa para blogger - 2

<style>#search-box { position: relative; width: 100%; margin: 0; } #search-form { height: 40px; border: 1px solid #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #fff; overflow: hidden; } #search-text { font-size: 14px; color: #ddd; border-width: 0; background: transparent; } #search-box input[type="text"] { width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none; } #search-button { position: absolute; top: 0; right: 0; height: 42px; width: 80px; font-size: 14px; color: #fff; text-align: center; line-height: 42px; border-width: 0; background-color: #4d90fe; /*--define a cor do botão Buscar--*/ -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; cursor: pointer; } </style><div id='search-box'> <form action='/search' id='search-form' method='get' target='_top'> <input id='search-text' name='q' placeholder='Digite sua pesquisa' type='text'/> <button id='search-button' type='submit'><span>Buscar</span></button> </form></div>

Caixa de pesquisa para blogger

<style type="text/css"></style> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input id="s" name="q" value="" type="text" /><input value="Buscar" name="btnG" type="submit"/></form></div>

Janela modal com botão de abrir

<html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body> <h2>Janela modal</h2> <p>Para abrir a janela clique no botao verde</p> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-success btn-md" id="myBtn">Abrir janela modal </button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title"><font color="#1E90FF">Titulo Aqui...</font></h4> </div> <div class="modal-body"> <p><font color="#1E90FF">Conteudo...</font></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="myModal2" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Options</h4> </div> <div class="modal-body"> <p>Modal content..</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div></div> <script>$(document).ready(function(){ $("#myBtn").click(function(){ $("#myModal").modal({show: true}); }); $("#myBtn2").click(function(){ $("#myModal2").modal({show: false}); }); }); </script> </body></html>

Janela modal automatica

OBS: Coloque o codigo no final do roda-pe... <html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title"><font color="#1E90FF">Titulo Aqui...</font></h4> </div> <div class="modal-body"> <p><font color="#1E90FF">Conteudo...</font></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="myModal2" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Options</h4> </div> <div class="modal-body"> <p>Modal content..</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div></div> <script>$(function() { $('#myModal').modal('show'); }); </script> </body></html>

Colocar cor no background do site

Codigo: <style type="text/css">body { background-color: #FC0; } </style></head>