Curso Sobre Blogspot

Home » Archives for outubro 2015

Botão Abrir e Fechar Xat (Chat) Flutuante Para Blog

<div style="text-align: center;">
<span style="color: purple; font-size: large;">Botão Abrir e Fechar Xat (Chat) Flutuante Para Blog</span></div>
<div style="text-align: center;">
<span style="color: purple; font-size: large;"><br /></span></div>
<div style="text-align: center;">
Esse botão é um recurso bem útil para queles blogueiros que utilizam Bate-papo Xat no blog, pois o botão deixará o Xat acessível e visível para o visitante acessá-lo, e a vantagem também é, que, o xat não ficará ocupando um grande espaço no seu blog...</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTjicorB7Juk3uVZLhHc3fCIz1BP_I3UF-VEZm_dTPJgp7T45PLGCJOEEwKuZSY5NJgRtdGcKRNBBX5E6HtRajgGSFpJiYOkfcmk3bKTFESfC-YjEE32LAV0c3s0K3r_QUGNaH-ar6xHg/s1600/demostra%25C3%25A7%25C3%25A3o.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTjicorB7Juk3uVZLhHc3fCIz1BP_I3UF-VEZm_dTPJgp7T45PLGCJOEEwKuZSY5NJgRtdGcKRNBBX5E6HtRajgGSFpJiYOkfcmk3bKTFESfC-YjEE32LAV0c3s0K3r_QUGNaH-ar6xHg/s640/demostra%25C3%25A7%25C3%25A3o.jpg" width="640" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<h2 style="background-attachment: scroll; background-color: #1c1c1c; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-top-left-radius: 5px; border-top-right-radius: 5px; border: none; color: white; font-family: Arial, Trebuchet, Arial, Verdana, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.4em; margin: 5px 0px 10px; outline: none; padding: 5px 10px; position: relative; text-align: center; widows: 1;">
Como Colocar o Botão Abrir e Fechar Xat no Blog</h2>
<div style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
Para colocar no blog é bastante fácil galera, então vamos lá.</div>
<div style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
<br /></div>
<div style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
<b>1º Passo</b>: <b><span style="border: none; color: red; margin: 0px; outline: none; padding: 0px;">Copie</span></b> o código mostrado logo abaixo:</div>
<div style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
<br /></div>
<div style="background-color: #eeeeee; widows: 1;">
<div style="color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center;">
<span style="background-color: #fff2cc; border: none; margin: 0px; outline: none; padding: 0px;"><div id="botao_xat" style="position:fixed;right:5px;bottom:0;text-align:right; z-Index:9999; background-color:transparent;"><img onclick="abrir_xat()" style="cursor:pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioa8KHMXg4t9rg4L4riPD_Dfg2qDAXqRm5p2YBEe4O7YJvhQr400TKAzkJLY0IUgqEzeZ3DAohyphenhyphenCpTANxRVISWwS0OuCa0aoStdXGPWMPr-NFsaNsLBvj32s1Bu5te-rXfWXkXzTL-wOY/s1600/abrir+xat.png" /></div></span></div>
<div style="color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center;">
<span style="background-color: #fff2cc; border: none; margin: 0px; outline: none; padding: 0px;"><script type="text/javascript"></span></div>
<div style="color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center;">
<span style="background-color: #fff2cc; border: none; margin: 0px; outline: none; padding: 0px;">function abrir_xat(){</span></div>
<div style="color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center;">
<span style="background-color: #fff2cc; border: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div>
<div style="color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center;">
<span style="background-color: #fff2cc; border: none; margin: 0px; outline: none; padding: 0px;">document.getElementById("botao_xat").innerHTML = '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSMumjDGxibPcjJ4G095zjZZKmbFeeC4Gw69oQbAxoTY1EqF_3-CWpLjJPXDId3fwXEu1oeUyG3GOTmOkxkFYbFfDFEEpvQc1VEdMSATyKyAGZBxGS-crFwaEByDKJugquOBo7IyTIU0/s1600/xat.png" alt="Fechar Xat" title="Fechar Xat" onclick="fechar_xat()" style="cursor:pointer;" /><br>';</span></div>
<div style="color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center;">
<span style="background-color: #fff2cc; border: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div>
<div style="text-align: center;">
<span style="background-color: #fff2cc; border: none; margin: 0px; outline: none; padding: 0px;"><span style="color: #333333; font-family: Arial, serif; font-size: x-small;"><span style="line-height: 18.48px;">document.getElementById("botao_xat").innerHTML = '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSMumjDGxibPcjJ4G095zjZZKmbFeeC4Gw69oQbAxoTY1EqF_3-CWpLjJPXDId3fwXEu1oeUyG3GOTmOkxkFYbFfDFEEpvQc1VEdMSATyKyAGZBxGS-crFwaEByDKJugquOBo7IyTIU0/s1600/xat.png" alt="Fechar Xat" title="Fechar Xat" onclick="fechar_xat()" style="cursor:pointer;" /><br><embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="550" height="405" name="chat" FlashVars="</span></span><b style="color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px;">id</b><span style="color: #333333; font-family: Arial, serif; font-size: x-small;"><span style="line-height: 18.48px;">=</span></span><span style="color: red; font-family: Arial, serif; font-size: x-small;"><span style="line-height: 18.46875px;"><b>214626729</b></span></span><span style="color: #333333; font-family: Arial, serif; font-size: x-small;"><span style="line-height: 18.48px;">" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.php" />';}</span></span></span></div>
<div style="color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center;">
<span style="background-color: #fff2cc; border: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div>
<div style="color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center;">
<span style="background-color: #fff2cc; border: none; margin: 0px; outline: none; padding: 0px;">function fechar_xat(){<span class="Apple-tab-span" style="border: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>document.getElementById("botao_xat").innerHTML = '<img onclick="abrir_xat()" style="cursor:pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioa8KHMXg4t9rg4L4riPD_Dfg2qDAXqRm5p2YBEe4O7YJvhQr400TKAzkJLY0IUgqEzeZ3DAohyphenhyphenCpTANxRVISWwS0OuCa0aoStdXGPWMPr-NFsaNsLBvj32s1Bu5te-rXfWXkXzTL-wOY/s1600/abrir+xat.png" />';</span></div>
<div style="color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center;">
<span style="background-color: #fff2cc; border: none; margin: 0px; outline: none; padding: 0px;">}</script></span></div>
</div>
<div style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
<br /></div>
<div style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
<b>2º Passo</b>: Em seguida, vá no painel de Edição do seu blog, clique na opção "<b><span style="border: none; color: red; margin: 0px; outline: none; padding: 0px;">layout</span></b>" >> clique em "<b><span style="border: none; color: red; margin: 0px; outline: none; padding: 0px;">Adicionar um Gadget</span></b>" >> adicione a opção "<b><span style="border: none; color: red; margin: 0px; outline: none; padding: 0px;">HTML/JavaScripts</span></b>".</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvl-myy6pFc_BZIhOBigBMuHnSsReBdBDC8RZkgSLHvpYpXRt4Z-5-nUjHRHY0OjChPsvicnq5DjeY27nNARDTna7AmRaRqYfnXeG93QvuHKeaJE2Ct1dNOqA_2eT1nhBeX6HrwC3BXmw/s1600/vvvvv.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvl-myy6pFc_BZIhOBigBMuHnSsReBdBDC8RZkgSLHvpYpXRt4Z-5-nUjHRHY0OjChPsvicnq5DjeY27nNARDTna7AmRaRqYfnXeG93QvuHKeaJE2Ct1dNOqA_2eT1nhBeX6HrwC3BXmw/s320/vvvvv.PNG" width="320" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<span style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; widows: 1;">Depois cole o Código no HTML/JavaScripts</span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<b style="color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; widows: 1;">4º Passo</b><span style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; widows: 1;">: , </span><b style="color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; widows: 1;">Salve</b><span style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; widows: 1;"> o novo Gadget e pronto, seu xat estará funcionando.</span></div>
<div style="text-align: center;">
<span style="background-color: #eeeeee; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; widows: 1;"><span style="color: red;"><br /></span></span></div>
<div style="text-align: center;">
<span style="color: red;"><span style="background-color: #eeeeee; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; widows: 1;">Então pessoal, é só isso, espero terem gostado.</span><span style="background-color: #eeeeee; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; widows: 1;">Queria que vocês deixassem comentário sobre o Gadget, e não esqueçam de segui nosso blog,  obrigado!</span></span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>

Botão Abrir e Fechar Xat (Chat) Flutuante Para Blog

Botão Abrir e Fechar Xat (Chat) Flutuante Para Blog Esse botão é um recurso bem útil para queles blogueiros que utilizam Bate-papo Xat no blog, pois o botão deixará o Xat acessível e visível para o visitante acessá-lo, e a vantagem também é, que, o xat não ficará ocupando um gra…

Mais informações »

14:49

Como colocar Xat flutuante fixo com botão na lateral do Blog

<div style="text-align: center;">
<span style="font-size: large;">Como colocar Xat flutuante fixo com botão na lateral do Blog</span></div>
<div style="text-align: center;">
<span style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: start; widows: 1;">Aqui vai um código é bem legal, ele deixa o seu xat com efeito deslisante e com o botão abrir e fechar XAT na lateral do Blog</span></div>
<div style="text-align: center;">
<span style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: start; widows: 1;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidbJzq18PpzzZ1tTgJrOks2gVTKzZqaXgWpCAukxmv1Fh0wECPc8ehcOQk9vxNPC8xEP9O1__P_LH9-f7U5lLnn47N95kRAdRmP6TYkmz_2e3wNIPF20fRK4ZW0CBGnJW8KUox9whyphenhyphenyWY/s1600/xat.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidbJzq18PpzzZ1tTgJrOks2gVTKzZqaXgWpCAukxmv1Fh0wECPc8ehcOQk9vxNPC8xEP9O1__P_LH9-f7U5lLnn47N95kRAdRmP6TYkmz_2e3wNIPF20fRK4ZW0CBGnJW8KUox9whyphenhyphenyWY/s640/xat.PNG" width="640" /></a></div>
<div style="text-align: center;">
<span style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: start; widows: 1;"><br /></span></div>
<div style="text-align: center;">
<span style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: start; widows: 1;"><br /></span></div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
Aparecerá um botão na lateral do blog, então quando clica no botão XAT automaticamente o seu xate será aberto e ele aparecerá deslizando na lateral esquerda do blog, e o mesmo botão serve também para fixar o XAT. </div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
<br /></div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
Então para colocar o XAT flutuante vamos adicionar o código no HTML do blog.</div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
Se você não sabe onde é que fica o HTML vou mostrar:</div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
Primeiro vá no painel do seu blog, em <b>Modelo</b> >> depois <b>Editar HTML</b></div>
<div style="text-align: center;">
<span style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: start; widows: 1;"><br /></span></div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
Depois vai abrir uma nova janela, lá você vai clicar em<b> Prosseguir</b>, e logo abrirá a HTLM do seu blog.</div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
Então você vai apertar <b>Ctrl </b>+ <b>F</b> do seu teclado para pesquisar este Tag: <b><span style="border: none; color: blue; margin: 0px; outline: none; padding: 0px;">]]></b:skin></span></b></div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
E a cima de <b><span style="border: none; color: blue; margin: 0px; outline: none; padding: 0px;">]]></b:skin> </span></b>você vai colocar esse código:</div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
<br /></div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; widows: 1;">
</div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
<span style="background-color: #cfe2f3; border: none; margin: 0px; outline: none; padding: 0px;">#gb  { position:fixed; top:150px; z-index:+1000; left:-610px; } * html #gb {  position:relative; } .gbtab { height:161px; width:47px; float:right;  cursor:pointer; background:url('http://i.imgur.com/WoBz0.png')  no-repeat; margin-top:20px; } .gbcontent { float:left; border:2px solid  #8c00c1; background:#fff; opacity:0.80; -moz-opacity: 0.80; filter:  alpha(opacity=80); -webkit-border-radius: 20px; border-radius: 20px;  -khtml-border-radius: 20px; padding:8px; }<br /> <br /></span></div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
<span style="background-color: #cfe2f3; border: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div>
<div style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
E agora procure por  <b><span style="border: none; color: blue; margin: 0px; outline: none; padding: 0px;"></body> </span></b>e acima dele cole este segundo código:</div>
<div style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
<br /></div>
<div style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
<span style="background-color: #cfe2f3; border: none; margin: 0px; outline: none; padding: 0px;"><script  type='text/javascript'> function showHideGB(){ var gb =  document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ?  moveGB(0, 47-w) : moveGB(20-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.left = 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:590px;height:310px;'><embed  align='middle' allowscriptaccess='sameDomain' flashvars='</span><span style="background-color: #d5a6bd; border: none; margin: 0px; outline: none; padding: 0px;">id=</span><span lang="EN-US" style="background-color: #a64d79; border: none; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 16.8667px; margin: 0px; outline: none; padding: 0px;"><b>171627818</b></span><span style="background-color: #cfe2f3; border: none; margin: 0px; outline: none; padding: 0px;">'  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='590'  wmode='transparent'/> </div></div></div></span></div>
<div style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; text-align: center; widows: 1;">
<span style="background-color: #cfe2f3; border: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; text-align: center; widows: 1;">
<br style="background-color: #eeeeee; color: #333333; font-family: Arial, serif; line-height: 18.48px; text-align: start;" /></div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; widows: 1;">
<span style="border: none; margin: 0px; outline: none; padding: 0px; text-align: center;">Neste segundo código Altere o ID </span><span style="background-color: #d5a6bd; border: none; margin: 0px; outline: none; padding: 0px;">id=</span><span lang="EN-US" style="background-color: #a64d79; border: none; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 16.8667px; margin: 0px; outline: none; padding: 0px;"><b>171627818</b></span><span style="border: none; margin: 0px; outline: none; padding: 0px; text-align: center;">  pelo o do seu XAT.</span></div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; widows: 1;">
<span style="border: none; margin: 0px; outline: none; padding: 0px; text-align: center;">OBSERVE:o id fica no código do seu XAT.</span></div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; widows: 1;">
<span style="border: none; margin: 0px; outline: none; padding: 0px; text-align: center;"><br /></span></div>
<div class="separator" style="background-color: #eeeeee; clear: both; color: #333333; font-family: Arial, serif; font-size: 13px; line-height: 18.48px; widows: 1;">
<span style="border: none; margin: 0px; outline: none; padding: 0px; text-align: center;">E por final clique em Visualizar e veja se tudo ocorreu certo e depois Salve o modelo.</span></div>
<div>
<span style="border: none; margin: 0px; outline: none; padding: 0px; text-align: center;"><br /></span></div>
<div style="text-align: center;">
<br /></div>

Como colocar Xat flutuante fixo com botão na lateral do Blog

Como colocar Xat flutuante fixo com botão na lateral do Blog Aqui vai um código é bem legal, ele deixa o seu xat com efeito deslisante e com o botão abrir e fechar XAT na lateral do Blog Aparecerá um botão na lateral do blog, então quando clica no botão XAT automaticamente o seu…

Mais informações »

10:12

Conteúdo diferente nas paginas do blog

<h1 class="post-title entry-title" style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px; position: relative;">
<a href="http://www.dicasparablogs.com.br/2010/02/conteudo-diferente-nas-paginas-do-blog.html" style="-webkit-transition: all 0.5s linear; color: blue; font-size: 16pt; text-decoration: none; transition: all 0.5s linear;" title="Conteúdo diferente nas paginas do blog">Conteúdo diferente nas paginas do blog</a></h1>
<div class="post-header" style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 21px; margin: 0px 0px 1.5em;">
<div class="post-header-line-1">
</div>
</div>
<div class="post-body entry-content" id="post-body-7727374227543433394" itemprop="description articleBody" style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 17px; line-height: 1.4; position: relative; width: 638px;">
Às vezes queremos mostrar algumas coisas, mas somente nas paginas individuais das postagens para não sobrecarregar demais a pagina inicial do blog ou por qualquer outro motivo. É mais fácil do que parece pode ter um conteúdo que só aparecerá nas paginas das postagens usando a função <b:if cond.<br /><a href="" name="more" style="-webkit-transition: all 0.5s linear; color: blue; transition: all 0.5s linear;"></a><br /><br />Existem duas maneiras de fazer isso, uma é quando a códigos que são colocados diretamente pela pagina editar html, se você colocar <span style="font-weight: bold;"><b:if cond='data:blog.pageType == &quot;item&quot;'> o código que desejar</b:if></span> o código que desejar </b:if> esse conteúdo somente aparecerá nas paginas individuais do seu blog e não na pagina principal, no momento (11/02/2010) utilizo isso com o <a href="http://www.dicasparablogs.com.br/2009/10/colocar-botao-retweet-no-blog.html" style="-webkit-transition: all 0.5s linear; color: blue; text-decoration: none; transition: all 0.5s linear;">código do botão retweet(enviar para o Twitter)</a>, note que ele não aparece na pagina inicial de nosso site, mas está no inicio de qualquer postagem.<br /><br />Para <span style="font-weight: bold;">mostrar algo somente nas paginas individuais das postagens</span> entre na pagina editar html, clique para expandir o modelo, procure por <data:post.body/> e logo depois coloque:<br /><br /><b:if cond='data:blog.pageType == &quot;item&quot;'> o código que desejar </b:if><br /><br />Clique para salvar e visualize o blog a frase o código que desejar aparecerá somente nas paginas individuais do seu blog. Da mesma maneira que funcionou com essa frase poderia ser feito com qualquer código que tem na pagina editar html, se colocar isso antes do <data:post.body/> ele aparecerá entre o titulo e a postagem e não no final dela.<br /><br />Também podemos fazer o mesmo com qualquer gadget do blog, o procedimento é parecido, entre na pagina editar html, clique para expandir o modelo e procure pelo gadget que deseja, o jeito mais fácil de achar é pesquisar pelo titulo dele, caso não tenha titulo sugerimos colocar um mesmo que seja somente para facilitar a localização, depois você poderá retirar o titulo assim que terminar de colocar este código. Vamos mostrar ocultando um gadget de html/javascript afinal esse é o mais utilizado, o código normal dele é assim:<br /><br /><b:widget id='HTML5' locked='false' title='Assine nosso Feed' type='HTML'><br /><b:includable id='main'><br /><br /><b:if cond='data:title != &quot;&quot;'><br /><h2 class='title'><data:title/></h2><br /></b:if><br /><div class='widget-content'><br /><data:content/><br /></div><br /><b:include name='quickedit'/><br /></b:includable><br /></b:widget><br /><br />Veja o texto na primeira linha: assine nosso feed, isso é o titulo do gadget por isso dissemos que colocar um titulo é o jeito mais fácil de localizar, claro utilizando o ctrl F. Agora vamos colocar o código para ocultar esse gadget na pagina inicial do blog, então ficará deste jeito:<br /><br /><b:widget id='HTML5' locked='false' title='Assine nosso Feed' type='HTML'><br /><b:includable id='main'><br /><br /><span style="font-weight: bold;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span><br /><b:if cond='data:title != &quot;&quot;'><br /><h2 class='title'><data:title/></h2><br /></b:if><br /><div class='widget-content'><br /><data:content/><br /></div><br /><b:include name='quickedit'/><br /><span style="font-weight: bold;"></b:if></span><br /></b:includable><br /></b:widget><br /><br />A regra principal aqui e não misturar as coisas, ou seja, cada parte do código tem um inicio e fim veja que ao inserirmos a primeira parte do código (<b:if cond='data:blog.pageType == &quot;item&quot;'>) deixamos antes dele <b:widget e <b:includable, portanto quando fecharmos o código(</b:if>) precisamos deixar depois dele </b:includable>, </b:widget>.<br /><br />Caso queria fazer o contrário, ou seja <b>mostrar algo somente na pagina inicial</b> o sistema é o mesmo, apenas use o código:<br /><b:if cond='data:blog.pageType == &quot;index&quot;'><br /><br />no lugar que usou antes:<br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><br />Precisamos lembrar que nem todos os gadgets são iguais e alguns deles podem ser mais difíceis fazer isso, mas certamente com atenção e calma será possível, esperamos que gostem e aproveitem essa dica para dar um toque diferente nas paginas do blog.<div style="clear: both;">
</div>
</div>
<a href="http://www.linkwithin.com/" style="-webkit-transition: all 0.5s linear; background-color: white; color: blue; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-decoration: none; transition: all 0.5s linear;"><img alt="Related Posts with Thumbnails" src="http://www.linkwithin.com/pixel.png" style="border: 0px; position: relative;" /></a>

Conteúdo diferente nas paginas do blog

Conteúdo diferente nas paginas do blog Às vezes queremos mostrar algumas coisas, mas somente nas paginas individuais das postagens para não sobrecarregar demais a pagina inicial do blog ou por qualquer outro motivo. É mais fácil do que parece pode ter um conteúdo que só aparecer…

Mais informações »

10:01