tag:blogger.com,1999:blog-30832144021556939932023-11-16T06:31:40.838-08:00Saikyou Design Luccashttp://www.blogger.com/profile/07049193274680772603noreply@blogger.comBlogger41125tag:blogger.com,1999:blog-3083214402155693993.post-56428559793651055172013-05-20T15:04:00.001-07:002013-05-20T15:04:33.530-07:00Efeito Multicores em LinksO efeito multicores é um efeito aplicado nos links , quando se coloca o mouse em cima do link ele nao muda para apenas uma cor mas sim muitas como : azul, vermelho, amarelo, laranja, roxo, verde, lilás, rosa , etc. Nele próprio já vem o efeito "fade in out" .
<br />
<div class="linha2">
Adicionando Código</div>
<br />
<div class="linha">
Vá em painel > modelo > Editar html > procure por:</div>
<br />
<div class="code2">
</head></div>
<br />
Logo ACIMA da linha acima, cole esse código:
<br />
<br />
<pre><div class="code1">
<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script></div>
</pre>
<br/>
Pronto Salve e agora todos os links estarão com o efeito.Luccashttp://www.blogger.com/profile/07049193274680772603noreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-32222086959876092542013-05-18T10:08:00.000-07:002013-05-18T10:08:53.239-07:00Box de observação simples<br />
Fala galera neste tutorial vou ensinar a colocar uma caixa de observação muito simples no seu blog, primeiro adicione o código abaixo antes de ]]><br />
<br />
<pre><div class="code1">
/* observação by Daniel Barreto - saikyou Design*/<br />
.obs{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>text-align:center; /*alinhamento do texto*/<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-top:3px; /*subir ou descer*/<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>background:#6798E0;/*COR do fundo*/<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color:#000; /*cor do texto*/<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding-left:30px; /*empurar para a direita*/<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 1px #000 ; /*empurar para a direita*/<br />
-webkit-border-top-left-radius: 7px; /*tamanho da curvatura*/<br />
-webkit-border-top-right-radius: 7px; /*tamanho da curvatura*/<br />
-webkit-border-bottom-left-radius: 7px; /*tamanho da curvatura*/<br />
-webkit-border-bottom-right-radius: 7px; /*tamanho da curvatura*/<br />
}
</div>
</pre>
<br />
Agora para adicionar a barra em seu blog vai em layout/adicionar Gadgets/Html Javascript, e adicione a seguinte tag :<br />
<br />
<div class="code2">
<div class="obs">Aqui vc adiciona o conteudo do box</div></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-49865652338467674742013-05-14T13:57:00.002-07:002013-05-14T13:57:18.275-07:00Basico do Flash 1Oi esse tuto vai ser bem basico sobre o Flash.<br />
<br />
O que é flash?<br />
Flash é um software criado pela adobe, o flash permite você criar animações avançados, permite interajir com o visitante, muitos recursos só possiveis com o Flash.<br />
O flash pode criar desde banners de publicidades até layouts de sites.<br />
E o bom, blogger suporta flash!<br />
<br />
O Flash que cria programas?<br />
Sim, ele pode ser feito para ser utilizado a internet, como animações, são os com o formato .SWF , ou feitos para serem executados, os com formato .EXE<br />
<br />
Para usar o Flash preciso do Flash Player?<br />
Sim... para visualizar Arquivos .SWF em sites, baixe o Adobe Flash Player<br />
<br />
Adobe Flash e Adobe Flash Player é a mesma coisa?<br />
Não o Adobe Flash cria as animações e o Flash Player permite amostra-las no seu computador<br />
<br />
O que é actionscript?<br />
é a linguagem de programação usada para criar animações no flash<br />
<br />
<br />
<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-25659318401543487112013-05-10T11:52:00.000-07:002013-05-11T16:36:49.582-07:00Duplo tutorial, Efeito Tooltip + Menu TooltipOi gente, hoje o tutorial,é sobre o efeito tooltip e um menu usando esse efeito.
O efeito está na imagem abaixo:
<style>
#men{
margin-top: -9px;
margin-left: 4px;
border:0px;
background:black;
height: 30px;
width: 150px;
text-align:center;
}
#men a{
font-family: "basically";
color: #FFFFFF;
font-size: 12px;
}
#men a:hover{
color: #FFFFFF;
text-decoration:none;
}
@font-face {
font-family: 'basically';
src: url('http://static.tumblr.com/q1ljzdc/aVnmidiyn/basically-serif_free-version-webfont.woff');
}
@font-face {
font-family: 'pf ronda';
src: url('http://static.tumblr.com/q1ljzdc/YHKmidj8f/pf_ronda_seven-webfont.woff');
}
.imagem{
border-botton:1px gray solid;
width:150px;
}
.imagem:hover{
-webkit-filter: opacity(0.5);
}
</style>
<br />
Viu? Quando passa o mouse aparece a descrição.Então vamos começar:
Para adicionar tooltip, cole esse codigo:
<br />
<pre><div class="code1">
<script src="http://dyogophoenix.webs.com/Site/javascript/tooltip.js" /></div>
</pre>
abaixo de:
<br />
<div class="code2">
<head></div>
E cole:<br />
<br />
<br />
<pre><div class="code1">
div#qTip {<br />
padding: 3px; /*Espaço entre a borda e o texto*/<br />
border: 1px solid #666; /* Estilo da borda */<br />
display: none; /*Não mexa*/<br />
background: #999; /* Cor de fundo */<br />
color: #fff; /*Cor da fonte*/<br />
font-family: Verdana; /*Tipo de fonte*/<br />
font-size: 9px; /*Tamanho da fonte*/<br />
position: absolute; /*Não mexa*/<br />
z-index: 1000; /*Não mexa*/}</div>
</pre>
antes de <br />
<div class="code2">
]]></b:skin></div>
È só personalizar como está escrito no codigo.
<br />
<div class="linha2">
</div>
Agora vamos ao menu!
<br />
<center>
Amostração</center>
<br />
<img class="imagem" src="http://static.thesubwire.com/images/series/5/5/1/4/4eb849617a0c9646bd125093bce86f0e_0.jpg" title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat" />
<br />
<div id="men">
<a href="http://www.blogger.com/linkisinho" title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat">Lorem impsum</a></div>
Esse tipo de menu é bom para homepages, masd vamos começar,
Procura por <br />
<div class="code2">
]]></b:skin>
</div>
E acima disso cole:
<br />
<pre><div class="code1">
#men{<br />
margin-top: -9px;<br />
margin-left: 4px;<br />
border:0px;<br />
background:black;<br />
height: 30px;<br />
width: 150px;<br />
text-align:center;<br />
}<br />
#men a{<br />
font-family: "basically";<br />
color: #FFFFFF;<br />
font-size: 12px;<br />
}<br />
#men a:hover{<br />
color: #FFFFFF;<br />
text-decoration:none;<br />
}<br />
@font-face {<br />
font-family: 'basically';<br />
src: url('http://static.tumblr.com/q1ljzdc/aVnmidiyn/basically-serif_free-version-webfont.woff');<br />
}<br />
@font-face {<br />
font-family: 'pf ronda';<br />
src: url('http://static.tumblr.com/q1ljzdc/YHKmidj8f/pf_ronda_seven-webfont.woff');<br />
}<br />
.imagem{<br />
border-botton:1px gray solid;<br />
width:150px;<br />
}<br />
.imagem:hover{<br />
-webkit-filter: opacity(0.5);<br />
}</div>
</pre>
E no gadjet cole esse:<br />
<pre><div class="code1"><img class="imagem" src="http://static.thesubwire.com/images/series/5/5/1/4/4eb849617a0c9646bd125093bce86f0e_0.jpg" title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat" /><br />
<br /><br />
<div id="men"><br />
<a href="http://www.blogger.com/linkisinho" title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat">Lorem impsum</a></div>
</div>
</pre>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-47403720190980348832013-05-08T11:22:00.000-07:002013-05-09T13:38:51.914-07:00Efeito Fade em imagens do blogEfeito: a Imagem vai se apagando aos poucos ao passar o mause e quando solta, ela volta a ter cor, veja o exemplo na imagem a seguir<br />
obs( passe o mouse na imagem)<br />
<br />
<br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#image").mouseover(function(){
$(this).fadeOut(600);
$(this).fadeIn(4000);
});
});
</script>
<img id="image" src="http://ladygeekgirl.files.wordpress.com/2012/05/lucy-chan-lucy-heartfilia-18176975-406-519.jpg" />
<br />
<br />
Vamos ao codigo!<br />
<br />
Primeiro vá no html do seu blog e procure por:<br />
<br />
<div class="code2">
</head></div>
E acima disso cole esse codigo:
<br />
<br />
<pre><div class="code1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("fade").mouseover(function(){<br />
$(this).fadeOut(600);<br />
$(this).fadeIn(4000);<br />
});<br />
});<br />
</script><br />
</div>
</pre>
Para usar o efeito, use<br />
<div class="code1">
<fade><img src="LInk da imagem" /></fade></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-21092940227897996872013-05-08T09:51:00.003-07:002013-05-08T09:53:09.124-07:00Menu Scroll<img class="print" src="http://img825.imageshack.us/img825/3919/683afaf86c8e4bb58987075.png" />
Eae Galera vim trazer mais um tutorial legal de menus para voces , o menu de agora e o Scroll , confiram :<br />
<div class="demo2">
<a href="http://saikyoudtestes.blogspot.com.br/" target="_blank"><span style="color: white; font-family: inherit;">Demonstração</span></a></div>
<br/>
<div class="linha2">
1° Passo - Adicionando o Codigo</div>
<br />
Va no seu painel e la procure por :<br />
<div class="code2">
]]></div>
<br />
Antes da tag cole o codigo :<br />
<pre><div class="code1">
.menur{
float:left;
padding:6px;
text-align:center;
height:auto;
width:auto;
margin:1px;
webkit-transition-duration: .90s;
font:11px georgia;
background:#eee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
border-radius:10px;
color:555;
}
.menur:hover{
background:#ddd;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
-o-transform: rotateX(360deg);
}</div>
<div class="linha2">
2° Passo - Aplicando o Menu</div>
<br />
Cole este código onde deseja que o menu apareça:<br />
<div class="code2">
<a href="LINK DO MENU" class="menur">nome do link</a></div><br/>
<div class="linha">
Seu Menu esta Pronto - Comente</div>Luccashttp://www.blogger.com/profile/07049193274680772603noreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-53449827878986892062013-05-07T15:22:00.002-07:002013-05-07T15:45:00.343-07:00Adicionar publicidade abaixo de cada postagemFala galera da Saikyou nesse tutorial vou ensinar a colocar publicidade, ou melhor qualquer coisa a baixo de cada postagem como mostra a demonstração<br />
<br />
<div class="demo2">
<div style="text-align: center;">
<a href="http://adf.ly/OcKel" target="_blank"><span style="color: white;">Demonstração</span></a></div>
</div>
<br />
1°primeiro você deve ir em modelo editar html e buscar pela tag:
<br />
<br />
<div class="code2">
<data:post.body/></div>
<br />
logo abaixo dela deve-se colar o código do banner q vc quer fique em todas as postagens, e pronto...<br />
Valew galera e até a proxima postagem, não deixem de comentar...<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-87452443732082121272013-05-07T15:05:00.003-07:002013-05-07T15:05:35.705-07:00Banners AleatoriosOla Galera hoje venho trazer um tutorial muito legal para quem n gosta de ficar mudando os banners de publicidade , vamos la:
<br />
<div class="linha2">
1° Passo</div>
<br />
<div class="linha">
Crie um post/gadjet Html/JavaScript e cole o código abaixo:</div>
<br />
<pre><div class="code1">
<script language="Javascript">
hoje = new Date()
numero_de_imagens = 3
segundos = hoje.getSeconds()
numero = segundos % numero_de_imagens
if (numero == 0){
banner = "URL DA IMAGEM AQUI"
link = "URL DO SITE AQUI"
alvo = "out"
texto= "banner"
}
if (numero == 01){
banner = "URL DA IMAGEM AQUI"
link = "URL DO SITE AQUI"
alvo = "out"
texto= "banner"
}
if (numero == 02){
banner = "URL DA IMAGEM AQUI"
link = "URL DO SITE AQUI"
alvo = "out"
texto= "banner"
}
document.write('<a href=" ' + link +' "><img src="' + banner + '"/></a>')
</script></div>
</pre>
<br />
<div class="linha2">
Editando</div>
<br />
Para aumentar a quantidade de banners, siga abaixo como efetuar o processo.<br />
<div class="linha">
Copie o código abaixo:</div>
<br />
<pre><div class="code1">
if (numero == 03){
banner = "URL DA IMAGEM AQUI"
link = "URL DO SITE AQUI"
alvo = "out"
texto= "banner"</div>
</pre>
<br/>
Coloque o código abaixo do termino do if (numero == 02), e lembrando em editar a parte vermelha e colocando um número diferente.
Fonte: UlquiorraLuccashttp://www.blogger.com/profile/07049193274680772603noreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-38881725328149202982013-05-06T04:51:00.004-07:002013-05-07T13:58:04.064-07:00Menu JumpFala galera nesse tutorial vou ensinar algo simples, mas que ajuda na personalização de seu site/blog, vou ensinar a fazer um menu JUMP<br />
<br />
<div style="text-align: center;">
<div class="demo2">
<a href="http://adf.ly/OWL6Y" target="_blank"><span style="color: white;">Demonstração</span></a></div>
</div>
<br />
<pre>
<div class="code1">
<form name="jump"><br />
<select style="width:250px" name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO"><br />
<option>Lista de Links</option><br />
<option style="background-color: #cccccc"value="#">Link aki</option><br />
<option style="background-color: #ffffff"value="#">Link aki</option><br />
<option style="background-color: #cccccc"value="#">Link aki</option><br />
<option style="background-color: #ffffff"value="#">Link aki</option><br />
<option style="background-color: #cccccc"value="#">Link aki</option><br />
</select><br />
</form></div>
<br />
Explicações:<br />
<div class="linha">
width:250px /*largura da caixa*/;</div>
No código acima em background color eu utilizei uma cor diferente em cada background color :<br />
<br />
<pre>
<div class="code1">
<option style="<span style="color: #3d85c6;">background-color: #ffffff</span>"value="#">Link aki</option><br />
<option style="<span style="color: #3d85c6;">background-color: #cccccc</span>"value="#">Link aki</option></div>
<br />
Isso por que quis deixar o fundo dos links diferentes um de outro pra dar um efeito mais bonito, mas isso fica a escolha.<br />
<br />
Obrigado e não deixe de comentar...Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-14836378075688678302013-05-05T10:36:00.000-07:002013-05-05T13:43:06.859-07:00Template Free - Fairy TailFala galera da Designer Storm, quem fala aqui é o Daniel e vim pra disponibilizar um template free ^^, que eu criei do anime fairy tail, no rar contém o psd do header, as imagens e o arquivo xml<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKTqIdsHOo6-AwmmMqJWlAy16MhOee5xDpun4Kg0DToak7qZp85RoGy-Ocmoubqtbn-RD2S85b4szi0rr6EeOr2vc3xF_kVWoLJy8S3LNRvVUuQIEr9UGxa3f2kwvj46R2t5dZzOT98P0/s1600/free.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKTqIdsHOo6-AwmmMqJWlAy16MhOee5xDpun4Kg0DToak7qZp85RoGy-Ocmoubqtbn-RD2S85b4szi0rr6EeOr2vc3xF_kVWoLJy8S3LNRvVUuQIEr9UGxa3f2kwvj46R2t5dZzOT98P0/s200/free.png" width="200" /></a></div>
Titulo : Template Fairy Tail<br />
Tamanho: 2.2 MB<br />
Desenvolvido por : Daniel Barreto<br />
Download: <a href="http://adf.ly/OTwlk">MediaFire</a><br />
<br />
<div class="code2">
<a href="http://adf.ly/OTxPF" target="_blank"><span style="color: white;">Demonstração</span></a></div>
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-72505103045215265582013-05-03T16:42:00.004-07:002013-05-19T08:13:52.372-07:00Retirar Atributtion do blogger<div class="code1">
Primeiro vá no Modelo do blog>> editar HTML >> Expandir modelos widget</div>
<br />
<div>
<img src="http://img854.imageshack.us/img854/8090/ef1c8f6fcf5e468eb92fbac.png" /></div>
<div>
e procure por:
<br />
<br />
<blockquote>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'></blockquote>
</div>
<div>
<br />
<a name='more'></a><br /></div>
e modifique o codigo verde "true" para false.<br />
salve.vá no layout do blog e vá no widget Attribution, click em editar<br />
<img src="http://i.imgur.com/9Lu3O5O.png" /><br />
<br />
e exclua:<br />
<br />
<img src="http://i.imgur.com/xDNuH5X.png" /><br />
<br />
<div class="code1">mudando o "locked" de false para true, você pode excluir esse widget.</div> <br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-51965131780362709332013-05-03T16:41:00.003-07:002013-05-19T08:13:52.366-07:00Personalizar Links: Postagens mais antigas,Postagens mais recentes e home<div class="separator" style="clear: both; text-align: center;">
<a href="http://img202.imageshack.us/img202/7606/0e1ebbf1046a4af7ba9ba21.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://img202.imageshack.us/img202/7606/0e1ebbf1046a4af7ba9ba21.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Esse tuorial é simples e facil, nele a gente vai personalizar as divs desses links de navegação.</div>
<div class="linha2">
</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<a name='more'></a><br />
<br />
<div class="code1">
<div class="separator" style="clear: both; text-align: left;">
então primeiramente vá no modelo >> Editar HTML>> expandir modelos widjet</div>
</div>
<div class="separator" style="clear: both; text-align: left;">
<img src="http://i.imgur.com/fka9auA.png" /></div>
<div class="separator" style="clear: both; text-align: left;">
e procure por </div>
<div class="code1">
<b:includable id='nextprev'></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
, e vai aparecer algo assim:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<img height="464" src="http://i.imgur.com/Q1VHaSx.png" width="640" /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Apague todo esse trecho e substitua por esse:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
</div>
<div class="code1">
<b:includable id='nextprev'>
<br />
<div class="separator" style="clear: both;">
<div class='blog-pager' id='blog-pager'></div>
<div class="separator" style="clear: both;">
<b:if cond='data:newerPageUrl'></div>
<div class="separator" style="clear: both;">
<span id='blog-pager-newer-link'></div>
<div class="separator" style="clear: both;">
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='ENDERECO-DA-IMAGEM-DO POSTAGENS MAIS RECENTES'/></a></div>
<div class="separator" style="clear: both;">
</span></div>
<div class="separator" style="clear: both;">
</b:if></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b:if cond='data:olderPageUrl'></div>
<div class="separator" style="clear: both;">
<span id='blog-pager-older-link'></div>
<div class="separator" style="clear: both;">
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='ENDERECO-DA-IMAGEM-POSTAGENS MAIS ANTIGAS'/></a></div>
<div class="separator" style="clear: both;">
</span></div>
<div class="separator" style="clear: both;">
</b:if></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='ENDERECO-DA-IMAGEM-DO INICIO'/></a></div>
<br /></div>
Pronto! é so isso. visualize e salve se tudo estiver certo.Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-3083214402155693993.post-66432496080738108122013-05-03T16:41:00.001-07:002013-05-19T08:13:52.370-07:00Personalizar Links com Csshoje o tuto é sobre personalização de links
.como no print:<br />
<div class="linha2">
</div>
<br />
<div class="code1">
<img src="http://i.imgur.com/UxQYjQu.png" /><span style="color: #990000; font-size: xx-small;">normal</span><br />
<br />
<img src="http://i.imgur.com/43xTkIQ.png" /><span style="color: #660000; font-size: xx-small;">com o mouse sobre</span></div>
<span style="color: #660000; font-size: xx-small;"></span><br />
<a name='more'></a><span style="color: #660000; font-size: xx-small;"><br /></span>
<span style="color: #660000; font-size: xx-small;"><br /></span>
<span style="color: #660000;">O link tem varios estados ai vão eles:</span><br />
<span style="color: #660000;"><br /></span>
<br />
<div class="code1">
<span style="color: #660000;">Hover: acontece quando o mouse esta sobre o link.</span><br />
<span style="color: #660000;"><br /></span>
<span style="color: #660000;">Visited: são os links que já foram visitados</span><br />
<span style="color: #660000;"><br /></span>
<span style="color: #660000;">Active: acontece quando você está nesse link</span><br />
<span style="color: #999999;"><br /></span>
</div>
Bom para personalizar o css, abra o blogger, vá em modelo > personalizar > editar html<br />
<br />
e antes de<br />
<div class="code2">
<i><br /></i>
<i> ]]></b:skin></i></div>
<br />
e cole:<br />
<div class="code1">
<--------------------------------------------------------------------------------------------------------->
//* feito por gui todos os direitos*//<br />
a:link {
color: #####; /*cor do link normal*/
text-shadow: black 0.1em 0.1em 0.2em; /*sombreado do link*/
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;/*efeitos de transição(não mecha aqui)*/
}
<br />
<br />
a:visited {
color:#696969;/*cor do link visitado*/
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;/*efeitos de transição(não mecha aqui)*/
}<br />
<br />
a:hover {
color:#000000;/*cor do link quando o mouse estiver por cima*/
text-shadow: black 0.1em 0.1em 0.2em,0 0 10px #1E90FF, 0 0 20px #1E90FF, 0 0 30px#1E90FF, 0 0 40px #87CEEB, 0 0 70px #87CEEB, 0 0 80px #DCDCDC, 0 0 100px #DCDCDC, 0 0 150px #AFEEEE; /*sombreado do link*/
text-decoration:none;
font: Verdana, Arial, Helvetica, sans-serif;
}<br />
<br />
a:active {
color:#000000;/*cor do link que recebe um <i>click</i>*/
text-shadow: black 0.1em 0.1em 0.2em,0 0 10px #1E90FF, 0 0 20px #1E90FF, 0 0 30px#1E90FF, 0 0 40px #87CEEB, 0 0 70px #87CEEB, 0 0 80px #DCDCDC, 0 0 100px #DCDCDC, 0 0 150px #AFEEEE;/*sombreado do link*/
text-decoration:none;
font: Verdana, Arial, Helvetica, sans-serif;
}
<br />
<div>
<---------------------------------------------------------------------------------------------------------></div>
</div>
<div>
</div>
<div>
bom por hoje é só valeu</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-8356195075252182932013-05-03T16:40:00.001-07:002013-05-19T08:13:52.375-07:00Personalizar barra de rolagem ( scrollbar )<style>
blockquote {
color: #fff;
font-size: 11px;
background: #4b2512;
padding: 10px;
outline-offset: -6px;
outline: 1px dashed #fff;
text-shadow: 1px 1px 1px #1f0f07;
-moz-text-shadow: 1px 1px 1px #1f0f07;
box-shadow: inset 5px 5px 8px #211008, inset -5px -5px 8px #211008;
-moz-box-shadow: inset 5px 5px 8px #211008, inset -5px -5px 8px #211008;}
b { color: #ff5964;}
i { color: #eac186;}
u { background: #ff5964; color: #fff; text-shadow: 1px 1px 1px #932e34; -moz-text-shadow: 1px 1px 1px #932e34; padding-left: 1px; padding-right: 1px; text-decoration: none;}
::-moz-selection {
background:#ff5964; /*Cor do fundo*/
color:#fff; /*Cor da fonte*/
text-shadow: 1px 1px 1px #6d2025;
-moz-text-shadow: 1px 1px 1px #6d2025;
}
</style>
<br />
<center>
<img src="http://i.imgur.com/HiEx09G.png" /> <img src="http://i.imgur.com/arLv4Lg.png" /></center>
<center>
<a name='more'></a><br />
<br />
</center><div class="code1">
Esse tutorial é de como personalizar a barra de rolagem do seu blog, ele funciona no Google Crhome e no Mozila Firefo, ele não pega no Internet Explorer(Não me diga??? ¬¬").Para entender o codigo, olhe esse print com as partes da barrinha(scrollbar)<br />
</div><center>
<img src="http://i.imgur.com/z9qMgDr.png" /></center>
<br />
<br />
Cole o codigo antes de <br />
<div class="code2">
]]></b:skin></div>
<br />
<br />
<div class="code1">
/*Esse é o codigo*/<br />
Barrinha da parte de cima(a parte que se move)<br />
::-webkit-scrollbar-thumb:vertical {<br />
background: #ff0f72; /* fundooo */<br />
border: 1px solid #bgh; /*Bordaa(se não quiser retire)*/<br />
height:50px; /*Tamanho da barra */<br />
border-radius: 20px; /* borda arredondada, se não quiser apague... */<br />
-moz-border-radius: 20px; /* borda arredondada, se não quiser apague... */<br />
-webkit-border-radius: 20px; /* borda arredondada, se não quiser apague... */<br />
}<br />
Barrinha da parte de baixo(a parte que se move)<br />
::-webkit-scrollbar-thumb:horizontal {<br />
background-color:#ff0f72; /*Cor da barrinha que se move*/<br />
border: 1px solid #bgh; /*Coloque borda se quiser*/<br />
height:10px; /*tamanho */<br />
border-radius: 20px; /* borda arredondada, se não quiser apague... */<br />
-moz-border-radius: 20px; /* borda arredondada, se não quiser apague... */<br />
-webkit-border-radius: 20px; /* borda arredondada, se não quiser apague... */<br />
display: none; /* trecho que "apaga" a barrinha do fundo, eu acho feia, mas se quiser deixar apague o treixo */<br />
}<br />
Barrinha que não se move<br />
::-webkit-scrollbar {<br />
height:10px; /*tamanho */<br />
width:15px; /*Largura da barra de rolagem*/<br />
background: #000000; /*Cor da parte fixa, que fica no mundo*/<br />
border: 1px solid #bgh; /*Coloque borda se quiser*/<br />
}<br />
/* fim do codigo */</div>
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-40345343244726588602013-05-03T16:39:00.005-07:002013-05-19T08:13:25.298-07:00Personalizar favicon do blog<img src="http://i.imgur.com/mTJuNRv.png" /><br />
Favicon são esses icones que ficam ao lado do titulo do blog na aba do seu navegador, e o tutoriai de hoje é de como personalizá-lo.<br />
<br />
<a name='more'></a><br />
<br />
<div class="code1">
Vá no modelo do seu blog:<br />
<br />
<link href='LINK DA IMAGEM' rel='icon' type='image/x-icon'/><br/> <link href='LINK DA IMAGEM' rel='shortcut icon' type='image/x-icon'/></div>
Cole esse codigo antes de<br />
<br />
<div class="code2">
<head><br />
<br /></div>
e onde está
<br />
<div class="code2">
LINK DA IMAGEM
</div>
, ponha o link do seu favicon.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-2478004102189410042013-05-03T16:39:00.003-07:002013-05-19T08:13:52.362-07:00Menu hover com imagens<center>
<div class="code2">
<a a="" br="" gt="" href="http://saikyoudtestes.blogspot.com.br/2013/05/menu-hover-com-imagens.html%3EDemo%3C/a%3E%3C/div%3E%3C/center%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Cbr%20/%3EV%C3%A1%20no%20CSS%20do%20seu%20blog(%20antes%20de%20]]%3E%3C/b:skin%3E%20)%3Cbr%20/%3E%3Cbr%20/%3E%3Ccode%3E#Menu {<br />background: url(IMAGEM NORMAL);<br />height: 10px; //altura da imagem normal//<br />width: 10px; //largura da imagem normal//<br /><br />transition-duration: 0.5s; //Efeitos de transição para ficar uma animação lenta//<br />-webkit-transition-duration: 0.5s;<br />-moz-transition-duration: 0.5s;<br />}<br /><br />#Menu:hover {<br /><br />background: url(IMAGEM QUANDO PASSAR O MOUSE);<br />height: 10px; //altura da imagem hover//<br />width: 10px; //largura da imagem hover//<br /><br /><br />transition-duration: 0.5s; //Efeitos de transição para ficar uma animação lenta//<br />-webkit-transition-duration: 0.5s;<br />-moz-transition-duration: 0.5s;<br />}</code><br /><br />------------------------------------------------------------------<br />Pronto, já adicionamos o Css , agora temos que botar o Html<br />Agora va onde você quer por o menu hover, e cole isso<br /><br /><a href="LINK"><div id=" lt="" menu="">
<br />
</a></div>
</center>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-58202994512033802222013-05-03T16:39:00.001-07:002013-05-19T08:13:52.367-07:00Personalizar leia mais le vão elas:<br />
<br />
<div class="code2">
Vá no seu modelo HTML e antes de ]]></b:skin> , e cole issso no seu CSS</div>
<br /><div class="code1">
<span style="background-color: white;">.jump-link {<br />
float: right; // posicionamento///<br />
margin-top: 10px; //posição ao topo//<br />
margin-left: 10px; //posição a esquerda//<br />
background: url(); ///imagem de fundo///<br />
}</span><br />
<span style="background-color: #cc0000; font-size: x-small;"></span><br />
<span style="font-size: x-small;"></div>Entendendo o Codigo...</span><br />
<span style="font-size: x-small;">Essa classe diz respeito a tag jump-link, dada pelo blogger.</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;">O leia mais não vai aparecer em todas as post, para que aparece n</span><span style="font-size: x-small;">a post que voccê quiser, va em adicionar post, clicke no ponto que você quera que o leia mais aparece, e aperte esse botão:</span><br />
<img src="http://i.imgur.com/Thfc8eR.png" />(fica abaixo do titulo da post, para a direita)<br />
Aqui vão algumas imagens bem simples que eu fiz, estão disponiveis, desde que você credite a designer storm.<br />
São eles:<br />
<img src="http://i1054.photobucket.com/albums/s491/Poti_Lepotie/leia2_zpsdefa189b.png" /><br />
<br />
<img alt=" photo leia1_zps63290883.png" src="http://i1054.photobucket.com/albums/s491/Poti_Lepotie/leia1_zps63290883.png" /><br />
<img src="http://i1054.photobucket.com/albums/s491/Poti_Lepotie/leia4_zps259742e7.png" /><br />
<br />
<img src="http://i1054.photobucket.com/albums/s491/Poti_Lepotie/leia3_zpsb5ddf3cc.png" /><br />
<br />
<img src="http://i1054.photobucket.com/albums/s491/Poti_Lepotie/leia8_zpsfd3a18a5.png" /><br />
<img src="http://i1054.photobucket.com/albums/s491/Poti_Lepotie/leia7_zpsd8eba0a5.png" /><br />
<img src="http://i1054.photobucket.com/albums/s491/Poti_Lepotie/leia6_zps0b47652b.png" /><br />
<img src="http://i1054.photobucket.com/albums/s491/Poti_Lepotie/leia5_zps4c378bac.png" />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-76585363800131121102013-05-03T16:38:00.004-07:002013-05-19T08:13:52.374-07:00Criar formularios com o Wufoo e o Jot FomsMuita gente se pergunta como fazer um formulario, eles querem fazer com codigo, por html, ate daria, e não é dificil.<br />
O problema é: Pra onde vai esse formulario?<br />
é impossivel com html, fazer com que o formulario vá para o seu e-mail, por exemplo.<br />
Para fazer isso, ou algo assim, é preciso de uma outra linguagem chamada <span style="color: #444444;"><i>Php</i></span>, que infelizmente o blogger não suporta <strike>Fuuuuuuuuuuuuuuuuuuuuuuuu</strike>.<br />
Mas esse não é o fim, graças a deus, tem alguns sites que são geradores de formularios, existem muitos deles mais os melhores são: o <span style="color: #444444;"><i>Wufoo</i></span> e o <i><span style="color: #444444;">Jot Forms </span></i><br />
<i><span style="color: #444444;"></span></i><br />
<a name='more'></a><i><span style="color: #444444;"><br /></span></i>
então vamos começar o tutorial(vou começar pelo wufoo):<br />
vá ate o site: <a href="http://www.wufoo.com/">http://www.wufoo.com/</a><br />
<img height="283" src="http://i.imgur.com/Oq2A2KF.png" width="450" /><br />
click em "Sing Up for Free"<br />
<br />
Se registre no wufoo<br />
<img height="326" src="http://i.imgur.com/YUCa1oa.png" width="400" /><br />
Pronto, você já está registrado, agora vamos fazer o formulario.<br />
<br />
Click em "New form"<br />
<img src="http://i.imgur.com/dmQdT0u.png" /><br />
Esse é o painel para criar um formulario:<br />
<img height="284" src="http://i.imgur.com/peEy8Qf.png" width="420" /><br />
<br />
Esses são os campos disponiveis:<br />
<br />
<img src="http://i.imgur.com/2W6cyJ4.png" /> esse campo cria um campo de texto comum, para nome, etc...<br />
<img src="http://img822.imageshack.us/img822/5899/99f45cec9c3a440682b3332.png" />o mesmo do de cima, só que cria um campo maior, do tamanho de um paragrafo<br />
<img src="http://i.imgur.com/zXMFPNf.png" />cria um botão de multipla escolha<br />
<img src="http://img51.imageshack.us/img51/6835/66c5e053b13741ef85f4144.png" />é um campo de texto, só que para numeros,e util para sorteios, etc...<br />
<img src="http://img96.imageshack.us/img96/4800/f55c30f3c41942e2b553142.png" />cria um checkbox, para você marcar preferencias por exemplo, você pode ativar a opção de multipla escolha ou não.<br />
<img src="http://i.imgur.com/5YQJd1o.png" />é um botão em que quando você clica, abrem opoções para você escolher, é util para perguntar a data de nascimento<br />
<img src="http://i.imgur.com/LHhHtV9.png" /> esse botão divide o formularios em varias partes.<br />
<img src="http://i.imgur.com/a4cvZIt.png" />é usado para emails, é diferente do single line text porque tem validação de email.<br />
<img src="http://i.imgur.com/Qzfxzu9.png" /> botão de upload: usado para a pessoa escolher um arquivo, uma imagem por exemplo.<br />
Esses são os principais campos, se você clikar sobre eles, aparecem as configurações.<br />
<img height="393" src="http://img689.imageshack.us/img689/6673/eb38ca71a0dd4871b86fa34.png" width="640" /><br />
agora se você clikar aqui:<br />
<img src="http://img255.imageshack.us/img255/8683/2bfa057eb3324704b77de24.png" /><br />
você tem as configurações do formulario, assim:<br />
<img src="http://img200.imageshack.us/img200/7209/d3214db5d3e2452ca738085.png" /><br />
Quando acabar: clike em "Save Form"<br />
<img src="http://i.imgur.com/EMVhQwc.png" /><br />
Vai aparecer essa mensagem:<br />
<img height="143" src="http://i.imgur.com/Yq9V81u.png" width="400" /><br />
<br />
clike no "2"<br />
Vai aparecer uma pagina, e em "to My InBox" preencha:<br />
<img src="http://img40.imageshack.us/img40/4091/ccf453e34a724cefbd19ad6.png" /><br />
e click em save, depois, click em "Forms" lá em cima<br />
<img src="http://img811.imageshack.us/img811/2318/3976ea45d206424dad8ff8b.png" /><br />
<br />
ai vai aparecer a pagina onde ficam todos os seus formularios, click em code.<br />
<img src="http://i.imgur.com/uHoNJ47.png" /><br />
<br />
vai ficar tipo assim:<br />
<img src="http://i.imgur.com/KB9rcPV.png" /><br />
clike em "Embed Form Code"<br />
<img src="http://i.imgur.com/wRW0sVt.png" /><br />
Copie o segundo, o "Iframe Version", e cole onde você quer que ele apareça.<br />
No codigo, tem:<br />
height="726"<br />
Essa é a altura, se quiser mudar altere<br />
<br />
<br />
Pronto! Já acabamos de fazer com o Wufoo , agora vamos para p Jot Forms<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://cache01.stormap.sapo.pt/fotostore01/fotos//f1/dd/9b/2713954_uZCrk.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://cache01.stormap.sapo.pt/fotostore01/fotos//f1/dd/9b/2713954_uZCrk.gif" /></a></div>
<br />
Jot Form:<br />
primeiro de tudo, acesse o jot forms: <a href="http://portuguese.jotform.com/">http://portuguese.jotform.com/</a><br />
no jot form não precisa se cadastrar para conseguir fazer seu formulario.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img height="450" src="http://img10.imageshack.us/img10/8351/2c3164cf11a44465bcd92ff.png" style="margin-left: auto; margin-right: auto;" width="600" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Esse é o painel de tarefas do Jot Form</td></tr>
</tbody></table>
Os itens são como os do Wufoo(eu so vou explicar os diferentes):<br />
<div style="text-align: left;">
<br /></div>
<br />
<table>
<tbody>
<tr>
<td widht="50%"><img src="http://i.imgur.com/oD4mzOQ.png" /></td>
<td widht="50%">Cabeçalho: apenas um titulo para o formulario<br />
Caixa de texto: uma caixa de texto comum<br />
Area de texto: uma caixa de texto maior, e que você pode aumentar<br />
Menu suspenso:tipo o menu drop down do wufoo( usado para datas<br />
Botão radial: botão multipla escolha<br />
Caixa de seleção: caixa de seleção de preferencias<br />
Carregar arquivo: enviar imagem<br />
Botão de envio: botao que envia o formulario (>^.^>)<br />
<br /></td>
</tr>
</tbody></table>
<br />
<table>
<tbody>
<tr>
<td widht="50%"><img src="http://i.imgur.com/9SMR5HO.png" /></td>
<td widht="50%">Nome completo: duas caixas de texto(inutil e.e)<br />
Email: caixa de texto com validação de email<br />
Endereço: são varios elementos, que verificam o endereço<br />
Telefone: pede o numero do celular<br />
Data e hora: um menu drop down que pede data e a hora<br />
Time: igual a hora so que só a hora<br />
Data de aniversario: um menu drop down com mes dia e ano<br />
Numero: uma caixa de texto que só aceita numeros</td>
</tr>
</tbody></table>
<br />
<table>
<tbody>
<tr>
<td widht="50%"><img src="http://img819.imageshack.us/img819/2621/ad5eac79d7bd4c068bde613.png" /></td>
<td widht="50%">Avaliação estrela: aparecem varias estrelas para você avaliar<br />
Avaliação tipo escala: igual a estrela, mas com numeros<br />
Classificação: varios valores que fazem uma media<br />
Deslisar: você pode deslizar com a setinha até o valor que quer<br />
Data e hora: um menu drop down que pede data e a hora<br />
Time: igual a hora so que só a hora<br />
Intervalo: dois caixas drop down para numeros<br />
Giratorio: ao clikar na setinha vai passando um numero<br />
Matriz: Uma tabela e cada item dessa tabela é um objet de seleção<br />
Formulario expansivel: Ao clikar na seta, amostra mais elementos do formulario<br />
Quabra de pagina: formulario dividido em etapas</td></tr>
</tbody></table>
<br />
<table>
<tbody>
<tr>
<td widht="50%"><img src="http://img834.imageshack.us/img834/3030/19daad9eab2e4196bc4ce17.png" /></td>
<td widht="50%">Texto livre: você insere seu proprio HTML<br />
Senha: um campo normal, so que tudo digitado alivira uns asteristicos<br />
Caixa escondida: essa caixa não vai aparecer no formulario(mas ta la)<br />
Unico ID: pega o ID do usuario, (fica escondido)<br />
Capcha: validação com letras e numeros para inpidir que robos entrem no formulario(e importante)<br />
Imagem: insere imagem<br />
Auto completar: enquanto você digita, a palavra, ela é automaticamente escrita.<br />
Fiilepicker.io: para pegar arquivos dos registrados nesse site</td></tr>
</tbody></table>
<br />
Depois de fazer tudo, e tal, visualize e salve:<br />
<img src="http://i.imgur.com/p0Zhuk8.png" /><br />
Depois de salvar, clike em "Setup & Embed"<br />
<img src="http://img855.imageshack.us/img855/7033/389c8f5f88a64a07a8ccfbc.png" /><br />
Depois, clike em "incorporar Formulario"<br />
<img src="http://i.imgur.com/eEmfNRX.png" /><br />
Após fazer isso, já podemos por o formulario no seu blog!<br />
Feche esse popup, e vai aparecer esse outro:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img src="http://i.imgur.com/7Uf3Bqj.png" style="margin-left: auto; margin-right: auto;" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">clike em iframe</td></tr>
</tbody></table>
<br />
Copie esse codigo:<br />
<img src="http://img837.imageshack.us/img837/4359/0fe4d520d6154c85822b92d.png" /><br />
agora é so colar onde quiser que o codigo apareça.^.^<br />
<br />
<br />
<a href="http://cache01.stormap.sapo.pt/fotostore01/fotos//f1/dd/9b/2713954_uZCrk.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://cache01.stormap.sapo.pt/fotostore01/fotos//f1/dd/9b/2713954_uZCrk.gif" /></a><br />
<br />
Bom agora vou dar minha opinião sobre cada um deles<br />
<br />
Jot Form:<br />
<br />
<img src="http://i743.photobucket.com/albums/xx77/shikinha_99/1-106.png" /> é em portugues<br />
<br />
<img src="http://i743.photobucket.com/albums/xx77/shikinha_99/1-106.png" /> não precisa se cadastrar<br />
<br />
<img src="http://i743.photobucket.com/albums/xx77/shikinha_99/1-106.png" /> variedade grande de campos<br />
<br />
<img src="http://i743.photobucket.com/albums/xx77/shikinha_99/1-106.png" /> simples<br />
<br />
<img src="http://i743.photobucket.com/albums/xx77/shikinha_99/16-1.png" /> as vezes quando eu faço buga<br />
<br />
<img src="http://i743.photobucket.com/albums/xx77/shikinha_99/16-1.png" /> muitas coisas só se pode fazer com dominio<br />
<br />
Wufoo:<br />
<br />
<img src="http://i743.photobucket.com/albums/xx77/shikinha_99/1-106.png" /> simples<br />
<br />
<img src="http://i743.photobucket.com/albums/xx77/shikinha_99/1-106.png" /> layout bonito<br />
<br />
<img src="http://i743.photobucket.com/albums/xx77/shikinha_99/16-1.png" /> não deixa por campo senha<br />
<br />
;) flw gent<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-63206828893981944172013-05-03T16:38:00.001-07:002013-05-19T08:13:52.369-07:00Personalizar Autor das posts - Avatar do autor<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzhfDiCNdSOa1i_hwcKNTr9J62Ju_DWuz_yNCC07Jkfdz-E7cGJD1d5fqAVRcKPjfdCg7ef8aP8ZES2ydo1yujR8CF652J98a3lMun_shkjlrG9PG0qVAnGDHQYmHn_mcJHoEm9kq4aq4/s1600/avatar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzhfDiCNdSOa1i_hwcKNTr9J62Ju_DWuz_yNCC07Jkfdz-E7cGJD1d5fqAVRcKPjfdCg7ef8aP8ZES2ydo1yujR8CF652J98a3lMun_shkjlrG9PG0qVAnGDHQYmHn_mcJHoEm9kq4aq4/s400/avatar.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<a name='more'></a><br />
<br />
Nesse tutorial , vamos personalizar variavel, do nome do autor da postagem.<br />
como no print.<br />
repita esse codigo pelo numero de postadores que tem no seu blog.<br />
<br />
Vamos lá: primeiro vá ao lugar onde você quer por a imagem,<br />
se for no topo das postagens , cole o codigo abaixo ACIMA de <br />
<div class="code2">
<i><b:if cond='data:post.title'> </i></div>
<br />
<br />
<br />
<div class="code1">
<b:if cond='data:post.author == "NOME DO POSTADOR NO BLOGGER><img src='IMAGE' height='50' width='60' /></b:if></div>
<br />
<br />
<br />
<br />
já, se quiser que aparece na parte de baixo da post, cole DEPOIS de <br />
<div class="code2">
<data:post.body/></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-68316342826007652252013-05-03T16:37:00.003-07:002013-05-19T08:13:52.371-07:00Menu PerseguiçãoYoo minna, hoje fiz um menu bel legal pra vocês ^.^<br />
<a href="http://amostras-storm.blogspot.com.br/2013/04/menu-parseguicao.html"></a><br />
<div class="code2">
<a href="http://amostras-storm.blogspot.com.br/2013/04/menu-parseguicao.html">Amostração</a></div>
<br />
Primeiro cole isso no Css do seu blog ( antes de ]]></b:skin> )<br />
<br />
<br />
<div class="code1">
#fundo {<br />
background: #1C3C57;<br />
border-radius: 10px 20px;<br />
height: 24px;<br />
width: 700px;<br />
border-bottom: 7px solid #00213D;<br />
}<br />
@font-face {<br />
font-family: 'basically';<br />
src: url('http://static.tumblr.com/q1ljzdc/aVnmidiyn/basically-serif_free-version-webfont.woff');<br />
}<br />
<br />
#item a:link{<br />
<br />
Font-family:basically;<br />
font-weight:bold;<br />
color: #DCDCDC;<br />
border-bottom: 1px solid #0576B3;<br />
text-decoration: none;<br />
transition-duration: 0.5s;<br />
transition-timing-function: ease-in;<br />
transition-property: all;<br />
padding: 13px;<br />
<br />
margin-left: 20px;<br />
<br />
}<br />
<br />
#item a:hover{<br />
<br />
Font-family:basically;<br />
font-weight:bold;<br />
color: #C5C6C7;<br />
text-decoration: none;<br />
border-bottom: 7px solid #0576B3;<br />
margin-left: 20px;<br />
<br />
}</div>
<br />
Agora cole isso onde você quer que apareça o menu:<br />
<br />
<br />
<div class="code1">
<div id='fundo'><br />
<div id='item'><br />
<a href='linkmeubem'>LOLOLO<a/><br />
<a href='linkmeubem'>LOLOLO<a/><br />
<a href='linkmeubem'>LOLOLO<a/><br />
<a href='linkmeubem'>LOLOLO<a/><br />
<br />
</div><br />
</div><br />
<br /></div>
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-4302077610057029422013-05-03T16:37:00.001-07:002013-05-19T08:13:52.364-07:00Senha para permanecer no blogOi gente, esse tutorial é bem util pra quem deixa o blog em hiatus por algum tempo, nele vo ensinar a fazer aparecer uma caixinha de dialogo ao carregar o blog, para perguntar a senha, se ela estiver correta, você pode prossiguir, senão, ele te manda para o google.<br />
<br />
<div class="codigo">
Esse é o codigo, cole antes de<br />
<br />
<div class="code2"></body></div></div>
<br />
<div class="code1">
<span style="color: #444444;"><script></span>
<span style="color: #444444;">
</span>
<span style="color: #444444;">var senha=prompt('informe a senha');</span>
<span style="color: #444444;">if (senha == 'SENHA') {</span>
<span style="color: #444444;">alert('TEXTO QUE VAI EXIBIR AO ACERTAR')</span>
<span style="color: #444444;">}</span>
<span style="color: #444444;">else {</span>
<span style="color: #444444;">alert('</span><span style="color: #444444;">TEXTO QUE VAI EXIBIR AO ERRAR</span><span style="color: #444444;">')</span>
<span style="color: #444444;">location ='LINK QUE VAI QUANDO ERRAR'</span>
<span style="color: #444444;">}</span>
<span style="color: #444444;">
</span>
<span style="color: #444444;">
</span>
<span style="color: #444444;"></script></span>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-89425242808724549212013-05-03T16:35:00.003-07:002013-05-05T16:36:45.798-07:00Download Photoshop Cs5<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSavSPP6lWJvXQOn3I9Kqdl7VzuGssvo9hqHhrKEjykIjEdt8HWqOYaBErGEZQr76xbwQqTBwCq0LkXGh5uEhZmBy8P5cdOXMzSEp0CtYtqFgukzd5WqYKJoPArxlQNMSO8gpkty5XsAc/s1600/pscs5ico.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="395" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSavSPP6lWJvXQOn3I9Kqdl7VzuGssvo9hqHhrKEjykIjEdt8HWqOYaBErGEZQr76xbwQqTBwCq0LkXGh5uEhZmBy8P5cdOXMzSEp0CtYtqFgukzd5WqYKJoPArxlQNMSO8gpkty5XsAc/s400/pscs5ico.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Nome: Adobe Photoshop CS5</div>
<div class="separator" style="clear: both; text-align: center;">
Descrição: Criar graficos, editar imagens, e outros</div>
<div class="separator" style="clear: both; text-align: center;">
idioma: portugues.</div>
<div class="separator" style="clear: both; text-align: center;">
tamanho: 166 megabites(meio pesadinho dependendo do seu PC)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://dc102.4shared.com/downloadhelper/named/trinitybaidub1hao/LxujLxCf/%28Design%20Strong%29Adobe%20Photoshop%20CS5%20Extended%20-%20Portable.exe">DOWNLOAD</a></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-20094000100590323562013-05-03T10:13:00.000-07:002013-05-07T13:59:23.407-07:00Efeito 3D em letras<span style="font-family: inherit;"><img class="print" src="http://i.imgur.com/AfGegnS.png" /></span><br />
<span style="font-family: inherit;">Olá Pessoal vim trazer um tutorial muito legal que deixa as letras em um jeito meio "3D" , confiram :</span><br />
<div class="demo2">
<a href="http://saikyoudtestes.blogspot.com.br/2013/05/letra-3d-demo.html" target="_blank"><span style="color: white; font-family: inherit;">Demonstração</span></a></div>
<span style="font-family: inherit;"><br /></span>
<br />
<div class="linha2">
<span style="font-family: inherit;">Procure Por:</span></div>
<span style="font-family: inherit;"><br /></span>
<br />
<div class="code2">
<span style="font-family: inherit;">]]</span></div>
<span style="font-family: inherit;"><br /></span>
<br />
<div class="linha">
<span style="font-family: inherit;">Logo acima dele cole o código abaixo:</span></div>
<span style="font-family: inherit;"><br /></span>
<br />
<pre><div class="code1">
mhfont {<br />
font-family: Century Gothic;<br />
text-shadow: -2px 0px #47e6dd, 2px 0px #ee4848;<br />
font-size: 30px;<br />
text-transform: uppercase;<br />
-webkit-transition-duration: .30s ; }<br />
mhfont:hover{<br />
text-shadow: 0px 0px, 0px 0px;<br />
-webkit-transition-duration: .30s ;<br />
}</div>
<div class="linha">
Aplicando o Efeito</div>
Para usa-lo é bem simples, copie o código abaixo e coloque aonde você quer que o código seja usado.
<pre><div class="code1">
<center><mhfont> SEU TEXTO</mhfont><center></div>
Criado Por Bia
<div id="skin">
<div id="skincurti">
<div class="fb-like" data-href="https://www.facebook.com/IndexDesigner" data-layout="button_count" data-send="true" data-show-faces="false" data-width="450">
</div>
</div>
</div>
</pre>
</pre>
Luccashttp://www.blogger.com/profile/07049193274680772603noreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-59565854304227084012013-05-03T09:55:00.001-07:002013-05-03T09:55:38.965-07:00iShowcase Layout <div dir="ltr" style="text-align: left;" trbidi="on">
Fala Galera eu trago a vocês um layout free aqui blz confiram:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxmEeK555t6YPHzpjWesSvQxMLL3IHGlqI9b9eOjmmbJLMn2ocSRPd4l6MMKfl2qq17UByRJ8l_1PzniE4E-d5XSN5w9BMcHBhznE6lhHULsdXygCdsC6A9dX_e-u_h4RpJtR-n8dDoaGT/s1600/screenshot.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxmEeK555t6YPHzpjWesSvQxMLL3IHGlqI9b9eOjmmbJLMn2ocSRPd4l6MMKfl2qq17UByRJ8l_1PzniE4E-d5XSN5w9BMcHBhznE6lhHULsdXygCdsC6A9dX_e-u_h4RpJtR-n8dDoaGT/s1600/screenshot.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Nome: iShowcase.zip</div>
<div class="separator" style="clear: both; text-align: center;">
Contem: XML e Minima White</div>
<div class="separator" style="clear: both; text-align: center;">
Download: <a href="https://jumpshare.com/v/bwiy5pouF6ZJWo1gsmbM?b=JVVYFBcCiPGZ2zq0P7Uv" target="_blank">Clique Aqui!</a></div>
<div style="text-align: center;">
<br /></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3083214402155693993.post-33883992783607555692013-05-03T09:54:00.002-07:002013-05-07T14:01:36.835-07:00Menu Let´s<img class="print" src="http://i.imgur.com/kKL1Q5H.png" />
<br />
<div class="demo2">
<a href="http://luccasandrade.blogspot.com.br/" target="_blank"><span style="color: white;">Demonstração</span></a></div>
<br />
Ola Pessoal Vou Mostrar como fazer um menu muito legal que eu uso no meu portfolio o nome dele é Menu Let´s , vamos lá :<br />
Vá em Modelo> Editar HTML > Prosseguir > Ctrl+F e procure por:<br />
<div class="code2">
]]</div>
<br />
Logo apos cole o seguinte código acima dela:<br />
<div class="code1">
<span style="background-color: #f1f1f1; color: #333333; font-family: play, Verdana, Arial, sans-serif; font-size: 12px;">#menu-css li a { /* Animation (Webkit, Gecko & Mozilla) */ -webkit-transition-duration: 0.20s; -webkit-transition-timing-function: ease-out; -moz-transition-duration: 0.20s; -moz-transition-timing-function: ease-out; } #menu-css li { display: inline; list-style: none; } #menu-css li a { /* Border Radius */ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /* Border Shadow */ -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6); -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6); box-shadow: 1px 2px 2px rgba(0,0,0,0.6); /* Animation (Webkit, Gecko & Mozilla) */ -webkit-transition-duration: 0.20s; -webkit-transition-timing-function: ease-out; -moz-transition-duration: 0.20s; -moz-transition-timing-function: ease-out; color: #fff; background-color: #514d4d; display: inline-block; padding: 5px 15px; outline: none; text-decoration: none; } #menu-css li a:hover { background-color: #625e5e; padding: 5px 25px; } #menu-css li a:active { background: rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: 1px 1px 1px rgba(0,0,0,0.4); }</span></div>
<br />
Faça as alterações desejadas e cole o sequinte código onde quer que seu menu apareça:<br />
<div class="code1">
<span style="background-color: #f1f1f1; color: #333333; font-family: play, Verdana, Arial, sans-serif; font-size: 12px;"><ul id="menu-css"></span><br />
<span style="background-color: #f1f1f1; color: #333333; font-family: play, Verdana, Arial, sans-serif; font-size: 12px;"><li><a href="#">home</a></li></span><br />
<span style="background-color: #f1f1f1; color: #333333; font-family: play, Verdana, Arial, sans-serif; font-size: 12px;"><li><a href="#">artigos</a></li></span><br />
<span style="background-color: #f1f1f1; color: #333333; font-family: play, Verdana, Arial, sans-serif; font-size: 12px;"><li><a href="#">contato</a></li></span><br />
<span style="background-color: #f1f1f1; color: #333333; font-family: play, Verdana, Arial, sans-serif; font-size: 12px;"><li><a href="#">equipe</a></li></span><br />
<span style="background-color: #f1f1f1; color: #333333; font-family: play, Verdana, Arial, sans-serif; font-size: 12px;"></ul></span></div>
<br />
Font: Alecsander Dias
Luccashttp://www.blogger.com/profile/07049193274680772603noreply@blogger.com0