31 de mai. de 2008
29 de mai. de 2008
Ressaltar texto
Para ressaltar textos em seus posts de 2 maneiras bem fáceis, sem precisar inserir códigod no HTML do seu blog. Basta copiar os códigos e colar no modo "Editar HTML", lá onde você escreve.
<p style="border: 2px solid rgb(238, 130, 98 );">
ESCREVA AQUI O QUE QUISER
</p>
ESCREVA AQUI O QUE QUISER
<span style="background-">238, 130, 98 );">ESCREVA AQUI O QUE QUISER</span>
Números em vermelho representam as cores em RGB. Mais cores AQUI. Não se esqueça de colocar a vírgula entre os números RGB
Para esse efeito aqui.
<p style="border: 2px solid rgb(238, 130, 98 );">
ESCREVA AQUI O QUE QUISER
</p>
ESCREVA AQUI O QUE QUISER
<span style="background-">238, 130, 98 );">ESCREVA AQUI O QUE QUISER</span>
Números em vermelho representam as cores em RGB. Mais cores AQUI. Não se esqueça de colocar a vírgula entre os números RGB
Navbar que aparece em um clique
Esta dica é para que sua navbar apareça somente se clicar em cima. Mas como nem tudo é perfeito, não funciona no IE e nem no Opera, só no Firefox.
O que você tem que fazer é copiar o código, ir até o HTML do seu blog e colar antes de:
body {
Clique AQUI e veja como funciona (claro que você só verá o efeito se navega pelo Firefox)
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
Créditos: Blog U
O que você tem que fazer é copiar o código, ir até o HTML do seu blog e colar antes de:
body {
Clique AQUI e veja como funciona (claro que você só verá o efeito se navega pelo Firefox)
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
Créditos: Blog U
Template Chica Loca Azul e Rosa
24 de mai. de 2008
Últimos comentários em seu blog
Para ter em seu blog um widget com os últimos comentários com o nome do comentarista, um pequeno resumo e a opção de ler mais, como o que tenho aqui, no footer do meu blog é ultra, mega fácil. Basta copiar o código e colar no HTML/Javascript em seu Blogger.
<script style="text/javascript" src="http://andrewhonors.googlepages.com/showrecentcomments2_sp.js"></script><script style="text/javascript">var numcomments = 6;var showcommentdate = true;var showposttitle = true;var numchars = 30;var standardstyling = true;</script><script src="AQUI O ENDEREÇO DE SEU BLOG/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
Créditos: Hackosphere
<script style="text/javascript" src="http://andrewhonors.googlepages.com/showrecentcomments2_sp.js"></script><script style="text/javascript">var numcomments = 6;var showcommentdate = true;var showposttitle = true;var numchars = 30;var standardstyling = true;</script><script src="AQUI O ENDEREÇO DE SEU BLOG/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
Créditos: Hackosphere
23 de mai. de 2008
Como criar páginas no Google pages
INFELIZMENTE O GOOGLE RETIROU ESTE SERVIÇO DO AR
:=(
Já me pediram para ensinar esta dica, então aí vai.
Para criar páginas como essa, ou essa, ou essa no Google pages a primeira coisa a fazer é abrir um email no Gmail e depois uma conta no Google pages. Já sei, você deve estar se perguntando como não pensou nisso antes, né ?
Pois é, então vamos lá. Clique AQUI e abra sua conta no Gmail, depois volte e se cadastre no Google Pages clicando AQUI , depois volte aqui para continuar o aprendizado.
Depois que você se cadastrou no Google pages, essa é a segunda página que abrirá. Clique para aceitar as condições do site.
Nessa terceira página, preencha como quiser.
Veja, é aí que você fará o upload. Agora pegue o código abaixo, cole em seu bloco de notas, faça as modificações e salve.
Agora que já está tudo certinho, copie o código abaixo e cole em seu bloco de notas, é aí que você fará as modificações para publicar no Google pages.
vermelho--- título de sua página
roxo-------endereço de sua imagem de fundo
verde-----cor das bordas
rosa------coloque algo fora da moldura
amarelo---é entre esses dois códigos que você postará tudo o que quiser em suas páginas do Google Pages, quando quiser dar espaço entre o que você quer postar, coloque o código:
<br>
<html>
<head>
<meta http-equiv="Content-Language" content="pt-br">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AQUI O TíTULO DE SUA PÁGINA</title>
</head>
<STYLE type="text/css">
P, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size: 10px;
color: #000000;
font-family: Verdana, Arial;
line-height: 12px;
}
A, A:link{color:#000000;text-decoration:none}
A:visited{color:#000000}
A:active{color:#000000}
a:hover {text-decoration: underline; color: #000000; font-weight: bold;}
body {scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #CCCCCC;
scrollbar-base-color: #CCCCCC;
scrollbar-darkshadow-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
SCROLLBAR-TRACK-COLOR: #ffffff; }
</STYLE>
<body bg background="ENDEREÇO DE SUA IMAGEM DE FUNDO AQUI">
<div align="center">
<center>
<table border="2" cellspacing="3" width="76%" id="AutoNumber1" height="342" border#00b050">#CCCCCC">
<tr>
<td width="100%" height="342" bordercolor="#CCCCCC" valign="top" bgcolor="#FFFFFF">
<!--"COLOQUE ABAIXO O QUE QUISER" -->
<!--"COLOQUE ACIMA O QUE QUISER E NADA ABAIXO" -->
</td>
</tr>
</table>
</center>
<br>
<br>
<br>
AQUI COLOQUE ALGO QUE VOCÊ QUEIRA QUE FIQUE FORA DO BORDER OU DELETE ESSA INSCRI^ÇÃO TODA EM ROSA
</div>
<p align="center">
</p>
</body>
</html>
Após inserir em seu código o que lhe interessa, salve como no modelo abaixo, preste atenção onde você está salvando em seu pc pois daqui a pouco você irá precisar.
*Observe que após colocar o nome em sua página coloque: .html
Exemplo: paginadeamostra.html
Agora vá até o Google pages e faça o upload de sua página como mostra o modelo.
Proceda da mesma forma sempre que quiser publicar páginas. Claro que você sabe que o título terá sempre que mudar e terá que sempre ter o ".html" ao final, ou não dará certo.
22 de mai. de 2008
Nuvem de tags
Bom pessoal, esta tuto ensina a fazer nuvem de tags, é assim, os marcadores de seu blog ficam com uma aparência de palavras em cores e tamanhos diferentes, peguei essa dica do forum Verdinhas.com.
Nem ia coloca-la aqui, visto que já até linkei a página no blog, mas a pedido da Dete que quer saber onde se pode trocar a cor das letra, resolvi copiar e colar aqui.
Vá até o HTML do seu blog e desmarque "Expandir modelos de widgets" caso esteja selecionado. Procure péla tag(código)
]]></b:skin>
E acima dele cole o código abaixo.
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
Agora procure pelo código
</head>
E acima dele cole o código abaixo:
*Não se esqueça de colocar o endereço completo de seu blog.
É aqui que você poderá modificar as cores e o tamanho das letras. As cores estão em RGB, clique AQUI para escolher suas cores.
Verde----endereço do seu blog
roxo-----------tamanho das palavras maiores de sua nuvem de tags
vermelho------cor das palavras maiores
azul-----------tamanho das palavras menores
laranja--------cores das palavras menores
<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'AQUI O ENDEREÇO DO SEU BLOG ';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Agora procure pelo código:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
E substitua pelo código abaixo
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Não mude nada a partir desse ponto -----------------
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var ta=0
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Postagens em '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Há este site AQUI que também lhe dá uma nuvem de tags que você poderá se cadastrar fazer sua nuvem de tags e depois só colar no HTML/Javascript em seu blog
Nem ia coloca-la aqui, visto que já até linkei a página no blog, mas a pedido da Dete que quer saber onde se pode trocar a cor das letra, resolvi copiar e colar aqui.
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
Vá até o HTML do seu blog e desmarque "Expandir modelos de widgets" caso esteja selecionado. Procure péla tag(código)
]]></b:skin>
E acima dele cole o código abaixo.
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
Agora procure pelo código
</head>
E acima dele cole o código abaixo:
*Não se esqueça de colocar o endereço completo de seu blog.
É aqui que você poderá modificar as cores e o tamanho das letras. As cores estão em RGB, clique AQUI para escolher suas cores.
Verde----endereço do seu blog
roxo-----------tamanho das palavras maiores de sua nuvem de tags
vermelho------cor das palavras maiores
azul-----------tamanho das palavras menores
laranja--------cores das palavras menores
<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'AQUI O ENDEREÇO DO SEU BLOG ';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Agora procure pelo código:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
E substitua pelo código abaixo
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Não mude nada a partir desse ponto -----------------
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var ta=0
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Postagens em '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Há este site AQUI que também lhe dá uma nuvem de tags que você poderá se cadastrar fazer sua nuvem de tags e depois só colar no HTML/Javascript em seu blog
20 de mai. de 2008
Post aberto
Ontem fiz um post que ficou apenas alguns minutos no ar, mas deu o que falar. Foi um problema que tive com outro blogueiro, alguém que publicou alguns dos meus templates em seu blog hospedando-os em um servidor próprio e retirando os créditos do código dos templates. Eu já parei de me importar com as pessoas que modificam os meus templates, não adianta, sabe como é ? Resolvi relevar, mas pegar um template, retirar os créditos, hospedar e oferecer em seu blog, é demais...
Ora, fiquei sim, e com razão bastante chateada pois faço um trabalho completamente gratuito (salvo quem quer me encomendar um template exclusivo), não ganho absolutamente um centavo por isso, nem o Adsense tenho em meu blog e pela resposta que recebi do rapaz, achei um tanto ofensiva, talvez pelo teor do post que fiz ao oferecer a ele um award "especial".
Bom, já tive posts e mais posts copiados na íntegra, inclusive com os erros de português, e quando peço os créditos sou muitas vezes atacada, tanto que tive que fechar o sistema de comentários.
A cara de pau de alguns chega a tanto, que teve um desses, que veio aqui, copiou o post na íntegra, inclusive com os memos links e quando eu o confrontei, ele simplesmente disse que eu é quem copiava, chegou ao cúmulo de linkar aqui um blog de dicas dizendo que de lá eu havia copiado o código, e continuou por semanas me ofendendo se passando por outras pessoas. O cara de pau é tão cara de pau que ainda por cima usava um dos meus templates.
É demais, não é não ?!!!
Ora, fiquei sim, e com razão bastante chateada pois faço um trabalho completamente gratuito (salvo quem quer me encomendar um template exclusivo), não ganho absolutamente um centavo por isso, nem o Adsense tenho em meu blog e pela resposta que recebi do rapaz, achei um tanto ofensiva, talvez pelo teor do post que fiz ao oferecer a ele um award "especial".
Bom, já tive posts e mais posts copiados na íntegra, inclusive com os erros de português, e quando peço os créditos sou muitas vezes atacada, tanto que tive que fechar o sistema de comentários.
A cara de pau de alguns chega a tanto, que teve um desses, que veio aqui, copiou o post na íntegra, inclusive com os memos links e quando eu o confrontei, ele simplesmente disse que eu é quem copiava, chegou ao cúmulo de linkar aqui um blog de dicas dizendo que de lá eu havia copiado o código, e continuou por semanas me ofendendo se passando por outras pessoas. O cara de pau é tão cara de pau que ainda por cima usava um dos meus templates.
É demais, não é não ?!!!
Tenho certeza absoluta que essas pessoas sabem exatamente o que estão fazendo, não me venham com essa de que não sabiam, ou que alguém que enviou a postagem, isso não cola. Quer copiar conteúdo ? Dê os créditos, link o meu blog, comente aqui, peça. Claro que há pessoas que não sabem, eu no início não sabia, mas pessoas que tem vários blogs e estão nessa a tempos, estão carecas de saber das regrinhas de boa convivência.
Estou cansada mesmo de conversar, de pedir, de esclarecer...
Como podem ver tenho bastante códigos em meu blog, muitos encontrados na rede e estão com os créditos, outros não pois foram muitas vezes retirados do código fonte e adaptados por mim.
Há quem diga que não tenho um CC em meu blog, aquele sistema em que se coloca um selo para que não copiem os posts, mas sinceramente, acho demais esse tipo de argumento também. Quer dizer, que se você entra em uma loja e lá não tem uma plaquinha escrita que não pode levar sem pagar, você pega e leva ?
Quanto aos templates, quando você compra uma tela você retira a assinatura do artista e coloca a sua ?
Ah, tenha dó !!!
Cansei deste tipo de afronta por aqui e continuarei a oferecer awards "Óleo de Peroba" a quem vem aqui copiar as postagens. Não quer passar por isso ? Simples, não copie as postagens, não copie os templates, tenha criatividade, seja original, crie.
Estou cansada mesmo de conversar, de pedir, de esclarecer...
Como podem ver tenho bastante códigos em meu blog, muitos encontrados na rede e estão com os créditos, outros não pois foram muitas vezes retirados do código fonte e adaptados por mim.
Há quem diga que não tenho um CC em meu blog, aquele sistema em que se coloca um selo para que não copiem os posts, mas sinceramente, acho demais esse tipo de argumento também. Quer dizer, que se você entra em uma loja e lá não tem uma plaquinha escrita que não pode levar sem pagar, você pega e leva ?
Quanto aos templates, quando você compra uma tela você retira a assinatura do artista e coloca a sua ?
Ah, tenha dó !!!
Cansei deste tipo de afronta por aqui e continuarei a oferecer awards "Óleo de Peroba" a quem vem aqui copiar as postagens. Não quer passar por isso ? Simples, não copie as postagens, não copie os templates, tenha criatividade, seja original, crie.
18 de mai. de 2008
Marcadores expandíveis
A Áurea do Templates para Você fez uma tutorial ensinando a expandir os marcadores do blog.
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.Bom. eu fiz de uma outra forma e deu certo. Tente.
Claro que você terá que ter os marcadores em seu blog e se acaso o título que você deu aos marcadores for outro, substitua, ok ?
Vá até o HTML do seu blog e abaixo da tag(código) <head>
Coloque a código abaixo e salve.
<style type='text/css'>.texthidden {display:inline}.shown {display:block}</style><script type='text/javascript'>document.write('<style>.texthidden {display:none} </style>');</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>
Agora clique em "Expandir modelos de widgets" e procure pelo código:
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
E substitua tudo que estiver abaixo deste código e antes de: <b:include name='quickedit'/>
<b:includable id='main'>
<b:if cond='data:title'>
<a href='javascript:void(0);' onclick='expandcollapse("marcadores")'>
<center><img border='0' src='AQUI O ENDEREÇO DO BOTÃO'/></center></a><br/>
</b:if>
<div class='widget-content'>
<ul class='texthidden' id='marcadores'>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
Onde está em vermelho é para que você substitua pelo endereço da imagem que quiser. Abaixo alguns que fiz para você. Salve em seu pc e hospede-os em um site de hospedagem.
Recolocar enviar postagem ao pé do post
Alguém deixou uma pergunta no chat,de como recolocar o enviar postagem ao pé do post. 
Vá até Layout, agora clique em "Editar", que está abaixo de postagens do blog
Bom, se você tentou pelo caminho normal e mesmo assim não deu certo, tente dessa outra forma.
Vá até o HTML do seu Blog , clique em "Expandir modelos de widgts" e agora procure pela tag (código)
<!-- email post links -->
Apague o que estiver escrito dai para baixo até: </b:if>
Agora coloque o seguinte código:
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
Vá até Layout, agora clique em "Editar", que está abaixo de postagens do blog
Selecione a caixinha como no modelo abaixo e salve.
Bom, se você tentou pelo caminho normal e mesmo assim não deu certo, tente dessa outra forma.
Vá até o HTML do seu Blog , clique em "Expandir modelos de widgts" e agora procure pela tag (código)
<!-- email post links -->
Apague o que estiver escrito dai para baixo até: </b:if>
Agora coloque o seguinte código:
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>
</a>
</span>
</b:if>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>
</a>
</span>
</b:if>
16 de mai. de 2008
Template Teia
15 de mai. de 2008
Postagens relacionadas ao pé do post
Para colocar ao pé de suas postagens uma lista de posts relacionados´em seu Blogger, proceda da seguinte forma.
Copie o código abaixo, vá até o HTML do seu blog e procure pela tag (código)
]]></b:skin>
Agora cole o código abaixo dele.
*Onde está em vermelho é a quantidade de postagens que o código mostrará, querendo mais de 5, aumente o número.
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 5) {
break;
}
}
document.write('</ul>');
}
//]]>
</script>
Salve. Agora procure novamente em HTML por todo esse primeiro código que está na cor verde e acrescente o código em vermelho. Note que você colocará o código em meio ao outro código.
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=10"'
type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
Agora procure pela código:
E cole o código abaixo, depois dele.
<p class='post-footer-line post-footer-line-3'/>
<div class='post-footer-line post-footer-line-4'>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>
Créditos: Vagabundia
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
Copie o código abaixo, vá até o HTML do seu blog e procure pela tag (código)
]]></b:skin>
Agora cole o código abaixo dele.
*Onde está em vermelho é a quantidade de postagens que o código mostrará, querendo mais de 5, aumente o número.
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 5) {
break;
}
}
document.write('</ul>');
}
//]]>
</script>
Salve. Agora procure novamente em HTML por todo esse primeiro código que está na cor verde e acrescente o código em vermelho. Note que você colocará o código em meio ao outro código.
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=10"'
type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
Agora procure pela código:
E cole o código abaixo, depois dele.
<p class='post-footer-line post-footer-line-3'/>
<div class='post-footer-line post-footer-line-4'>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>
Créditos: Vagabundia
Efeito Marquee para os lados
ATeca do blog Devaneios e Desatinos perguntou-me como fazer com que o conteúdo dentro do efeito marquee corram para o lado uma ao lado da outra. É fácil fofis.
Veja AQUI o exemplo.
Copie o código e cole em HTML/Javascript.
Onde está em verde é onde você regulará o tamanho da caixinha. Em vermelho é o bendito código que fará com que o conteúdo role lado a lado, portanto, coloque-os sempre entre um elemento e outro.
O código em azul é o sentido em que os elementos da caixinha correrão.
Left----esquerda
Right---direita
<marquee direction="left" onmouseover="this.stop()" width="150" scrollamount="3" onmouseout="this.start()" height="150"><center>
<br/>
COLOQUE AQUI O QUE VC QUER QUE ROLE
COLOQUE AQUI O QUE VC QUER QUE ROLE
COLOQUE AQUI O QUE VC QUER QUE ROLE
COLOQUE AQUI O QUE VC QUER QUE ROLE
COLOQUE AQUI O QUE VC QUER QUE ROLE
</center></marquee>
*ATENÇÃO: Se antes dos elementos que você quer colocar dentro do cpodigo tiver os códigos:
<center> <left> <right>
Tire-os, ou não dará certo.
Veja AQUI o exemplo.
Copie o código e cole em HTML/Javascript.
Onde está em verde é onde você regulará o tamanho da caixinha. Em vermelho é o bendito código que fará com que o conteúdo role lado a lado, portanto, coloque-os sempre entre um elemento e outro.
O código em azul é o sentido em que os elementos da caixinha correrão.
Left----esquerda
Right---direita
<marquee direction="left" onmouseover="this.stop()" width="150" scrollamount="3" onmouseout="this.start()" height="150"><center>
<br/>
COLOQUE AQUI O QUE VC QUER QUE ROLE
COLOQUE AQUI O QUE VC QUER QUE ROLE
COLOQUE AQUI O QUE VC QUER QUE ROLE
COLOQUE AQUI O QUE VC QUER QUE ROLE
COLOQUE AQUI O QUE VC QUER QUE ROLE
</center></marquee>
*ATENÇÃO: Se antes dos elementos que você quer colocar dentro do cpodigo tiver os códigos:
<center> <left> <right>
Tire-os, ou não dará certo.
13 de mai. de 2008
Imagem principal (header) aleatória
Para que sua imagem principal mude sempre a cada vez que seu visitante entra no blog é algo um pouquinho trabalhoso, mas relativamente simples.
Veja AQUI o resultado, claro que ao entrar você terá que clicar na tecla F5 do seu teclado para que a imagem modifique.
A primeira coisa a fazer é salvar um desses dois quadradinhos em seu PC. Se o fundo de seu Blogger for branco, salve o quadradinho branco, se for preto, o preto, se for de outra cor, bom, faça um quadradinho então no paint do seu pc na cor de seu blog.
*Atenção onde o salvará, precisaremos dele em instantes.
Agora vá até "Elementos de página" em seu Blogger e abra o cabeçalho (onde está o título de seu blog)
Clique em procurar para encontrar o quadradinho que vc salvou a pouco.
Deixe selecionado "Em vez de título e descrição"
Aí está o quadradinho.
Agora salve.
Agora clique em "Adicionar um novo elemento de página"
ao abrir a janela clique em "HTML/Javascript"
Adicione aí o código abaixo. Coloque o endereço de suas imagens e salve.
<script language="javascript" type="text/javascript">
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>
<script language="javascript" type="text/javascript">
var randHdr = randRange(1,4);
if (randHdr == 1) {
document.write('<img src="AQUI O ENDEREÇO DE SUA IMAGEM">')
} else if (randHdr == 2) {
document.write('<img src="AQUI O ENDEREÇO DE SUA IMAGEM">')
} else if (randHdr == 3) {
document.write('<img src="AQUI O ENDEREÇO DE SUA IMAGEM">')
} else if (randHdr == 4) {
document.write('<img src="AQUI O ENDEREÇO DE SUA IMAGEM">')
}
</script>
Agora arraste o widget do cabeçalho para baixo e coloque o widget com suas imagens para cima modo que ele fique acima dos outros widgets.
Veja AQUI o resultado, claro que ao entrar você terá que clicar na tecla F5 do seu teclado para que a imagem modifique.
A primeira coisa a fazer é salvar um desses dois quadradinhos em seu PC. Se o fundo de seu Blogger for branco, salve o quadradinho branco, se for preto, o preto, se for de outra cor, bom, faça um quadradinho então no paint do seu pc na cor de seu blog.
*Atenção onde o salvará, precisaremos dele em instantes.
Agora vá até "Elementos de página" em seu Blogger e abra o cabeçalho (onde está o título de seu blog)
Clique em procurar para encontrar o quadradinho que vc salvou a pouco.
Deixe selecionado "Em vez de título e descrição"
Aí está o quadradinho.
Agora salve.
Agora clique em "Adicionar um novo elemento de página"
ao abrir a janela clique em "HTML/Javascript"
Adicione aí o código abaixo. Coloque o endereço de suas imagens e salve.
<script language="javascript" type="text/javascript">
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>
<script language="javascript" type="text/javascript">
var randHdr = randRange(1,4);
if (randHdr == 1) {
document.write('<img src="AQUI O ENDEREÇO DE SUA IMAGEM">')
} else if (randHdr == 2) {
document.write('<img src="AQUI O ENDEREÇO DE SUA IMAGEM">')
} else if (randHdr == 3) {
document.write('<img src="AQUI O ENDEREÇO DE SUA IMAGEM">')
} else if (randHdr == 4) {
document.write('<img src="AQUI O ENDEREÇO DE SUA IMAGEM">')
}
</script>
Agora arraste o widget do cabeçalho para baixo e coloque o widget com suas imagens para cima modo que ele fique acima dos outros widgets.
Colocando vídeos do You Tube no Blogger
Para colocar vídeos nos postts dos Blogger é super fácil.
Ao encontrar o vídeo desejado, veja que ao lado do vídeo há uma caixinha como essa do foto. Copie o endereço.
Clique para ampliar
Pegue este endereço e cole-o em "Editar HTML" no local onde você escreve, coloque um título e publique.
Ao encontrar o vídeo desejado, veja que ao lado do vídeo há uma caixinha como essa do foto. Copie o endereço.
Clique para ampliar
Pegue este endereço e cole-o em "Editar HTML" no local onde você escreve, coloque um título e publique.
Colocando vídeos nos posts do Blogger
Para colocar vídeos nas páginas do Blogger é bem fácil. Você poderá colocar subindo o vídeo direto do seu pc para o Blogger ou se quiser colocar hospede-o no You Tube e depois o coloque aqui.
Subindo o vídeo pelo Blogger
Leia tudo
Subindo o vídeo pelo Blogger
Leia tudo
Vá até o local onde você escreve e siga os passos.
Abrirá uma janela como essa.
Clique em "Fazer upload de vídeo"
Abrirá o browser do seu PC. Procure seu vídeo.
Depois que vc clicou no vídeo a janela ficará assim.
Coloque um título e clique na caixinha aceitando os termos do Blogger.
Agora, espere, espere...
Espere...
Espere...
ZZZ zzzzzzz z
zzzzz
zz zzzzzz
Se quiser pode ir tomar banho, preparar um lanchinho, dar uma voltinha...
20 minutos depois e nada...
30 minutos depois e nada...
45 minutos depois e nada...
1: 35 minutos depois e N A D A !!!!
Ops, apareceu a margarida !
Criando sua conta no Blogger de graça
Algumas pessoas tem me escrito a respeito de abrir contas no Blogger e me dizem que agora é pago.
A verdade é que continua gratuito, mas é que há algum tempo a Globo negociou com o Blogger e quando se procura abrir uma conta aqui no Brasil através do Google, os primeiros links que abrem são de fato o da Globo, e pago pois para acessar só assinando a Globo.com.
Para ter uma conta no Blogger a primeira coisa que você precisará é de um endereço de email, pode ser qualquer um, mas se possível, dê preferência a um email do Gmail, para faze-lo, clique AQUI, é rápido e grátis.
Agora para acessar gratuitamente e abrir uma conta no Blogger, clique AQUI e preencha o formulário adequadamente.
A verdade é que continua gratuito, mas é que há algum tempo a Globo negociou com o Blogger e quando se procura abrir uma conta aqui no Brasil através do Google, os primeiros links que abrem são de fato o da Globo, e pago pois para acessar só assinando a Globo.com.
Para ter uma conta no Blogger a primeira coisa que você precisará é de um endereço de email, pode ser qualquer um, mas se possível, dê preferência a um email do Gmail, para faze-lo, clique AQUI, é rápido e grátis.
Agora para acessar gratuitamente e abrir uma conta no Blogger, clique AQUI e preencha o formulário adequadamente.
Algumas dicas:
- Dê preferência ao título de seu blog com palavras sem acentuação ou "ç"
- Coloque um título em seu blog que tenha relação com o que pretende postar.
- Não se esqueça de anotar a senha que você colocará no blog.
Dicas para iniciantes no Blogger
Deixarei neste post as primeiras dicas para blogueiros iniciantes do Blogger
INICIANTES
Criando sua conta no Blogger de graça
Mudando o modelo do Blogger antigo para o modelo atual
Como baixar os templates
Onde estão os HTMLs do Blogger
HTML/Javascript
Aprenda a hospedar imagens
Localizar código no template com facilidade
Saiba quem te linka
INICIANTES
12 de mai. de 2008
Menu 3D Stu
Baixei e instalei este menu para facilitar. Basta copiar e colar no local indicado.
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.Vá até o HTML do seu blog e procure pela tag (código)
]]></b:skin>
Acima dele cole o código abaixo
/*Menu horizontal-------------------------------------------------*/
.preload16 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1RQcid5umWEKY69Y5w4-CLEXMZ1-IG_B9YRgONhE4ftZNGhJRimhEfQmW-D4vbFOIijy7z1w_-qgumf_tdfMu12T2hS2RR2q0-WtimG0KEJeCi4sdzSVRzHEU7jd5VO3z3chN_tXqMsQ/s1600/pro162bf5.gif);
}
.preload16a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlHzY_ytFlY_FRxvO2Le7xcxzz3NPv56uUKTR3CPrP5oOjoFWOMd6DjS_iFOTTL__NVM_2_xn3vRFugNUW3ckhrzOmwMygQfr0HIz7pp2CoPNuOYczClZTwf38ulw8EumM4fvGaPhpJcU/s1600/pro162azc0.gif);
}
.pro16 {
padding:0 0 0 1em;
margin:0;
list-style:none;
height:43px;
position:relative;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpAddObw75Pwc7-jiLrsiJybxD_xsgtPaYkdYkDdFxK-hQVcwPI3lymvPbEa_FXW6EpQeZNz_WWwJPhUhNgh1reXVlH4ZIdnirc0_VBDuJGcwMgPslReJFRtIauQQZlNMXLOVszQXF6h0/s1600/pro16backxl6.gif) repeat-x left top;
font-size:11px;
}
.pro16 li {
float:left;
height:43px;
}
.pro16 li a {
display:block;
float:left;
height:40px;
line-height:35px;
color:#888;
text-decoration:none;
font-family:arial, verdana, sans-serif;
font-weight:bold;
text-align:center;
padding:0 0 0 10px;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhkbyeqrAXOqXN1s1_KoYf8ya-dipu8GWfUhajOEAkRkMTMAM00QbJRQzaBXNco7ndGfrrPZNlTEhXbhIVDOQ1JCoTdmpVXkbXUnLgUccVntGh0T7uSDJA1SoW_4uYsU56d7MN1dtj3g/s1600/pro160fa8.gif) no-repeat;
}
.pro16 li a b {
float:left;
display:block;
padding:0 60px 0 0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhkbyeqrAXOqXN1s1_KoYf8ya-dipu8GWfUhajOEAkRkMTMAM00QbJRQzaBXNco7ndGfrrPZNlTEhXbhIVDOQ1JCoTdmpVXkbXUnLgUccVntGh0T7uSDJA1SoW_4uYsU56d7MN1dtj3g/s1600/pro160fa8.gif) no-repeat right top;
}
.pro16 li.current a {
color:#000; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlHzY_ytFlY_FRxvO2Le7xcxzz3NPv56uUKTR3CPrP5oOjoFWOMd6DjS_iFOTTL__NVM_2_xn3vRFugNUW3ckhrzOmwMygQfr0HIz7pp2CoPNuOYczClZTwf38ulw8EumM4fvGaPhpJcU/s1600/pro162azc0.gif) no-repeat;
}
.pro16 li.current a b {
color:#000;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1RQcid5umWEKY69Y5w4-CLEXMZ1-IG_B9YRgONhE4ftZNGhJRimhEfQmW-D4vbFOIijy7z1w_-qgumf_tdfMu12T2hS2RR2q0-WtimG0KEJeCi4sdzSVRzHEU7jd5VO3z3chN_tXqMsQ/s1600/pro162bf5.gif) no-repeat right top;
}
.pro16 li a:hover {
color:#000;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlHzY_ytFlY_FRxvO2Le7xcxzz3NPv56uUKTR3CPrP5oOjoFWOMd6DjS_iFOTTL__NVM_2_xn3vRFugNUW3ckhrzOmwMygQfr0HIz7pp2CoPNuOYczClZTwf38ulw8EumM4fvGaPhpJcU/s1600/pro162azc0.gif) no-repeat;
}
.pro16 li a:hover b {
color:#000; background:url(http://img222.imageshack.us/img222/8746/pro162pt0.gif) no-repeat right top;
}
.pro16 li.current a:hover {
color:#000;
cursor:default;
}
Salve !
Agora procure pela tag (código):
<div id='outer-wrapper'><div id='wrap2'>
Se não encontrou este acima, procure por:
E cole abaixo o próximo código. Coloque seus links e salve.
<ul class='pro16'>
<li class='current'><a href='#'><b>HOME</b></a></li>
<li><a href='ENDEREÇO DO LINK 2'><b>LINK 2</b></a></li>
<li><a href='ENDEREÇO DO LINK 3'><b>LINK 3</b></a></li>
<li><a href='ENDEREÇO DO LINK 4'><b>LINK 4</b></a></li>
<li><a href='ENDEREÇO DO LINK 5'><b>LINK 5</b></a></li>
<li><a href='ENDEREÇO DO LINK 6'><b>LINK 6</b></a></li>
</ul>
Créditos: CSS Play
11 de mai. de 2008
Botão sobe/desce seu blog
Para ter dois botões em seu blog, um que faz a página descer e outro que faz a página subir é facil
Veja o exemplo AQUI
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
Copie o código vá até "Elementos de página", clique em "Adicionar um novo elemento de página", agora em HTML/Javasript e cole o código abaixo.
* Este seu widget deverá ficar posicionado na parte superior em seu blog pois é o botão para descer a página
Agora mais uma vez adicione um elemento de página, mas dessa vez o widget deverá ser arrastado para que fique na parte inferior de seu blog, pois é o botão para subir o blog.
<center><input type=button value="Desce Pagina" onClick="scrolldown()"></center>
Veja o exemplo AQUI
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.Copie o código vá até "Elementos de página", clique em "Adicionar um novo elemento de página", agora em HTML/Javasript e cole o código abaixo.
* Este seu widget deverá ficar posicionado na parte superior em seu blog pois é o botão para descer a página
<script language="JavaScript">
<!--
function SymError() { return true; }
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes) { return (new Object()); }
window.open = SymWinOpen;
//-->
</script>
<script language="JavaScript">
<!--
function scrolldown(){
for (I=1; I<=500; I++){
parent.scroll(1,I)
}
}
function scrollup(){
for (I=1500; I>=1; I--){
parent.scroll(1500,I)
}
}
//-->
</script>
<!--Começo --->
<center><input value="Desce Blog" onclick="scrolldown()" type="button"/></center>
<!--Fim --->
Agora mais uma vez adicione um elemento de página, mas dessa vez o widget deverá ser arrastado para que fique na parte inferior de seu blog, pois é o botão para subir o blog.
<center><input type=button value="Desce Pagina" onClick="scrolldown()"></center>
Assinar:
Postagens (Atom)
