Gadget Calculadora para Blog/Site

Criei esta calculadora feita com HTML e Javas Script para que você  possa usa-la como Gadget em seu blog ou site, é bem simples de usa-la (como uma calculadora qualquer) clique nos números que deseja calcular e depois nos sinais, para limpar a conta clique no botão C

 

 

Código da Calculadora

Azul

<!--Calculadora Azul Tur-quesa.blogspot.com --><br /><div class="calculadora"><form name="calculadoraform"><table class="calctable" border="1"><tr id="visor"> <td bgcolor="#fff" colspan="4"><br /><input disabled type="text" name="visor" class="visor"/><br /></td> </tr><tr> <td><input type="button" value="7" class="botao" onClick="visor.value+='7'"/></td> <td><input type="button" value="8" class="botao" onClick="visor.value+='8'"/></td> <td><input type="button" value="9" class="botao" onClick="visor.value+='9'"/></td> <td><input type="button" value="+" class="botao" onClick="visor.value+=' + '"/></td> </tr><tr> <td><input type="button" class="botao" value="4" onClick="visor.value+='4'"/></td> <td><input type="button" value="5" class="botao" onClick="visor.value+='5'"/></td> <td><input type="button" value="6" class="botao" onClick="visor.value+='6'"/></td> <td><input type="button" value="−" class="botao" onClick="visor.value+=' - '"/></td> </tr><tr> <td><input type="button" value="1" class="botao" onClick="visor.value+='1'"/></td> <td><input type="button" value="2" class="botao" onClick="visor.value+='2'"/></td> <td><input type="button" value="3"class="botao" onClick="visor.value+='3'"/></td> <td><input type="button" value="×" title="Multiplicar" class="botao" onClick="visor.value+=' * '"/></td> </tr><tr> <td><input type="button" value="C" class="botao" onClick="visor.value=''"/></td> <td><input type="button" value="0" class="botao" onClick="visor.value+='0'"/></td> <td><input type="button" value="=" class="botao" onClick="visor.value=eval(visor.value)"/></td> <td><input type="button" value="÷" title="Dividir" class="botao" onClick="visor.value+=' / '"/></td> </tr></table></form><div class="linkcalc"><br /><br /><span id="preserve482405bc043340b69c2fafaba23629f8" class="wlWriterPreserve"><script type="text/javascript" src="http://static.tumblr.com/726xof9/2xlmqxe5g/mini_calc_link.js"></script></span> <br /></div></div><!--AND Calculadora Tur-quesa.blogspot.com --><br /><br /><link rel="stylesheet" type="text/css" href="http://static.tumblr.com/726xof9/qAWmqxff2/mini_calc_azul.css" /><br />

Rosa

<!--Calculadora Rosa Tur-quesa.blogspot.com --><br /><div class="calculadora"><form name="calculadoraform"><table class="calctable" border="1"><tr id="visor"> <td bgcolor="#fff" colspan="4"><br /><input disabled type="text" name="visor" class="visor"/><br /></td> </tr><tr> <td><input type="button" value="7" class="botao" onClick="visor.value+='7'"/></td> <td><input type="button" value="8" class="botao" onClick="visor.value+='8'"/></td> <td><input type="button" value="9" class="botao" onClick="visor.value+='9'"/></td> <td><input type="button" value="+" class="botao" onClick="visor.value+=' + '"/></td> </tr><tr> <td><input type="button" class="botao" value="4" onClick="visor.value+='4'"/></td> <td><input type="button" value="5" class="botao" onClick="visor.value+='5'"/></td> <td><input type="button" value="6" class="botao" onClick="visor.value+='6'"/></td> <td><input type="button" value="−" class="botao" onClick="visor.value+=' - '"/></td> </tr><tr> <td><input type="button" value="1" class="botao" onClick="visor.value+='1'"/></td> <td><input type="button" value="2" class="botao" onClick="visor.value+='2'"/></td> <td><input type="button" value="3"class="botao" onClick="visor.value+='3'"/></td> <td><input type="button" value="×" title="Multiplicar" class="botao" onClick="visor.value+=' * '"/></td> </tr><tr> <td><input type="button" value="C" class="botao" onClick="visor.value=''"/></td> <td><input type="button" value="0" class="botao" onClick="visor.value+='0'"/></td> <td><input type="button" value="=" class="botao" onClick="visor.value=eval(visor.value)"/></td> <td><input type="button" value="÷" title="Dividir" class="botao" onClick="visor.value+=' / '"/></td> </tr></table></form><div class="linkcalc"><br /><br /><span id="preserve577572b1dbba40eaa9420b08bb8d8ceb" class="wlWriterPreserve"><script type="text/javascript" src="http://static.tumblr.com/726xof9/2xlmqxe5g/mini_calc_link.js"></script></span> <br /></div></div><!--AND Calculadora Tur-quesa.blogspot.com --><br /><br /><link rel="stylesheet" type="text/css" href="http://static.tumblr.com/726xof9/BU3mqxe8x/mini_calc_pink.css" /><br />

Verde

<!--Calculadora Verde Tur-quesa.blogspot.com --><br /><div class="calculadora"><form name="calculadoraform"><table class="calctable" border="1"><tr id="visor"> <td bgcolor="#fff" colspan="4"><br /><input disabled type="text" name="visor" class="visor"/><br /></td> </tr><tr> <td><input type="button" value="7" class="botao" onClick="visor.value+='7'"/></td> <td><input type="button" value="8" class="botao" onClick="visor.value+='8'"/></td> <td><input type="button" value="9" class="botao" onClick="visor.value+='9'"/></td> <td><input type="button" value="+" class="botao" onClick="visor.value+=' + '"/></td> </tr><tr> <td><input type="button" class="botao" value="4" onClick="visor.value+='4'"/></td> <td><input type="button" value="5" class="botao" onClick="visor.value+='5'"/></td> <td><input type="button" value="6" class="botao" onClick="visor.value+='6'"/></td> <td><input type="button" value="−" class="botao" onClick="visor.value+=' - '"/></td> </tr><tr> <td><input type="button" value="1" class="botao" onClick="visor.value+='1'"/></td> <td><input type="button" value="2" class="botao" onClick="visor.value+='2'"/></td> <td><input type="button" value="3"class="botao" onClick="visor.value+='3'"/></td> <td><input type="button" value="×" title="Multiplicar" class="botao" onClick="visor.value+=' * '"/></td> </tr><tr> <td><input type="button" value="C" class="botao" onClick="visor.value=''"/></td> <td><input type="button" value="0" class="botao" onClick="visor.value+='0'"/></td> <td><input type="button" value="=" class="botao" onClick="visor.value=eval(visor.value)"/></td> <td><input type="button" value="÷" title="Dividir" class="botao" onClick="visor.value+=' / '"/></td> </tr></table></form><div class="linkcalc"><br /><br /><span id="preserve6491b5a4ad254707a104ba7fa8a2e51f" class="wlWriterPreserve"><script type="text/javascript" src="http://static.tumblr.com/726xof9/2xlmqxe5g/mini_calc_link.js"></script></span> <br /></div></div><!--AND Calculadora Tur-quesa.blogspot.com --><br /><br /><link rel="stylesheet" type="text/css" href="http://static.tumblr.com/726xof9/SYKmqxft0/mini_calc_verde.css" /><br />

Preta

<!--Calculadora Preta Tur-quesa.blogspot.com --><br /><div class="calculadora"><form name="calculadoraform"><table class="calctable" border="1"><tr id="visor"> <td bgcolor="#fff" colspan="4"><br /><input disabled type="text" name="visor" class="visor"/><br /></td> </tr><tr> <td><input type="button" value="7" class="botao" onClick="visor.value+='7'"/></td> <td><input type="button" value="8" class="botao" onClick="visor.value+='8'"/></td> <td><input type="button" value="9" class="botao" onClick="visor.value+='9'"/></td> <td><input type="button" value="+" class="botao" onClick="visor.value+=' + '"/></td> </tr><tr> <td><input type="button" class="botao" value="4" onClick="visor.value+='4'"/></td> <td><input type="button" value="5" class="botao" onClick="visor.value+='5'"/></td> <td><input type="button" value="6" class="botao" onClick="visor.value+='6'"/></td> <td><input type="button" value="−" class="botao" onClick="visor.value+=' - '"/></td> </tr><tr> <td><input type="button" value="1" class="botao" onClick="visor.value+='1'"/></td> <td><input type="button" value="2" class="botao" onClick="visor.value+='2'"/></td> <td><input type="button" value="3"class="botao" onClick="visor.value+='3'"/></td> <td><input type="button" value="×" title="Multiplicar" class="botao" onClick="visor.value+=' * '"/></td> </tr><tr> <td><input type="button" value="C" class="botao" onClick="visor.value=''"/></td> <td><input type="button" value="0" class="botao" onClick="visor.value+='0'"/></td> <td><input type="button" value="=" class="botao" onClick="visor.value=eval(visor.value)"/></td> <td><input type="button" value="÷" title="Dividir" class="botao" onClick="visor.value+=' / '"/></td> </tr></table></form><div class="linkcalc"><br /><br /><span id="preserve2bfcfd8ae7e24ed18f91be8f2d9425ac" class="wlWriterPreserve"><script type="text/javascript" src="http://static.tumblr.com/726xof9/2xlmqxe5g/mini_calc_link.js"></script></span> <br /></div></div><!--AND Calculadora Tur-quesa.blogspot.com --><br /><br /><link rel="stylesheet" type="text/css" href="http://static.tumblr.com/726xof9/qsfmqxg73/mini_calc_black.css" /><br />

Clara

<!--Calculadora Clara Tur-quesa.blogspot.com --><br /><div class="calculadora"><form name="calculadoraform"><table class="calctable" border="1"><tr id="visor"><td bgcolor="#fff" colspan="4"><br /><input disabled type="text" name="visor" class="visor"/><br /></td></tr><tr><td><input type="button" value="7" class="botao" onClick="visor.value+='7'"/></td><td><input type="button" value="8" class="botao" onClick="visor.value+='8'"/></td><td><input type="button" value="9" class="botao" onClick="visor.value+='9'"/></td><td><input type="button" value="+" class="botao" onClick="visor.value+=' + '"/></td></tr><br><tr><td><input type="button" class="botao" value="4" onClick="visor.value+='4'"/></td><td><input type="button" value="5" class="botao" onClick="visor.value+='5'"/></td><td><input type="button" value="6" class="botao" onClick="visor.value+='6'"/></td><td><input type="button" value="−" class="botao" onClick="visor.value+=' - '"/></td></tr><br><tr><td><input type="button" value="1" class="botao" onClick="visor.value+='1'"/></td><td><input type="button" value="2" class="botao" onClick="visor.value+='2'"/></td><td><input type="button" value="3"class="botao" onClick="visor.value+='3'"/></td><td><input type="button" value="×" title="Multiplicar" class="botao" onClick="visor.value+=' * '"/></td></tr><br><tr><td><input type="button" value="C" class="botao" onClick="visor.value=''"/></td><td><input type="button" value="0" class="botao" onClick="visor.value+='0'"/></td><td><input type="button" value="=" class="botao" onClick="visor.value=eval(visor.value)"/></td><td><input type="button" value="÷" title="Dividir" class="botao" onClick="visor.value+=' / '"/></td></tr></table></form><div class="linkcalc"><br><br /><span id="preserve914d250653514aafba2d69affb81138f" class="wlWriterPreserve"><script type="text/javascript" src="http://static.tumblr.com/726xof9/2xlmqxe5g/mini_calc_link.js"></script></span> <br /></div></div><!--AND Calculadora Tur-quesa.blogspot.com --><br /><br /><link rel="stylesheet" type="text/css" href="http://static.tumblr.com/726xof9/Wnemqxgmv/mini_calc_clear.css" /><br />
Se quiser mais opções de cores de calculadora e só pedir nos comentários!!

Continue

Como Remover a Navbar do Blogger

Uma coisa que atrapalha o layout dos blogs e o Navbar do Blogger. Muita gente quer saber como remover a "barrinha do blog", agora o blogger da a opção de oculta-la no seu blog, mas se você for usar o layout em outro blog, isso não vai adiantar, você pode usar outros métodos para remover a Navbar do blog usando CSS, alterando o HTML do seu blog, e utilizando até JavaScript.

Se você ainda não sabe como oculta-la em seu blog vá na guia Layout ► procure o Gadget Navbar e clique em editar, alem de poder mudar o estilo dela, você também pode oculta-la

Mas para Remove-la do seu template é assim:

Removendo a Navbar do blog

Removendo com CSS:

1) Entre em Modelo ► Editar HTML

2) Na pagina que abrir procure^{(Ctrl + F)} por ]]></b:skin> e acima deste trecho coloque o seguinte código CSS:

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

Acho este método mais simples e mais eficiente, mas também há outro método, removendo o gadget diretamente no HTML. Descobri isso fazendo experiências com alguns dos meus Templates.

Removendo o gadget diretamente no HTML:

1) Entre em Modelo ► Editar HTML

2) Na pagina que abrir procure por:

<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>

 Remova-o e clique em Visualizar, se está tudo certo clique em salvar, Irá aparecer esta mensagem:

Clique em Excluir Widgets

Acho este Método mais complicado e perigoso, mas ainda não sei se este método vale para outros blogs (se você faz Templates para download não aconselho muito).

Também conheço outro método, usando JavaScript.

Removendo com JavaScript:


1) Entre em Modelo ► Editar HTML

2) Na pagina que abrir procure por:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

3) Acima deste trecho cole o seguinte código JavaScript.

<!-- Navbar--><script type='text/javascript'>
<![CDATA[
<!--
/*<body>*/
-->
]]>
</script>

Clique em Salvar.

De todos estes três métodos de remover o Navbar do Blogger, acho o primeiro (com CSS) mais fácil, prático e rápido, mas você pode usar qual quer um destes acima, pois se você fizer tudo certo, com certeza o Navbar irá desaparecer.

Continue

Marcadores Personalizados no Blogger

Encontrei um método de personalizar os Marcadores do blogger, com certeza, você já viu algum blog com esses marcadores que estão na moda. eu também já quis muito um desses, resolvi postar aqui pra você!

Encontrei os códigos em um site em inglês, (este aqui) lá tem 3 tipos de estilos.

É muito simples, iremos usar apenas CSS

Configurando o Gadget

Deixe as configurações do seu gadget igual a imagem acima, somente o nome é uma escolha livre.

Aplicando Modelos

Procure por </head> e cole o seguinte código Acima dela.

<style type="text/css">
/*<![CDATA[*/
.label-size{
 margin:0;
 padding:0;
 position:relative;
 }
 .label-size a{
 float:left;
 height:24px;
 line-height:24px;
 position:relative;
 font-size:12px;
 margin-bottom: 9px;
 margin-left:20px;
 padding:0 10px 0 12px;
 background:#0089e0;
 color:#fff;
 text-decoration:none;
 -moz-border-radius-bottomright:4px;
 -webkit-border-bottom-right-radius:4px;
 border-bottom-right-radius:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-right-radius:4px;
 border-top-right-radius:4px;
 }
.label-size a:before{
 content:"";
 float:left;
 position:absolute;
 top:0;
 left:-12px;
 width:0;
 height:0;
 border-color:transparent #0089e0 transparent transparent;
 border-style:solid;
 border-width:12px 12px 12px 0;
 }
.label-size a:after{
 content:"";
 position:absolute;
 top:10px;
 left:0;
 float:left;
 width:4px;
 height:4px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 border-radius:2px;
 background:#fff;
 -moz-box-shadow:-1px -1px 2px #004977;
 -webkit-box-shadow:-1px -1px 2px #004977;
 box-shadow:-1px -1px 2px #004977;
 }
.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}
/*]]>*/
</style>
<a href="http://tur-quesa.blogspot.com" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>

Onde está em vermelho, é a cor das etiquetas, repare que há dois lugares, você deve colocar as duas cores iguais.

Pronto, Visualize o seu blog e salve, veja que os marcadores já mudaram, isso é bem simples. Aqui tem mais alguns modelos que encontrei no site em inglês, se gostar de algum, é só substituir o código anterior e fazer o mesmo passo.

Código

Código

Obs: este modelo da imagem acima deve conter os números de postagens por marcador.

Continue

Arquivo em Forma de Calendário

Para personalizar mais o seu blog, irei postar agora um modo de personalizar o gadget Arquivo do Blog e deixa-lo em forma de calendário, veja um exemplo aqui. Isso é bem útil, pois o arquivo fica mais organizado bonito.

Inserindo os Códigos

Primeireiro você ja deve ter o gadget no seu blog.

1) Entre em layolt ► Adicionar um Gadget ► Arquivo do Blog. Deixe-o neste formato:

É importante fazer isso, configure o gadget de acordo com a imagem.

2)  Procure pelo seguinte Código ^{Deixe a opção "Expandir modelos de widgets" desativada}

<b:widget id='BlogArchive1' locked='false' title='Arquivo do Blog' type='BlogArchive'/>

Substitua o código acima por:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>
<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>
</caption>
<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->
<!-- Table Body -->
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>
</div>
<script type='text/javascript'> initCal();</script>
</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>

3) Agora vamos aplicar estilos. Procure por ]]></b:skin> e Acima dele cole o seguinte código CSS:

/* Arquivo Calendario*/
#blogger_calendar{
margin:5px 0 0 0;
width:100%;
}
#bcaption {
border:1px solid #000;
padding:2px;
margin:10px 0 0;
background:#1F1FFF;
}
#bcaption select{
border:0px;
background:#1F1FFF;
color:#fff;
font-weight:bold;
}
table#bcalendar thead{
background:#000;
}
table#bcalendar thead tr th{
width:20px;text-align:center;
padding:2px; border:1px solid #000;
font-family:Tahoma;
font-weight:bold;color:#fff;
}
table#bcalendar{
border:1px solid #000;
border-top:0; margin:0px 0 0px;
width:95%;
background:#fff;
}
table#bcalendar tbody tr td{
text-align:center;
padding:2px;
border:1px solid #000;
color:#1F1FFF;
}
table#bcalendar tbody tr td a{
font-weight:bold;
color:#000;
}
td.firstCell {visibility: visible;
}
td.filledCell{
background: #fff;
}
td.emptyCell{
visibility: hidden;
}
td.highlightCell{
background:#ddd;
border:1px outset #000
}
table#bcNavigation{
width:95%;
background:#1F1FFF;
border:1px solid #000;
border-top:0;
}
table#bcNavigation a{
ext-decoration:none;
color:#fff;
}
td#bcFootPrev{
width:10px;
}
td#bcFootAll{
text-align:center;
}

Agora visualize o modelo e clique em Salvar Modelo

4) Agora procure por </head> e cole o seguinte código acima dele.

<script src='http://static.tumblr.com/726xof9/M1tmhz78n/arquivo_calendario.js' type='text/javascript'/>
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'/>

Visualize o modelo, se está tudo certo, clique em Salvar Modelo.

Você pode alterar os estilos da forma que quiser.

Continue