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>