tag:blogger.com,1999:blog-34220730596601993982024-03-12T20:32:43.412-07:00Storm Design | Templates Exclusivos | Tutoriais de Web Design | Peça seu Template Exclusivo GrátisEroKiraTitorhttp://www.blogger.com/profile/12999926473141553822noreply@blogger.comBlogger15125tag:blogger.com,1999:blog-3422073059660199398.post-66502867707033620262013-01-05T18:11:00.000-08:002013-01-05T18:11:07.419-08:00Barra de rolagem no htmlOi pessoal -v- quanto tempo spoakspokasopk<br />
vim pmostrar como fazer isso<br />
<div style="text-align: center;">
<a href="http://bpt-sd.blogspot.com.br/2013/01/barra-de-rolagem.html" target="_blank"><b><span style="font-size: large;">Demonstração</span></b></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Uma barra de rolagem, é bem simples, é só colar esse código:</div>
<div style="text-align: left;">
<i><br /></i></div>
<div style="text-align: left;">
<i><div style="height:<span style="color: red;">100</span>px; width:<span style="color: red;">200</span>px; overflow:auto; background-color:<br />#<span style="color: red;">FFFFCC</span>; text-align: <span style="color: red;">center</span>;padding: <span style="color: red;">2</span>px; margin:<span style="color: red;">5</span>px "><br /><div style="width:160px"></i><i><i><span style="color: red;"> </span></i></i></div>
<div style="text-align: left;">
<i><i><span style="color: red;">Conteúdo da caixa de rolagem</span></i></i></div>
<div style="text-align: left;">
<i></div></div></i></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
e colocar o que deseja colocar dentro da caixa de rolagem onde está escrito "<i><span style="color: red;">Conteúdo da caixa de rolagem</span></i>"</div>
<div style="text-align: center;">
~edição das partes em <span style="color: red;">vermelho</span>~</div>
<div style="text-align: left;">
height: altura da caixa</div>
<div style="text-align: left;">
width: largura da caixa</div>
<div style="text-align: left;">
Background-color: cor do fundo da caixa</div>
<div style="text-align: left;">
text-align: center, left ou right (posição do texto: centro, esquerda ou direita)</div>
<div style="text-align: left;">
padding: margem interna</div>
<div style="text-align: left;">
margin: margem externa</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
é isso pessoal ^^</div>
EroKiraTitorhttp://www.blogger.com/profile/12999926473141553822noreply@blogger.com0tag:blogger.com,1999:blog-3422073059660199398.post-39088502476037576842012-12-28T06:28:00.000-08:002012-12-28T07:07:54.702-08:00Formulario de Contato em ModalE ae pessoal o/<br />
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<br />
<br />
<div style="text-align: center;">
<a href="http://bpt-sd.blogspot.com.br/2012/12/efeito-shadow-box-em-formulario-de.html" target="_blank">Demonstração</a> </div>
<br />
Primeiro, vocês vão em: Modelo > Editar Html. Procurem por:<br />
<br />
<i><head></i><br />
<br />
E embaixo cole:<br />
<br />
<i><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/> </i><br />
<i><script type='text/javascript'></i><br />
<i><br /></i>
<i>$(document).ready(function() { </i><br />
<i><br /></i>
<i> $(&#39;a[name=modal]&#39;).click(function(e) {</i><br />
<i> e.preventDefault();</i><br />
<i> </i><br />
<i> var id = $(this).attr(&#39;href&#39;);</i><br />
<i> </i><br />
<i> var maskHeight = $(document).height();</i><br />
<i> var maskWidth = $(window).width();</i><br />
<i> </i><br />
<i> $(&#39;#mask&#39;).css({&#39;width&#39;:maskWidth,&#39;height&#39;:maskHeight});</i><br />
<i><br /></i>
<i> $(&#39;#mask&#39;).fadeIn(1000); </i><br />
<i> $(&#39;#mask&#39;).fadeTo(&quot;slow&quot;,0.8); </i><br />
<i> </i><br />
<i> //Get the window height and width</i><br />
<i> var winH = $(window).height();</i><br />
<i> var winW = $(window).width();</i><br />
<i> </i><br />
<i> $(id).css(&#39;top&#39;, winH/2-$(id).height()/2);</i><br />
<i> $(id).css(&#39;left&#39;, winW/2-$(id).width()/2);</i><br />
<i> </i><br />
<i> $(id).fadeIn(2000); </i><br />
<i> </i><br />
<i> });</i><br />
<i> </i><br />
<i> $(&#39;.window .close&#39;).click(function (e) {</i><br />
<i> e.preventDefault();</i><br />
<i> </i><br />
<i> $(&#39;#mask&#39;).hide();</i><br />
<i> $(&#39;.window&#39;).hide();</i><br />
<i> }); </i><br />
<i> </i><br />
<i> $(&#39;#mask&#39;).click(function () {</i><br />
<i> $(this).hide();</i><br />
<i> $(&#39;.window&#39;).hide();</i><br />
<i> }); </i><br />
<i> </i><br />
<i>});</i><br />
<i><br /></i>
<i></script></i><br />
<br />
Logo depois, procurem po:<br />
<br />
<i>]]></b:skin> </i><br />
<br />
E acima dele:<br />
<br />
<i>#mask {</i><br />
<i> position:absolute;</i><br />
<i> left:0;</i><br />
<i> top:0;</i><br />
<i> z-index:9000;</i><br />
<i> background-color:#000;</i><br />
<i> display:none;</i><br />
<i> text-size: 20px;</i><br />
<i>}</i><br />
<i> </i><br />
<i>#boxes .window {</i><br />
<i> position:absolute;</i><br />
<i> left:0;</i><br />
<i> top:0;</i><br />
<i> width:600px; </i><br />
<i> height:480px;</i><br />
<i> display:none;</i><br />
<i> z-index:9999;</i><br />
<i> padding:20px;</i><br />
<i>}</i><br />
<i><br /></i>
<i>#boxes #dialog {</i><br />
<i> width:600px; </i><br />
<i> height:480px;</i><br />
<i> padding:10px;</i><br />
<i> background-color:#ffffff;</i><br />
<i>}</i><br />
<br />
.close{display:block; text-align:right;}<br />
<br />
Então você procura por:<br />
<br />
<i></body></i><br />
<br />
E então acima dele cole:<br />
<br />
<i><br /></i>
<i><div id='boxes'></i><br />
<i><br /></i>
<i><div class='window' id='dialog'></i><br />
<i><a class='close' href='#'>Fechar [X]</a><br/></i><br />
<i><b> </b><br/> </i><br />
<i>Código do Formulario</i><br />
<i><!-- Máscara para cobrir a tela --></i><br />
<i> <div id='mask'/></i><br />
<br />
<span style="color: #cccccc;"> Nota** Você pode estar criando um formulário em <a href="http://www.wufoo.com/" target="_blank">Woofu</a> <a href="https://drive.google.com/#my-drive" target="_blank">Google Docs</a>...</span>EroKiraTitorhttp://www.blogger.com/profile/12999926473141553822noreply@blogger.com0tag:blogger.com,1999:blog-3422073059660199398.post-24423147244705320702012-12-19T09:15:00.001-08:002012-12-19T09:15:25.040-08:00Caixa de Pesquisa personalizada<br />
Bem, só um fácil e rápido tutorial ^^<br />
Primeiro vá em <i>Editar Html</i><br />
Pesquise por:<br />
<br />
<i>]]></i><br />
<br />
Cole acima dela o seguinte:<br />
<br />
<i>/* Busca</i><br />
<i>----------------------------------------------- */</i><br />
<i>.buscador {</i><br />
<i>margin:0pt;</i><br />
<i>padding:0pt;</i><br />
<i>}</i><br />
<i>.buscador span {</i><br />
<i>margin:0pt;</i><br />
<i>padding:0pt;</i><br />
<i>}</i><br />
<i>#search{</i><br />
<i>display: none;</i><br />
<i>}</i><br />
<i>#sidebar form {</i><br />
<i>margin:0;</i><br />
<i>padding:1px 0;</i><br />
<i>clear:both;</i><br />
<i>}</i><br />
<i>.searchtitle {</i><br />
<i>font:bold 14px "Aldo", sans-serif, "Lucida Sans", Tahoma!important;</i><br />
<i>color:#fff;</i><br />
<i>}</i><br />
<i>#searchform {</i><br />
<i>margin: 5px auto ;</i><br />
<i>padding: 0;</i><br />
<i>}</i><br />
<i>#searchform #s {</i><br />
<i>height:<span style="color: red;">20</span>px;</i><br />
<i>width:<span style="color: red;">180</span>px;</i><br />
<i>margin-left:10px;</i><br />
<i>font:<span style="color: red;">14</span>px Verdana, Arial, Helvetica, sans-serif;</i><br />
<i>border:1px solid #<span style="color: red;">272727</span>;</i><br />
<i>-moz-border-radius-topleft: 4px;</i><br />
<i>-moz-border-radius-topright: 4px;</i><br />
<i>-moz-border-radius-bottomleft: 4px;</i><br />
<i>-moz-border-radius-bottomright: 4px;</i><br />
<i>-webkit-border-top-left-radius: 4px;</i><br />
<i>-webkit-border-top-right-radius: 4px;</i><br />
<i>-webkit-border-bottom-left-radius: 4px;</i><br />
<i>-webkit-border-bottom-right-radius: 4px;</i><br />
<i>}</i><br />
<i>#searchsubmit {</i><br />
<i>padding:0;</i><br />
<i>background:#<span style="color: red;">272727</span>;</i><br />
<i>color:#<span style="color: red;">fff</span>;</i><br />
<i>text-shadow: 0px 1px 2px #<span style="color: red;">000</span>; (pode ser removido)</i><br />
<i>border:1px #000;</i><br />
<i>width:<span style="color: red;">60</span>px;</i><br />
<i>height:<span style="color: red;">22</span>px;</i><br />
<i>font:<span style="color: red;">14</span>px "Arial", "Lucida Sans Unicode", Verdana;</i><br />
<i>font-weight:normal;</i><br />
<i>-moz-border-radius-topleft: 6px;</i><br />
<i>-moz-border-radius-topright: 6px;</i><br />
<i>-moz-border-radius-bottomleft: 6px;</i><br />
<i>-moz-border-radius-bottomright: 6px;</i><br />
<i>-webkit-border-top-left-radius: 6px;</i><br />
<i>-webkit-border-top-right-radius: 6px;</i><br />
<i>-webkit-border-bottom-left-radius: 6px;</i><br />
<i>-webkit-border-bottom-right-radius: 6px;</i><br />
<i>}</i><br />
<i>#searchsubmit:hover {</i><br />
<i>background:#<span style="color: red;">ccc</span>;</i><br />
<i>color:#<span style="color: red;">000</span>;</i><br />
<i>text-shadow: 0px 1px 2px #fff;</i><br />
<i>-moz-border-radius-topleft: 6px;</i><br />
<i>-moz-border-radius-topright: 6px;</i><br />
<i>-moz-border-radius-bottomleft: 6px;</i><br />
<i>-moz-border-radius-bottomright: 6px;</i><br />
<i>-webkit-border-top-left-radius: 6px;</i><br />
<i>-webkit-border-top-right-radius: 6px;</i><br />
<i>-webkit-border-bottom-left-radius: 6px;</i><br />
<i>-webkit-border-bottom-right-radius: 6px;</i><br />
<i>}</i><br />
<br />
Edite os campos em vermelho<br />
<br />
Agora vá em adicionar um novo Gadget, e adicione o seguinte html:<br />
<br />
<i><div class='buscador'></i><br />
<i><span></i><br />
<i><form action='/search' id='searchform' method='get'></i><br />
<i><table border='0' cellpadding='0' cellspacing='3'></i><br />
<i><tbody></i><br />
<i><tr></i><br />
<i><td><input id='s' name='q' type='text' value='Pesquisar...'/></td></i><br />
<i><td><input id='searchsubmit' type='submit' value='Buscar'/></td></i><br />
<i></tr></i><br />
<i></tbody></i><br />
<i></table></i><br />
<i></form></i><br />
<i></span></div></i><br />
<br />
Só salvar e ver como ficou ^^<br />
EroKiraTitorhttp://www.blogger.com/profile/12999926473141553822noreply@blogger.com0tag:blogger.com,1999:blog-3422073059660199398.post-53920819872312976652012-12-19T08:22:00.000-08:002012-12-19T08:23:26.227-08:00Facebook na lateral<br />
Vamos lá<br />
1º - Vá em <i>Editar Html</i>.<br />
<br />
2º - Agora pressione as teclas CTRL+F e procure por:<br />
<br />
<i></ head></i><br />
<i><br /></i>
4º - E acima dele cole o seguinte código:<br />
<br />
<i><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/</i><br />
<i>jquery.min.js" type="text/javascript"></script></i><br />
<br />
5º - Salve o modelo.<br />
<br />
Agora vamos adicionar essa Box em seu blog, então faça o seguinte:<br />
Vá em <i>Layout</i> Adicionar um Gadget e selecione a opção <i>HTML/JavaScript</i>. (Não adicione título no gadget). Na caixa do Gadget cole o código abaixo:<br />
<br />
<i><script type="text/javascript"></i><br />
<i>//<!--</i><br />
<i>$(document).ready(function() {$(".box-curtir-flutuante").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});</i><br />
<i>//--></i><br />
<i></script></i><br />
<i><style type="text/css"></i><br />
<i>.box-curtir-flutuante{background: url("<span style="color: red;">http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png</span>") no-repeat scroll left center transparent !important;display: block;float: right;height: <span style="color: red;">270</span>px;padding:<span style="color: red;"> 0 5px 0 40px</span>;width: <span style="color: red;">245</span>px;z-index: 99999;position:fixed;right:-250px;top:20%;}</i><br />
<i>.box-curtir-flutuante div{border:none;position:relative;display:block;}</i><br />
<i>.box-curtir-flutuante span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}</i><br />
<i>.box-curtir-flutuante span a{color: #<span style="color: red;">808080</span>;text-decoration:none;}</i><br />
<i>.box-curtir-flutuante span a:hover{text-decoration:underline;}</i><br />
<i></style><div class="box-curtir-flutuante" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=<span style="color: red;">COLOQUE-O-URL-DA-SUA-PÁGINA-DO-FACEBOOK</span>&amp;width=<span style="color: red;">251</span>&amp;height=<span style="color: red;">270</span>&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:#<span style="color: red;">fff;</span>" allowtransparency="true"></iframe></div></div></i><br />
<br />
6º - Feita as alterações, clique em Salvar.EroKiraTitorhttp://www.blogger.com/profile/12999926473141553822noreply@blogger.com0tag:blogger.com,1999:blog-3422073059660199398.post-53698416285732928842012-12-19T08:08:00.000-08:002012-12-19T08:08:25.526-08:00AvatarTrago-lhes um pequeno tutorial de como deixar avatar no blog ^^ certo, é só fazer o seguinte:<br />
<br />
Primeiro vão em <i>Editar Html</i> depois selecionem a opção <i>Estender modelos de widget </i>e procure por <i><b:if cond='data:post.title'> </i>Abaixo dele insira o seguinte código:<br />
<br />
<i><b:if cond='data:post.author == &quot;SEU NOME NO BLOGGER&quot;'><img cursor='pointer' height='88px' src='IMAGEM DO AVATAR' style='float:left;margin:XXpx 0px 0px XXpx' width='XXpx'/></b:if></i><br />
<i><br /></i>
Agora é só editar ^^<br />
<br />EroKiraTitorhttp://www.blogger.com/profile/12999926473141553822noreply@blogger.com0tag:blogger.com,1999:blog-3422073059660199398.post-15585369206092663342012-12-16T00:27:00.000-08:002012-12-16T00:27:04.633-08:00Slides Personalizados<br />
vc pode postar ate 6 imagens sem ocupar espaço com efeito de rolagem horizontal servindo para gadget ou postagem normal.<br />
<br />
<br />
Vá em Design - Elementos da Página - Adicionar um Gadget - HTML/Javascript.<br />
Copie o código abaixo:<br />
<br />
<link rel="Stylesheet" type="text/css" href="http://gbscripts.webs.com/SmoothDivScroll-1.2/css/smoothDivScroll.css" /><br /><br />
<style type="text/css"><br /><br />
#makeMeScrollable<br /><br />
{ <span style="color: #e69138;">width:400px</span>;<br /><br />
<span style="color: #e69138;">height:390px</span>; position: relative; }<br /><br />
#makeMeScrollable div.scrollableArea img<br /><br />
{ position: relative;<br /><br />
float: left;<br /><br />
margin: 0;<br /><br />
padding-right: 5px;}<br /><br />
</style><br /><br />
<div id="makeMeScrollable"><br /><br />
<a href=" <span style="color: #38761d;">LINK OPCIONAL </span>" target="_blank"><img src=" <span style="color: #e06666;">URL IMAGEM</span> " <span style="color: #e69138;">height="270</span>"border="0"/></a><br /><br />
<a href=" <span style="color: #38761d;">LINK OPCIONAL</span> " target="_blank"><img src=" <span style="color: #e06666;">URL IMAGEM</span> " <span style="color: #e69138;">height="270</span>"border="0"/></a><br /><br />
<a href=" <span style="color: #38761d;">LINK OPCIONAL</span> " target="_blank"><img src=" <span style="color: #e06666;">URL IMAGEM</span> " <span style="color: #e69138;">height="270</span>"border="0"/></a><br /><br />
<a href=" <span style="color: #38761d;">LINK OPCIONAL</span> " target="_blank"><img src=" <span style="color: #e06666;">URL IMAGEM</span> " <span style="color: #e69138;">height="270</span>"border="0"/></a> <br /><br />
<a href=" <span style="color: #38761d;">LINK OPCIONAL</span> " target="_blank"><img src=" <span style="color: #e06666;">URL IMAGEM</span> " <span style="color: #e69138;">height="270</span>"border="0"/></a><br /><br />
<a href=" <span style="color: #38761d;">LINK OPCIONAL</span> " target="_blank"><img src=" <span style="color: #e06666;">URL IMAGEM</span> " <span style="color: #e69138;">height="270</span>"border="0"/></a> </div><br /><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><br /><br />
<script src="http://gbscripts.webs.com/SmoothDivScroll-1.2/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script><br /><br />
<script src="http://gbscripts.webs.com/SmoothDivScroll-1.2/js/jquery.mousewheel.min.js" type="text/javascript"></script><br /><br />
<script src="http://gbscripts.webs.com/SmoothDivScroll-1.2/js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script><br /><br />
<script type="text/javascript"><br /><br />
$(document).ready(function () {<br /><br />
$("div#makeMeScrollable").smoothDivScroll({<br /><br />
mousewheelScrolling: true,<br /><br />
manualContinuousScrolling: true,<br /><br />
visibleHotSpotBackgrounds: "always",<br /><br />
autoScrollingMode: "onstart"});}); <br /><br />
</script><br />
<br />
Agora é so configurar de acordo com suas imagens:<br />
<br />
LINK OPCIONAL = algum link se deseja redirecionar a imagem.<br />
URL IMAGEM = link do url da sua imagem.<br />
WIDHT = Largura acordo com o tamanho da sua imagem.<br />
HEIGHT = Altura de acordo com o tamanho da sua imagem.EroKiraTitorhttp://www.blogger.com/profile/12999926473141553822noreply@blogger.com0tag:blogger.com,1999:blog-3422073059660199398.post-27161715709115188172012-12-15T23:54:00.000-08:002012-12-15T23:54:02.735-08:00Texto ou Banners rolando<br />
De azul, determine a altura a largura, respectivamente.<br />
De vermelho, a direção: "up" - de baixo para cima "down" - de cima para baixo "up style" - da esquerda para a direita<br />
De rosa, a velocidade do rolamento.<br />
De laranja, insira os códigos de imagens, textos ou banners.<br />
<br />
<b><i><marquee heigth="<span style="color: blue;">480</span>" widht="<span style="color: blue;">480</span>" direction="<span style="color: red;">up</span>" behavior="scroll" onmouseover="this.stop() " onmouseout="this.start()" scrollamount="<span style="color: magenta;">3</span>"></i></b><br />
<b><i><center></i></b><br />
<span style="color: orange;"><b><i>Código de Imagem, Texto ou Banner.</i></b></span><br />
<b><i></center></marquee></i></b><br />
EroKiraTitorhttp://www.blogger.com/profile/12999926473141553822noreply@blogger.com0tag:blogger.com,1999:blog-3422073059660199398.post-48411864250389659712012-12-13T03:02:00.003-08:002012-12-13T03:03:06.564-08:00Javascript - Relogio Basico<div style="text-align: center;">
Primeiro, eu não vou postar diretamente, por nao ter muito tempo kk.</div>
<div style="text-align: center;">
Segundo, vamos ao codigo:</div>
<div style="text-align: center;">
<br />
<div style="text-align: left;">
*Você pode usar esse codigo em Widgets HTML\JAVASCRIPT.</div>
<br /></div>
<div style="text-align: center;">
HTML:<br />
<br /></div>
<div style="text-align: left; width: 90%;">
<script src="http://pastebin.com/embed_js.php?i=kzFS0QRQ"></script></div>
<div style="text-align: left;">
Explicações para personalizar:<br />
<span class="sc2"><span class="st0"><b>color:<span style="color: red;"><i>#000000</i></span></b>; /* #000000 = rgb(<span style="color: #660000;">0</span>, <span style="color: #660000;">0</span>, <span style="color: #660000;">0</span>) preto. voce pode usar o color picker do paint, e ao invez de usar <span style="color: red;"><b>#000000</b></span> use rgb(R, G, B) ex: <b>rgb</b><i>(</i><span style="color: #660000;">255</span>,<span style="color: #660000;">0</span>,<span style="color: #660000;">0</span><i>)</i> vermelho. */</span></span><br />
Como usar o ColorPicker do paint:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-6dQWB-oR7_o/UMmsKtWr8XI/AAAAAAAACRY/v7-YKtwjYgQ/s1600/StormDesign_PaintColorPicker.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="235" src="http://2.bp.blogspot.com/-6dQWB-oR7_o/UMmsKtWr8XI/AAAAAAAACRY/v7-YKtwjYgQ/s320/StormDesign_PaintColorPicker.PNG" width="320" /></a></div>
<div style="text-align: center;">
(Clique Para Expandir).</div>
<div style="text-align: left;">
Explicação Da Imagem:</div>
<div style="text-align: left;">
no lugar de #CODIGO DA COR, use o codigo <b>rgb</b><i>(</i><b><span style="color: red;">VERMELHO</span></b>, <b><span style="color: #274e13;">VERDE</span></b>, <b><span style="color: blue;">AZUL</span></b><i>)</i>, Exemplo: <b>rgb</b><i>(</i><span style="color: #660000;"><b>0</b></span>, <span style="color: #660000;"><b>70</b></span>, <span style="color: #660000;"><b>0</b></span><i>)</i>;</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span class="sc2"><span class="st0"><b>font-size:</b><span style="color: red;">12px</span>;</span></span> /* O tamanho da fonte do texto do seu relogio, no caso 12px. */</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span class="sc2"><span class="st0"><b>font-family</b>:<span style="color: red;">Arial</span>; /* O nome da fonte do texto do seu relogio, não recomendo alterar muito, recomendo deixar uma fonte que todo mundo tenha no pc. */</span></span></div>
<div style="text-align: left;">
<span class="sc2"><span class="st0"><br /></span></span></div>
<div style="text-align: left;">
<span class="sc2"><span class="st0"><b>font-weight:</b><span style="color: red;">normal</span>; /* a weight da fonte, <a href="http://www.w3schools.com/cssref/pr_font_weight.asp" target="_blank">clique aqui</a> para ver a documentação sobre essa tag */</span></span></div>
<div style="text-align: left;">
<span class="sc2"><span class="st0"><br /></span></span></div>
<div style="text-align: left;">
<span class="sc2"><span class="st0"><b>font-style:</b><span style="color: red;">normal</span>; /* o estilo da fonte, <span style="font-style: italic;">italic</span>,<span style="font-style: normal;"> normal</span>, </span></span><span class="sc2"><span class="st0" style="font-style: oblique;">oblique</span>, </span><span class="sc2"><span class="st0" style="font-style: inherit;">inherit</span></span> */<br />
<br />
<span class="sc2"><span class="st0"><b>text-decoration:</b><span style="color: red;">none</span>;</span></span> /* a decoração do texto, (<span style="text-decoration: none;">none</span>, <span style="text-decoration: underline;">underline</span>, <span style="text-decoration: overline;">overline</span>, <span style="text-decoration: line-through;">line-through</span>, <span style="text-decoration: blink;">blink</span>, <span style="text-decoration: inherit;">inherit</span>) */<br />
<br />
<span class="sc2"><b><span class="kw3">id</span><span class="sy0">=</span></b><i><span style="color: red;"><span class="st0">"basicclock"</span></span></i></span> Não altere essa parte, pois senão voce tera de alterar o javascript tambem.<br />
<br />
o html\css ja acabou.<br />
<div style="text-align: center;">
JAVASCRIPT:</div>
<div style="text-align: center;">
<br /></div>
<div style="margin: Auto; text-align: left; width: 90%;">
<script src="http://pastebin.com/embed_js.php?i=kM1qLCs4"></script></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
Explicação:</div>
<div style="text-align: left;">
<div class="de2">
<span style="color: #073763;"><span class="kw1">function</span></span> clock<span style="color: #6aa84f;"><span class="br0">(</span></span><span class="br0"><span style="color: #6aa84f;">)</span> // define uma nova função com o nome de clock( relogio em ingles ).</span></div>
<div class="de2">
<span class="br0"> </span></div>
<div class="de2">
<span style="color: #073763;"><span class="kw1">var</span> </span>digital <span class="sy0">=</span> <span style="color: blue;"><span class="kw1">new</span></span> <span class="kw4">Date</span><span style="color: #6aa84f;"><span class="br0">(</span><span class="br0">)</span></span><span class="sy0">; // define que a variavel digital, vai ser igual a uma nova data.</span></div>
<div class="de2">
<span class="sy0"> </span></div>
<div class="de2">
<span class="sy0"><span style="color: #073763;"><span class="kw1">var</span></span> hours <span class="sy0">=</span> digital.<span class="me1">getHours</span><span style="color: #6aa84f;"><span class="br0">(</span><span class="br0">)</span></span><span class="sy0">;</span></span><div class="de2">
<span style="color: #0c343d;"><span class="kw1">var</span></span> minutes <span class="sy0">=</span> digital.<span class="me1">getMinutes</span><span style="color: #6aa84f;"><span class="br0">(</span><span class="br0">)</span></span><span class="sy0">;</span></div>
<div class="de1">
<span style="color: #073763;"><span class="kw1">var</span></span> seconds <span class="sy0">=</span> digital.<span class="me1">getSeconds</span><span style="color: #6aa84f;"><span class="br0">(</span><span class="br0">)</span></span><span class="sy0">;</span></div>
<span class="sy0"> // Isso ira pegar a Hora, o minuto e o segundo, da variavel digital.</span></div>
<div class="de2">
<span class="sy0"> </span></div>
<div class="de2">
<span class="sy0"><span style="color: blue;"><span class="kw1">if</span></span> <span class="br0">(</span>minutes <span style="color: #6aa84f;"><span class="sy0"><=</span></span> <b><span style="color: #660000;"><span class="nu0">9</span></span></b><span class="br0">)</span> minutes <span class="sy0">=</span><span style="color: red;"> <span class="st0">"0"</span></span> <span class="sy0">+</span> minutes<span class="sy0">;</span></span><div class="de1">
<span style="color: blue;"><span class="kw1">if</span> </span><span class="br0">(</span>seconds <span style="color: #6aa84f;"><span class="sy0"><=</span></span> <span style="color: #660000;"><b><span class="nu0">9</span></b></span><span class="br0">)</span> seconds <span class="sy0">=</span> <span style="color: red;"><span class="st0">"0"</span></span> <span class="sy0">+</span> seconds<span class="sy0">;</span></div>
<span class="sy0"> </span></div>
<div class="de2">
<span class="sy0">//Essa parte não e obrigatoria, Por que?, simples, sem ela o relogio nao ficara assim olha, 8 : 05 : 06, mais sim 8 : 5: 6, entenderam? se nao ignora e deixa o codigo kkk</span></div>
<div class="de2">
<span class="sy0"> </span></div>
<div class="de2">
<span class="sy0">dispTime <span class="sy0">=</span> hours <span style="color: #6aa84f;"><span class="sy0">+</span></span> <i><span style="color: red;"><span class="st0">":"</span></span></i><span style="color: #6aa84f;"> <span class="sy0">+</span></span> minutes <span style="color: #6aa84f;"><span class="sy0">+</span></span> <i><span style="color: red;"><span class="st0">":"</span></span></i> <span style="color: #6aa84f;"><span class="sy0">+</span></span> seconds<span class="sy0">;</span> // define que a variavel dispTime, vai ser a hora + : + minutos + : + segundos.</span></div>
<div class="de2">
<span class="sy0"> </span></div>
<div class="de2">
<span class="sy0"><span style="color: #073763;"><span class="kw1">var</span></span> basicclock <span class="sy0">=</span> document.<span style="color: #741b47;"><span class="me1">getElementById</span></span><span class="br0">(</span><i><span style="color: red;"><span class="st0">'basicclock'</span></span></i><span class="br0">)</span><span class="sy0">; // vai pegar os elementos com a id basicclock, se voce alterou na parte do HTML\CSS, altere aqui tambem!</span></span><div class="de1">
basicclock.<span style="color: #741b47;"><span class="me1">innerHTML</span> </span><span class="sy0">=</span> dispTime<span class="sy0">; // define que o HTML interno, da id basicclock, sera igual a dispTime.</span></div>
<div class="de2">
setTimeout<span style="color: #6aa84f;"><span class="br0">(</span></span><span class="st0">"clock()"</span><span class="sy0">,</span> <span style="color: #660000;"><b><span class="nu0">1000</span></b></span><span style="color: #6aa84f;"><span class="br0">)</span></span><span class="sy0">; // reinicia o timer a 1000 milesegundos, ou seja 1 segundo.</span></div>
<div class="de2">
</div>
<div class="de2">
<span class="sy0"></span></div>
<span class="sy0"> </span></div>
<div class="de2">
<div class="de2">
clock<span style="color: #6aa84f;"><span class="br0">(</span><span class="br0">)</span></span><span class="sy0">; // Isso nao fara nada alem de chamar a função pela primeira vez, e entao a função ira se reiniciar apos 1 segundo, sei la como explicar. ok.</span></div>
<div class="de2">
<span class="sy0"><br /></span></div>
<div class="de2">
<span class="sy0">Bem, foi isso, Funcionando:</span></div>
<div class="de2">
<span class="sy0"><br /><div style="color:#000000;font-size:12px;font-family:Arial;font-weight:normal;font-style:normal;text-decoration:none" id="basicclock"></div>
<script type="text/javascript">
function clock()
{
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
var seconds = digital.getSeconds();
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;
dispTime = hours + ":" + minutes + ":" + seconds;
var basicclock = document.getElementById('basicclock');
basicclock.innerHTML = dispTime;
setTimeout("clock()", 1000);
}
clock();
</script>
</span></div>
<div class="de2">
<span class="sy0"><br /></span></div>
<span class="sy0"> </span> </div>
</div>
</div>
</div>
The Lord Yugihttp://www.blogger.com/profile/00054497063322370473noreply@blogger.com0tag:blogger.com,1999:blog-3422073059660199398.post-68244415248780329322012-12-12T06:56:00.003-08:002012-12-12T06:56:59.223-08:00Retirando "Assinar Postagens (Atom)"Só passando pra deixar um meio a vocês, de como tirar o estragador de templates, "Assinar Postagens (Atom)"<br />
Certo, Let's Rock!<br />
Expanda os modelos de Widget clicando na caixinha "Expandir modelos widgets", seguida Ctrl + F e procure por<br />
<b:include name=’feedLinks’/><br />
E apague, visualize se estiver tudo Ok, Salve ^-^EroKiraTitorhttp://www.blogger.com/profile/12999926473141553822noreply@blogger.com0tag:blogger.com,1999:blog-3422073059660199398.post-23368423021853174072012-12-12T03:04:00.000-08:002012-12-12T03:04:12.262-08:00Caixa Para CódigoYoo minna bonita *--* como estão?<br />
Bom, só deixando um codigo de caixas para codigos Exemplo:<br />
<br />
<form>
<textarea cols="40" name="myForm" rows="4" wrap="virtual">Podem colocar tanto um texto quanto um codigo =P</textarea><br />
<br />
O código é o seguinte<br />
<br />
<i><form><textarea name="myForm" rows="4" cols="40" wrap="virtual">Podem colocar tanto um texto quanto um codigo =P</i><br />
<br />
Bom, é só colar no Html ou da postagem ou da gadget xD</form>
EroKiraTitorhttp://www.blogger.com/profile/12999926473141553822noreply@blogger.com0tag:blogger.com,1999:blog-3422073059660199398.post-89464192495537744352012-12-12T02:48:00.000-08:002012-12-12T02:49:42.029-08:00Como retirar "Mostrando Postagens com..."Oi pessoal o/ Ero-kun em mais um post xD<br />
Dessa vez os trago um tutorial de como estar retirando o "<i>Mostrando Postagens com...</i>", como vocês viram acima. Certo, Let's Rock!<br />
<br />
Primeiro vocês vão em "<i>Modelo</i>" depois em "<i>Editar Html</i>", então vocês apertam <i>Ctrl + f</i> e procuram por<br />
<br />
<i>]]></b:skin> </i><br />
<br />
E, acima dessa linha, cole o seguinte:<br />
<br />
<br />
<i>.status-msg-wrap, .status-msg-body, .status-msg-border, .status-msg-bg, .status-msg-hidden {</i><br />
<i>display: none;</i><br />
<i>}</i><br />
<br />
Salve e teste ^^<br />
<br />
Espero que tenham gostado do meu primeiro tutorial xD<br />
Se não conseguiu fazer algo, comente com o problema, vou fazer o maximo para ajuda-lo(a) xDEroKiraTitorhttp://www.blogger.com/profile/12999926473141553822noreply@blogger.com0tag:blogger.com,1999:blog-3422073059660199398.post-49939095111209140402012-12-11T12:13:00.002-08:002012-12-11T12:13:44.935-08:00Javascript - Efeito gradient em textos<div style="text-align: center;">
Bem, não vou considerar isso como um tutorial, mais sim um codigo.</div>
<div style="text-align: center;">
Resultado final:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-h3J5dcNCgcc/T9tAHb1adII/AAAAAAAABds/Hg-MPJrOZh4/s1600/Grd.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-h3J5dcNCgcc/T9tAHb1adII/AAAAAAAABds/Hg-MPJrOZh4/s1600/Grd.JPG" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Para começar, crie um widget HTML\JAVASCRIPT e cole o codigo: </div>
<div style="text-align: left; width:600px;">
<script src="http://pastebin.com/embed_js.php?i=95UBUt3e">
</script>
</div>
<div style="text-align: center;">
<br />
Agora a explicação do codigo:<br />
<br />
<div style="border: 1px solid black; width:600px;">
var colorBegin = "#0000C8";</div>
<br />
Define a cor inicial do gradient, #0000C8, e o valor da cor RGB em HEX, ou seja R=00 G=00 B=C8, você pode usar qualquer ColorPicker para pegar esse codigo.<br />
<br />
<div style="border: 1px solid black; width:600px;">
var colorEnd = "#00C800";</div>
<br />
Define a cor final do gradient, mesma explicação acima.<br />
<br />
<div style="border: 1px solid black; width:600px;">
var text = "<span style="color: red;">WYSIWYG Web Builder is awesome!</span>";</div>
<br />
Define o texto a ser exibido, altere a parte em vermelho.<br />
<br />
<div style="border: 1px solid black; width:600px;">
document.getElementById("gradienttext").innerHTML = html;</div><br />
<br />
Essa parte, ira pegar todos os elementos com a id "gradienttext" e alterar o texto\html desse elemento para o HTML gerado pelo codigo. </div>
The Lord Yugihttp://www.blogger.com/profile/00054497063322370473noreply@blogger.com0tag:blogger.com,1999:blog-3422073059660199398.post-80716494350747166972012-12-09T20:39:00.000-08:002012-12-09T20:39:40.668-08:00Previa Template Free<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-FY0Z9dBMIh8/UMVmFj0U8GI/AAAAAAAABzg/Bnr_tpiNx54/s1600/Untitled-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="http://1.bp.blogspot.com/-FY0Z9dBMIh8/UMVmFj0U8GI/AAAAAAAABzg/Bnr_tpiNx54/s320/Untitled-1.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Só trazendo uma prévia de um template free que estou fazendo ^-^</div>
EroKiraTitorhttp://www.blogger.com/profile/12999926473141553822noreply@blogger.com0tag:blogger.com,1999:blog-3422073059660199398.post-76526212682980709662012-12-09T17:08:00.000-08:002012-12-09T17:08:13.402-08:00Template Minima Download<div class="separator" style="clear: both; text-align: center;">
<a href="http://stopdesign.com/img/portfolio/web_blogger_temps1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="263" src="http://stopdesign.com/img/portfolio/web_blogger_temps1.gif" width="320" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Bom, vim deixar o download do Template Minima. Espero que seja de ajuda aos que não o tem ^-^</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<b><span style="font-size: large;"><a href="http://www.mediafire.com/?9qs71yyemorq4re" target="_blank">Download</a></span></b></div>
EroKiraTitorhttp://www.blogger.com/profile/12999926473141553822noreply@blogger.com0tag:blogger.com,1999:blog-3422073059660199398.post-57857437805620025552012-12-04T22:32:00.002-08:002012-12-06T21:44:46.257-08:00Banners<div align="center">
468 x 60<br />
<img border="0" src="http://img14.imageshack.us/img14/6209/bannerxmc.gif" /><br />
<textarea cols="15" name="textarea" onfocus="this.select()" onmouseover="this.focus()" rows="3"><a href="http://storm-dsgn.blogspot.com/" target="_blank"><img src="http://img14.imageshack.us/img14/6209/bannerxmc.gif" border="0" /></a></textarea><br />
<br />
180 x 40</div>
<div align="center">
<img border="0" src="http://4.bp.blogspot.com/-yRsPrlysVhc/UMGA_5QoX5I/AAAAAAAAByg/eWdZXCEqytg/s1600/Banner-180x40.gif" /><br />
<textarea cols="15" name="textarea" onfocus="this.select()" onmouseover="this.focus()" rows="3"><a href="http://storm-dsgn.blogspot.com/" target="_blank"><img src="http://4.bp.blogspot.com/-yRsPrlysVhc/UMGA_5QoX5I/AAAAAAAAByg/eWdZXCEqytg/s1600/Banner-180x40.gif" border="0" /></a></textarea></div>
<div align="center">
<br />
88x31<br />
<img border="0" src="http://2.bp.blogspot.com/--U888ywDKcw/UMGBAkO0dOI/AAAAAAAAByk/z4HZcxP8Ac0/s1600/Banner-88x31.gif" /><br />
<textarea cols="15" name="textarea" onfocus="this.select()" onmouseover="this.focus()" rows="3"><a href="http://storm-dsgn.blogspot.com/" target="_blank"><img src="http://2.bp.blogspot.com/--U888ywDKcw/UMGBAkO0dOI/AAAAAAAAByk/z4HZcxP8Ac0/s1600/Banner-88x31.gif" border="0" /></a></textarea></div>
EroKiraTitorhttp://www.blogger.com/profile/12999926473141553822noreply@blogger.com5