Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens
teste do eddy
2* Após encontrar esta tag ]]></b:skin>, Cole o seguinte códico ACIMA da tag
CÓDICO
#gb {
position:fixed;
bottom:-340px;
z-index:+1000;
right:160px;
}
* html #gb {
position:relative;
}
.gbtab {
height:48px;
width:677px;
margin-left: 45px;
cursor:pointer;
background:url('http://img33.imageshack.us/img33/9789/xatabrir.png') no-repeat;
margin-top:0px; }
.gbcontent { float:left; border:7px solid #000; background:#fff; -webkit-border-radius: 20px; border-radius: 20px; -khtml-border-radius: 20px; padding:8px; }
position:fixed;
bottom:-340px;
z-index:+1000;
right:160px;
}
* html #gb {
position:relative;
}
.gbtab {
height:48px;
width:677px;
margin-left: 45px;
cursor:pointer;
background:url('http://img33.imageshack.us/img33/9789/xatabrir.png') no-repeat;
margin-top:0px; }
.gbcontent { float:left; border:7px solid #000; background:#fff; -webkit-border-radius: 20px; border-radius: 20px; -khtml-border-radius: 20px; padding:8px; }
3* Agora procure pela seguinte tag </body>
4* Após encontrar esta tag </body>, Cole o seguinte códico ACIMA da tag
CÓDICO
<script type='text/javascript'>
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 425-w) : moveGB(425-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id='gb'> <div class='gbtab' onclick='showHideGB()'> </div> <div class='gbcontent'> <div style='line-height:0;background-position:center;width:735px;height:310px;'> <embed align='middle' allowscriptaccess='sameDomain' flashvars='ID DO SEU XAT ' height='310' name='chat' pluginspage='http://xat.com/update_flash.shtml' quality='high' src='http://www.xatech.com/web_gear/chat/chat.swf' type='application/x-shockwave-flash' width='735' wmode='transparent'/> </div> </div> </div>
5* Substitua a parte em VERMELHO pelo ID do seu Xat
6* Salve.
Vamos mostrar como colocar uma janela de divulgação (estilo pop up) fixa
sobre o seu blog e dentro dela você poderá colocar coisas como
adicionar ao Twitter, assinar Feed e outras coisas que deseje ter a certeza que seus visitantes vejam.
Esse código é bem fácil de usar basta adicionar um gadget de html (pagina layout, adicionar gadget, html/javascript) e colar o código abaixo:
Agora vamos passar as configurações dentro da janela de divulgação, note que a linha <div style="float:right; width:100px">conteudo</div> repete-se 3 vezes, ou seja, podemos ter 3 colunas dentro desta janela, ou seja, banners, textos um do lado do outro. Se quiser deixar apenas uma apague essas linhas, caso queria mais divisões é só copiar e repetir o código mais quantas vezes quiser.
Se forem criar mais divisões veja esse código <div style="width:300px; antes da primeira das linhas note que 300 é a soma das 3 colunas, cada uma delas em 100 pixels, então se for modificar a quantidade ou largura delas lembre-se de corrigir o valor total neste trecho.
Pedimos que não retirasse o trecho final do código onde está nosso link assim outros blogueiros que gostem deste acessório possam saber como fazer um no blog também.
Nos modelos novos do Blogger é recomendado colocar esse código num gadget sobre a postagem:
Isso porquê devido aos novos códigos se for colocado em outra parte pode haver erros e a janela de divulgação aparecer por baixo dos posts do blog. Fizemos esse teste usando o Firefox e Internet Explorer, usando o modelo Josh Peterson.
Esse código é bem fácil de usar basta adicionar um gadget de html (pagina layout, adicionar gadget, html/javascript) e colar o código abaixo:
<style type="text/css">
<!--
#popjan {border: 2px solid #000000;
background-color: #ffffff;
width: 290px;
top: 120px;left: 120px;
text-align: center;
z-index: 450;position:fixed;visibility: visible;}
-->
</style>
<div id="popjan">
<a style="float:right" href="#" onClick="document.getElementById('popjan').style.display='none';">[Fechar]</a>
<div style="clear:both"></div>
<div style="width:300px; text-align:center; margin:auto">
<div style="float:right; width:100px">
<p><a href="http://twitter.com/#!/Downs_Fox" target="_new"><img src="http://www.lokosom.com.br/player/img/twitter.png" height="31" width="32"></a></p>
<p>Twitter</p>
</div>
<div style="float:right; width:100px">
<p><a href="http://www.facebook.com/profile.php?id=100000332426122"><img src="http://www.lokosom.com.br/player/img/facebook.png" height="32" width="32"></a></p>
<p>Facebook</p>
</div>
<div style="float:right; width:100px">
<p><a href="http://www.orkut.com.br/Community?cmm=117106475" target="_new"><img src="http://www.lokosom.com.br/player/img/orkut.png" height="32" width="32"></a></p>
<p>Orkut</p>
</div>
</div>
<div style="clear:both">
<div class="widget-content">
<p><a href="http://feeds.feedburner.com/downsFoxGmesSeuGameDeQualidade"><img src="http://codigosblog.net/servidor/gadget_social/rss.png" width="32" height="32"></a><br />
<a style="font-size:80%" href="http://www.dicasparablogs.com.br/2010/04/criar-uma-janela-de-divulgacao-no-blog.html" target="_blank">Downs Fox Games</a></p>
</div></div></div>
No lugar das linhas onde está escrito conteúdo você poderá colocar qualquer html que desejar (link do seu feed, Twitter ou qualquer outra coisa), veja como alterar e configurar corretamente esse novo acessório para o seu blog para deixá-lo totalmente personalizado para o seu site:
border: 2px solid #000000; isso é a borda, veja aqui como alterar as cores, estilo e tamanho das bordas.
background-color: #ffffff; cor de fundo da janela, se quiser alterar aqui tem o código html das cores
width: 320px; isso é a largura da janela, altere como desejar.
top: 200px;left: 100px; isso é a distancia em relação ao topo (200) e lado esquerdo (100) da pagina, também pode modificar como desejar.
<!--
#popjan {border: 2px solid #000000;
background-color: #ffffff;
width: 290px;
top: 120px;left: 120px;
text-align: center;
z-index: 450;position:fixed;visibility: visible;}
-->
</style>
<div id="popjan">
<a style="float:right" href="#" onClick="document.getElementById('popjan').style.display='none';">[Fechar]</a>
<div style="clear:both"></div>
<div style="width:300px; text-align:center; margin:auto">
<div style="float:right; width:100px">
<p><a href="http://twitter.com/#!/Downs_Fox" target="_new"><img src="http://www.lokosom.com.br/player/img/twitter.png" height="31" width="32"></a></p>
<p>Twitter</p>
</div>
<div style="float:right; width:100px">
<p><a href="http://www.facebook.com/profile.php?id=100000332426122"><img src="http://www.lokosom.com.br/player/img/facebook.png" height="32" width="32"></a></p>
<p>Facebook</p>
</div>
<div style="float:right; width:100px">
<p><a href="http://www.orkut.com.br/Community?cmm=117106475" target="_new"><img src="http://www.lokosom.com.br/player/img/orkut.png" height="32" width="32"></a></p>
<p>Orkut</p>
</div>
</div>
<div style="clear:both">
<div class="widget-content">
<p><a href="http://feeds.feedburner.com/downsFoxGmesSeuGameDeQualidade"><img src="http://codigosblog.net/servidor/gadget_social/rss.png" width="32" height="32"></a><br />
<a style="font-size:80%" href="http://www.dicasparablogs.com.br/2010/04/criar-uma-janela-de-divulgacao-no-blog.html" target="_blank">Downs Fox Games</a></p>
</div></div></div>
No lugar das linhas onde está escrito conteúdo você poderá colocar qualquer html que desejar (link do seu feed, Twitter ou qualquer outra coisa), veja como alterar e configurar corretamente esse novo acessório para o seu blog para deixá-lo totalmente personalizado para o seu site:
border: 2px solid #000000; isso é a borda, veja aqui como alterar as cores, estilo e tamanho das bordas.
background-color: #ffffff; cor de fundo da janela, se quiser alterar aqui tem o código html das cores
width: 320px; isso é a largura da janela, altere como desejar.
top: 200px;left: 100px; isso é a distancia em relação ao topo (200) e lado esquerdo (100) da pagina, também pode modificar como desejar.
Agora vamos passar as configurações dentro da janela de divulgação, note que a linha <div style="float:right; width:100px">conteudo</div> repete-se 3 vezes, ou seja, podemos ter 3 colunas dentro desta janela, ou seja, banners, textos um do lado do outro. Se quiser deixar apenas uma apague essas linhas, caso queria mais divisões é só copiar e repetir o código mais quantas vezes quiser.
Se forem criar mais divisões veja esse código <div style="width:300px; antes da primeira das linhas note que 300 é a soma das 3 colunas, cada uma delas em 100 pixels, então se for modificar a quantidade ou largura delas lembre-se de corrigir o valor total neste trecho.
Pedimos que não retirasse o trecho final do código onde está nosso link assim outros blogueiros que gostem deste acessório possam saber como fazer um no blog também.
Nos modelos novos do Blogger é recomendado colocar esse código num gadget sobre a postagem:
Isso porquê devido aos novos códigos se for colocado em outra parte pode haver erros e a janela de divulgação aparecer por baixo dos posts do blog. Fizemos esse teste usando o Firefox e Internet Explorer, usando o modelo Josh Peterson.
Faça Login no blogger > Vá em Design > Editar HTML
Procure por: <table align='center' border='0' cellpadding='0' cellspacing='0' width='1000'>
Em Baixo dele Coloce isso:
<table align='center' border='0' cellpadding='0' cellspacing='0' width='1000'>
<tr>
<th background='IMAGEM DO FUNDO' height='470' scope='col'>
<table align='center' border='0' cellpadding='0' cellspacing='0' width='90%'>
CÓDIGO DO XAT </table>
</th>
</th>
</tr>
</table>
Para mostrar seu status do MSN no seu blog entre no link:
Isso
vai levar você para uma página onde encontrará algumas opções de como
mostrar seu status do MSN no seu blog, inclusive se todos ou não poderão
ver quando você estiver on-line.
Você pode
escolher se quer mostrar somente o ícone de status, um botão que aparece
seu nome quando você está conectado(isso porque mesmo quando estiver
com o status de ocupado e outros, seu nome ainda aparecerá) e ainda
outra coisa que interessante para colocar no blog é uma janela para
mensagens instantâneas para que seus visitantes possam escrever para
você através do seu blog quando você estiver on-line e você recebe a
mensagem numa janela de conversa normal como se fosse um dos seus
contatos do MSN.
Eai galera blz hoje vo encinar a como por menu suspenso no blog.Emtão vamos la.
Va Em Design,Adicionar Um Gadget,HTML/JavaScript,E Cole O Codigo ala,as escritas de azul e so alterar blz vlw.
<form>
<select NAME="links"
onChange="top.location.href=this.form.links.options
[this.form.links.selectedIndex].value">
<option SELECTED>Selecione </option>
<option VALUE="ENDEREÇO DO LINK">NOME DO LINK
</option>
<option VALUE="ENDEREÇO DO LINK">NOME DO LINK
</option>
<option VALUE="ENDEREÇO DO LINK">NOME DO LINK
</option>
</select>
</form>
Va Em Design,Adicionar Um Gadget,HTML/JavaScript,E Cole O Codigo ala,as escritas de azul e so alterar blz vlw.
<form>
<select NAME="links"
onChange="top.location.href=this.form.links.options
[this.form.links.selectedIndex].value">
<option SELECTED>Selecione </option>
<option VALUE="ENDEREÇO DO LINK">NOME DO LINK
</option>
<option VALUE="ENDEREÇO DO LINK">NOME DO LINK
</option>
<option VALUE="ENDEREÇO DO LINK">NOME DO LINK
</option>
</select>
</form>
Alterações no código
<option VALUE="ENDEREÇO DO LINK">NOME DO LINK
</option>
</option>
Coloque o Codigo Abaixo , Antes de ]]></b:skin>
}
#avisos {
background:url(http://i.imgur.com/VfvRG.png) no-repeat;
margin: auto;
float:right;
margin-top:20px;
width:500px;
height:156px;
}
#avisos h2{
width:0px !important;;
height:0px !important;;
overflow:hidden !important;;
}
#avisos marquee{
width:285px;
heigth:685px;
color:#FFF;
margin:105px 0 0 110px;
}
Coloque o Codigo Abaixo , Antes de <div class='leftsidebar-wrapper'>
<div id='avisos'>
<marquee behavior='SCROLL' direction='Left'>
<span style='font-weight:bold;'>Aviso</span> BLOG IN DESIGN<span style='font-weight:bold'>MELHORES TEMPALTES?</span>Melhor Designer? So Aqui</marquee>
</div>
OBS.: A POSTAGEM FICOU DESSE JEITO POR CAUSA DO CÓDIGO HTML
EAE GALERA VOU ESTAR ENSINANDO A COLOCAR NEON
NO BLOG, DESSE ESTILO AI IGUAL AO SPEED...
ENTÃO VCS TERAM QUE BAIXAR UM CODIGO ESSE AKI OU COPIEM --> CLICK AQUI!
AI EM BAIXO
AI EM BAIXO
VCS VÃO COPIAR ESSE CODIGO ABAIXO E VÃO COLAR
ANTES DA TAG: ]]></b:skin>
CODIGO:
a:hover{ color: #000000;text-shadow:0 0 .3em #000000;
}
}
AONDE ESTA EM VERMELHO É AS CORES EM HTML, VCS TEM QUE
DEIXAR UMA IGUAL A OUTRA.
DEIXAR UMA IGUAL A OUTRA.
SE QUIZEREM MUDAR A COR DO NEON AI O SITE PARA CORES em html: