segunda-feira, 27 de julho de 2009

Colocar música no blog



Colocar música no blog é mais fácil do que parece. Isso é verdade pois nunca tinha me interessado por isso, mas revolvi pesquisar para escrever essa dica e para minha surpresa em menos de 10 minutos eu estava ouvindo música no meu blog.

Usei uma música do site http://www.mp3tube.net, você só precisa pesquisar pela música que deseja, quando você clica no nome da música aparece uma tela que você ouve a música e fornece o código para colocar no seu site, mas não é a url, é o código que está na frente do embed.

Esse site ainda fornece a opção de você fazer um cadastro e colocar a música que quiser, caso você não encontre a música desejada. Caso não gostem do MP3tube, aqui tem outros sites de hospedagem:

http://www.myfabrik.com
http://boomp3.com
Last FM
Radio Fusion
Deezer

Enfim o modo de colocar música é simples e basicamente o mesmo de colocar qualquer outra coisa, procure um site que tenha o que deseja e procure pelo código para colocar no seu blog.

Esses códigos devem ser colocados pela pagina editar layout >>> adicionar um gadget >>> html/javascript, então é só colar o código (isto no Blogspot), para outros blogs procure onde você edita o html ou modelo, enfim onde você pode colocar o código da música.



Veja também:

Qual o melhor site de Música para colocar no Blog
Colocar Rádio no blog

Essa postagem já teve muitos comentários e fica até ruim ver a lista inteira, então fizemos um tópico sobre música em nossa comunidade no orkut, lá pode ser mais fácil tirar as dúvidas sobre como colocar uma música ou rádio no seu blog.

Cópia de texto

Há algum tempo publicamos um script que não deixa selecionar texto,
mas ele apresentou alguns problemas então encontramos esse que parece funcionar
adequadamente. Mas tenha a certeza que nenhum código protegerá completamente
o conteúdo do seu site, pois existem muitas formas de copiar um site.

<script language="JavaScript1.2">
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

Na página editar html coloque esse código antes da tag</head>,
e isso impedirá a seleção de textos.

Tradução

Um tradutor simples e eficiente para colocar no seu blog. Testei do português para o espanhol e ficou perfeito.Basta copiar este código e inserir através da página layout nos elementos de página>html/javascript. Não esqueçam na parte final do código de substituir http://SEUBLOG.blogspot.com pelo endereço do seu blog.

 


<div align="center"><img src="http://img176.imageshack.us/img176/6091/84056383at1.png"/>
<br /> <form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation"
target="_blank">
<input value="PT" name="wl_srclang" type="hidden"/>
<select style="font-size: 70%; width: 160px;" name="wl_trglang">
<option value="EN"/>Português - Inglês
<option value="FR"/>Português -Francês
<option value="DE"/>Português -Alemão
<option value="IT"/>Português - Italiano
<option value="PT"/>Português -Português
<option value="RU"/>Português - Russo
<option value="ES"/>Português - Espanhol
</select>
<input value="http://SEUBLOG.blogspot.com/" name="wl_url"
type="hidden"/>
<input name="submit" type="submit" style="font-size:
70%; width: 50px;" value="Traduza"/>
</form>
</div>

Dica enviada por: Escola Vicente Arruda

Status do MSN no Blog

Para mostrar seu status do MSN no seu blog entre no link:

http://settings.messenger.live.com/Applications/WebSettings.aspx

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.

Voltar ao topo da Página

Para voltar ao topo da página é bem simples, faça da seguinte forma:

Inserir o link: Entre na página layout, clique para adicionar um gadget, escolha a opção HTML/JavaScript, e coloque esse código (esse será o lugar onde aparecerá o link para voltar do topo da página):
<a href="#topo">Topo da Página</a>
Clique para salvar e está parte está pronta.


Inserir o Marcador: agora vamos marcar para onde o link deve levar, na pagina editar HTML, procure por <body> e logo depois dela coloque esse código:
<a name="topo"></a>

E já está tudo pronto é só salvar e ver o resultado. Esse mesmo sistema funciona para linkar qualquer outra parte do seu blog. Por exemplo, você quer colocar no inicio da página um link que leve para o seu banner ou setor de parcerias, coloque o link no inicio do jeito que explicamos acima (inserir link) e em vez de inserir o marcador pela pagina HTML vamos colocar junto com os parceiros, por exemplo, então coloque o código <a name="topo"></a> junto com o código dos seus parceiros e pronto. Mas lembrem-se quando for usar mais de uma vez esse código troque a palavra topo que está nele, pois se usar duas vezes a com a mesma palavra não funciona, pode ser qualquer palavra (parceiros, banner, imagem...) e quando for modificar o código cuidado para não pagar nenhum outro sinal “por engano.

Após publicamos esse código encontramos um jeito melhor e mais fácil que essa para colocar um link ou imagem com a função de voltar ao topo da página.

Dia do mês e da semana

Para mostrar o dia do mês e da semana no seu blog coloque o código abaixo. Entre na pagina editar layout, adicionar gadget, html/javascript, e cole esse código:

<script language="JavaScript">
<!--
mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
myyear= mydate.getYear();
weekday= myweekday;
if(myday == 0)
day = " Domingo"
else if(myday == 1)
day = " Segunda - Feira"
else if(myday == 2)
day = " Terça - Feira"
else if(myday == 3)
day = " Quarta - Feira"
else if(myday == 4)
day = " Quinta - Feira"
else if(myday == 5)
day = " Sexta - Feira"
else if(myday == 6)
day = " Sábado"
if(mymonth == 0)
month = "Janeiro "
else if(mymonth ==1)
month = "Fevereiro "
else if(mymonth ==2)
month = "Março "
else if(mymonth ==3)
month = "Abril "
else if(mymonth ==4)
month = "Maio "
else if(mymonth ==5)
month = "Junho "
else if(mymonth ==6)
month = "Julho "
else if(mymonth ==7)
month = "Agosto "
else if(mymonth ==8)
month = "Setembro "
else if(mymonth ==9)
month = "Outubro "
else if(mymonth ==10)
month = "Novembro "
else if(mymonth ==11)
month = "Dezembro "
document.write(day+", "+myweekday+" de "+month+" de 2008");
// -->
</script>


Para escolher a cor, tipo e tamanho que a data aparecerá no seu blog, troque a linha document.write(day+", "+myweekday+" de "+month+" de 2008"); por essa aqui:

document.write("<font color='#CC0066' size='30pt' face='Comic Sans MS'>"
+day+", "+myweekday+" de "+month+" de 2008</font>");

E altere como desejar: 30pt é o tamanho, Comic Sans é o tipo de letra e #CC0066 é a cor, não esqueça de alterar o ano pois esse código estava dando uma falha no Firefox por isso não foi possível colocar o ano para atualizar automaticamente, se precisar aqui tem uma tabela com o código das cores.

Imagem para fundo do blog

Quando temos que fazer uma imagem para usar como textura no fundo do blog geralmente enfrentamos muitos problemas, pois é difícil fazer uma imagem que encaixe perfeitamente. Logo abaixo você tem imagens para usar como plano de fundo no seu site, você apenas precisa salvar e hospedar em algum lugar, sugerimos o http://imageshack.us








No site All Free Backgrounds e Free Backgrounds você encontra muitas outras imagens de fundo, e o procedimento é o mesmo, salvar e hospedar a imagem e depois você entra na pagina editar html do seu blog e coloca a linha de código background-image: url(endereço da imagem); junto com :
body{................
...........
..........}
E já está pronto, se você quiser testar essas imagens antes de colocar no seu blog copie esse código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {background-image: url(fundo4.gif);
}
-->
</style></head>
<body>
</body>
</html>



Cole no bloco de notas, altere onde está escrito fundo4.gif para o nome da imagem que você quer testar, mas não se esqueça de colocar .jpg ou .gif no nome da imagem porque isso também faz parte do nome da imagem. E salve no seu computador na mesma pasta onde salvou a imagem, com o nome planodefundo.htm, desse mesmo jeito o nome do arquivo precisa ter o .htm no final pois assim será como se fosse uma pagina de internet. Agora é só ir até a pasta e clicar sobre esse arquivo que ele abrirá em seu navegador de internet e você poderá ver como fica a imagem de fundo sem precisar hospedar e mexer no seu blog. Isso poupa muito trabalho, afinal somente irá mexer no seu blog depois de visualizar a imagem de fundo que escolheu e já tem certeza que deseja usar-la.

Compactar e Descompactar Arquivos (Zip)

Um programa muito usado e que ainda deixa algumas duvidas é o WinZip ou como é mais conhecido Zip. Então vamos mostrar como usá-lo.
Começaremos falando sobre descompactar arquivos para isso, vamos usar o exemplo de baixar um arquivo da internet que esteja no formato .zip, depois de terminado o download vamos até a pasta onde salvamos o arquivo e clique com o botão direito do mouse sobre ele, escolha a opção: WinZip e depois Extract here.Depois de clicar em Extract to here, aparecerá um arquivo com o mesmo nome, mas com o formato original, e podem ser vários formatos: .xml, .pdf, e muito outros, geralmente é só clicar sobre esse novo arquivo e seu computador abrirá no programa mais adequado.
Antes de clicar para abrir esse arquivo que baixou, é preciso ter alguns cuidados como passar um antivírus nele e prestar atenção se não é um arquivo com final .exe, pois isso é um programa que será instalado no seu computador, portanto somente abra um arquivo .exe se confiar no site de onde baixou o arquivo.

Agora faremos o caminho inverso, ou seja compactar e colocar na internet um arquivo: Isso é útil em duas ocasiões: quando vamos enviar um arquivo por email, pois fica mais rápido a transmissão ou quando precisamos hospedar um arquivo para outras pessoas fazerem download dele, porque é muito mais fácil achar onde hospedar um arquivo .zip do que outros formatos. Aqui estão alguns sites de hospedagem:

http://rapidshare.de
http://www.mediafire.com
http://www.4shared.com


Isso faz abrir uma janela para você escolher onde vai salvar o arquivo compactado, sugerimos salvar na mesma pasta e com o mesmo nome, isso já aparece pronto na janela, portanto só precisamos clicar no botão Add.

Veja essa explicação em slides e se quiser pode pegar o código e postar no seu blog.

Colocar Rádio no Blog

Muitos blogueiros perguntam como fazer para colocar uma radio ou suas músicas favoritas no blog isso não é difícil, isto não é difícil, você precisa pegar um código em uma das rádios existentes na internet e colocar no seu blog pela pagina layout, adicionar gadget, html/javascript. Aqui temos links de alguns sites que fornecem essas rádios para colocar no blog:

Last FM
Radio Fusion
Deezer

Além desses encontramos nesse site um script que pode ser modificado para varias rádios diferente, testamos com duas delas e já deixamos o código pronto para colocar no seu blog:

Rádio Web Rock
Jovem Pan

Contudo você precisa avaliar bem se realmente deveria colocar uma radio ou música no blog principalmente se esta iniciar automaticamente, por que muitas vezes seus visitantes podem estar ouvindo outra música ou estão em silencio e de repente levam um susto com uma música começando sem ele saber de onde vem. Outro problema é o gosto músical de cada pessoa, certamente a música que você acha maravilhosa, outros não suportam, talvez se esse blog tivesse música você estaria achando ela ridícula e procurando feito louco onde parar com a música. Isso se não perdesse a paciência e saísse do blog sem nem olhar direito.

Por essas razões pense bem se colocará músicas no seu blog e quais colocará. Uma opção para colocar apenas uma música no blog é o MP3tube, mas o visitante vai precisar clicar no play para iniciar a música.

Usando Melhor os Contadores de Visitas

Colocar um contador de visitas é bem simples, existem vários sites que fornecem o serviço gratuitamente, aqui tem uma lista de vários contadores de visita grátis, alguns recomendados pela própria pagina de ajuda do blogspot:

Google Analytics
Site Meter
Bravenet Hit Counter
FreeStats
Easy Hit Counters
StatCounter
Feedjit
Who's amung
BlogUtils

Os últimos 3 da lista mostram visitantes online, ou seja, que estão no seu site naquele momento. Alguns desses sites é necessário fazer cadastro para pegar o código, mas eles são grátis, depois que pegar o código entre na pagina layout, adicionar gadget, html/javascript e coloque o código do contador, clique para salvar e pronto.

Mas para que serve um contador de visitas? Parece uma pergunta boba, mas não é somente para enfeitar o blog ou apenas mostrar quantas visitas já tivemos. Existem varias estatísticas e informações úteis nesses contadores, como por exemplo:
Qual a resolução (tamanho) de tela de nossos visitantes?

Eles usam qual navegador (Internet Explorer, Firefox, Opera...)?
Essas perguntam vão ajudar na hora de modificar o layout ou colocar algumas coisas no blog, quando escrevi esse texto a maioria dos visitantes deste blog usava Internet Explorer e tem uma resolução de tela 1024x768, então devemos deixar o blog da melhor forma possível para esta configuração e não para a do nosso computador, afinal o objetivo de todo blog é agradar seus visitantes e se não é possível deixar ele perfeito em todas as configurações e navegadores, devemos dar prioridade para a maioria..

De qual site eles vieram? Outro blog? Site de busca?
O que pesquisaram para chegar em nosso blog?
Com essas informações podemos melhorar nosso conteúdo, por exemplo, publicando coisas que as pessoas procuram. Ainda podemos saber de quais sites recebemos mais visitas isso pode ser útil na hora de fazer parcerias e outras coisas.

Enfim seja qual for o contador que usar, tente explorar melhor as informações que tem nele e aproveitar da melhor forma possível e certamente acharam muitas coisas interessantes e úteis.

Topo da Página

Algum tempo atrás publicamos um texto falando sobre criar um link para voltar ao inicio da página, isso é útil no caso de páginas longas e o visitante pode voltar para o topo apenas num clique.
Com este código você pode fazer isso usando texto ou imagem (pode ser parecida com um botão), neste exemplo usamos uma imagem, porém se quiser apenas texto é só apagar o código da imagem <img src="URL DA IMAGEM" border="0"> e escrever o que desejar (voltar ao topo, inicio...).

<div style="position:fixed; bottom:0px; right:0px;"><a href="#"><img src="URL DA IMAGEM" border="0"></a></div>

Esse link ou botão para voltar ao topo ficará sempre visível na parte inferior direita do seu site, mesmo rolando a página, ele não sairá de lá, ou seja, fica sempre fixo no mesmo lugar.


Uma alteração que podemos fazer é trocar o canto que ele vai aparecer, se em vez de aparecer embaixo você quiser que apareça no canto superior, apague bottom:0px; e coloque top:0px; isso faz aparecer no alto da página, ou se quiser trocar de lado tire right:0px; e coloque left:0px; mudará para o lado esquerdo. Ainda podemos escolher se ficará encostado nas margens da página ou deixaremos uma pequena distancia caso queira deixar alguma distancia da margem é só alterar os valores 0px para o numero que desejar.


Para colocar esse acessório no seu blog, entre na página layout, adicionar gadget, html/javascript e cole o código, não se preocupe em qual parte ou coluna vai colocar porque isso não importa, pois sempre aparecerá fixo no lugar definido no código(canto da página).

Mostrar Reações

Algumas pessoas perguntaram sobre como mostrar as reações dos visitantes sobre as postagens do blog, isso é muito fácil de fazer é só entrar na pagina layout, clicar para editar as postagens do blog e marcar a opção reações. Se quiser modificar as palavras engraçado, interessante, legal, é só clicar no link editar ao lado delas e escrever o que você quiser.

E se quiser pode mudar a própria palavra reações, é só escrever outra coisa no lugar como, por exemplo, “essa postagem é:” no caso de usar palavras para classificar como bom, regular e ótimo. Enfim use sua criatividade e use esse recurso do blog da maneira que quiser, essa é um jeito simples de incrementar o blog em poucos minutos.


Se mesmo marcando a opção na pagina layout não aparecerem as reações no seu blog pode ser um problema de html, então entre na pagina editar html, clique para expandir o modelo e procure por:
<span class='post-comment-link'>
ou
<div class='post-footer-line post-footer-line-3'/>

Isso vai depender um pouco de como está o seu modelo e o lugar exato onde aparecerão os links para classificarem suas postagens(reações) e coloque esse trecho logo após uma dessas linhas acima, mas lembre-se é para colocar o código apenas um vez.

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span>&#160;</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

Fazer Playlist para Colocar no Blog

Devido à grande procura por musica para colocar no blog, aqui estão mais alguns links úteis que mostram sites que fazem playlists, aceitam fotos e até vídeos, quer dizer você pode fazer uma seleção de musicas para colocar no seu blog.

O Imeem faz todos esses serviços, mas infelizmente o site é em inglês o que dificulta um pouco sua utilização, mas já recebi varias vezes emails elogiando esses sites e dizendo que deveria falar sobre eles aqui no Dicas para Blogs, pois são bem úteis.
Sobre os Imeem achei essa descrição na Comunidade do Imeem no Orkut, resolvi publicar, pois eles sabem mais do que eu sobre o site:
Imagine um YouTube onde, além de você fazer upload de seus vídeos, também poder fazer upload de suas músicas favoritas e suas fotos...
Imagine ainda você poder colocar todo esse conteúdo em seu site ou blog, devido ao maravilhoso "embed player"...
Imagine você poder montar seu perfil (quase igual ao orkut) e fazer amigos e entrar em grupos...
Imagine você ter o poder de fazer a sua playlist e mandar para seus amigos...

Outro site com serviços parecidos é o SplashCast é possível criar seus canais online com musica, video, fotos e ainda é possivel fazer edições e mixar(adicionar narração as fotos ou videos) no próprio site, porém é em inglês também.

Se alguém conhecer ou usar algum site que faça esse tipo de serviço deixe um comentário falando sobre ele, ou se preferir envie para nosso email um texto descrevendo como usar o site, se for uma boa dica faremos uma postagem com ela, mas é claro vamos colocar seu link dizendo que já recebemos isso pronto como fazemos em todas as matérias que recebemos(veja o item colaboradores no guia rápido ao lado).

Imagem na Barra de Endereço

Já vimos e publicamos outros códigos para colocar uma imagem no lugar do ícone na barra de endereços, mas eles apresentam um problema com o Internet Explorer, vamos corrigir isso mostrando um outro código, repare que são duas vezes a mesma coisa mudando somente o formato da imagem .ico e .png:

<link href='imagem.ico' rel='shortcut icon' type='image/x-ico'/>
<link href='imagem.png' rel='shortcut icon' type='image/png'/>

Crie uma imagem no formato .png e hospede no ImageShack depois converta a imagem para o formato de ícone usando o site Converticon 2.1 e hospede o arquivo do ícone(.ico) no site MerryPic, se tiver duvidas sobre como fazer isso veja mais detalhes sobre como converter e hospedar arquivo no formato ícone(.ico), então coloque os endereços no lugar indicado no código acima, cuidado para pegar a url correta de cada imagem, estão em direct link pois as outras são paginas que mostram sua imagem(ícone) e se usar qualquer outras delas o código não funcionará.

Depois entre na pagina editar html, encontre ]]></b:skin> e coloque o código logo abaixo, ficará desse jeito:

]]></b:skin>
<link href='imagem.ico' rel='shortcut icon' type='image/x-ico'/>
<link href='imagem.png' rel='shortcut icon' type='image/png'/>
</head>

Agora é só clicar para visualizar e depois salvar se estiver tudo correto. Apenas mais um lembrete, no internet Explorer o ícone demora um pouco até aparecer e às vezes só vai funcionar depois que você carregar a página novamente.

Depois que publicamos essa explicação o site de hospedagem apresentou alguns problemas, então sugerimos usar o Free FavIcon.

Mostrar o numero total de Postagens e Comentários

Uma curiosidade interessante de ser mostrada no blog é o numero total de postagens feitas e também o numero de comentários recebidos, então montamos esse código fizemos de um jeito que a formatação do texto será igual ao resto do seu blog, assim faz parecer que o numero postagens e comentários fazem parte do layout do blog, o código para colocar no blog é:

<script type="text/javascript" src="http://acessoriosparablogs.com.br/scripts/postagem.js"></script>
<script type="text/javascript" src="http://seu-blog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>
<script type="text/javascript" src="http://acessoriosparablogs.com.br/scripts/comentario.js"></script>
<script type="text/javascript" src="http://seu-blog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments">
</script>


Apenas altere onde está escrito seu blog no código, isso aparece 2 vezes e você deve modificar as duas, senão o código não funcionará. Para colocar no seu blog entre na página layout, adicionar gadget, html/javascript e cole o código já com o endereço do seu blog nele. Outra coisa que podemos alterar é a formatação, para isso vamos adicionar essa linha antes do código:

<div style="font-family:'Comic Sans MS'; font-size:16pt; text-align:center">

E essa esse comando depois da ultima linha: </div>

A formatação na linha é apenas um exemplo, então se quiser pode trocar o tipo e tamanho das letras, você só tem que alterar os valores no código:
comic sans ms é o tipo da fonte
16px é o tamanho
text-align:center – aqui a palavra center é o alinhamento, pode ser left(esquerda), right(direita).

Quantas vezes cada pessoa esteve no blog

Além dos diversos tipos de contadores de visitas fornecidos por diversos sites, ainda é possível mostrar no blog quantas vezes cada pessoa entrou e seu blog, mas essa informação é apenas para quem visita o blog, por exemplo, vai aparecer no seu blog escrito: você já visitou esse blog 5 vezes, espero que tenha gostado! E a contagem continua automaticamente conforme a pessoa visualizar mais vezes seu blog.
Entre na página layout, adicionar gadget, html/javascript e coloque esse código:

<script type="text/javascript">
antes = 'você já visitou esse blog';
depois ='vezes, espero que tenha gostado!';
</script>
<script type="text/javascript" src="http://cidadeweb.110mb.com/visitas.js"></script>

As frases que aparecem no código você pode mudar como quiser: (você já visitou esse blog) e (vezes, espero que tenha gostado!). Apenas tenha cuidado para não apagar as aspas, elas fazem parte do código e sem elas não vai funcionar.
Esse script funciona com base no histórico de internet que está no computador de cada pessoa que visita o blog, então quando você ou alguém limpar o histórico a contagem recomeçará, mas isso é individual, quero dizer a contagem é feita separadamente no computador de cada visitante, portanto somente no computador que for apagado o histórico a contagem recomeça do 0 novamente.

Postagem expansível com miniatura da imagem

Muitas pessoas perguntam sobre como fazer aparecer somente um resumo da postagem e no final escrito leia mais… para clicar e ver a postagem completa encontramos um código que faz isso e ainda mostra uma miniatura da imagem junto com esse resumo do texto, ou seja, é um dos melhores jeitos de mostrar um link leia mais para postagens expansíveis. Além disso, não é necessário fazer alteração alguma nos texto que você já publicou quando colocar os códigos todas as postagens mudam automaticamente para o sistema expansível.

Entre na pagina editar html(não clique para expandir o modelo) e procure pela tag </head> e coloque esse código antes dessa tag.

<script type='text/javascript'>
summary_noimg = 330;
summary_img = 300;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://acessoriosparablogs.com.br/scripts/resumopost.js' type='text/javascript'/>

Clique para salvar depois clique para expandir o modelo e procure por < data:post.body/ > apague essa linha e cole esse trecho no lugar:


<p><b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leia mais...</a>
</span></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></p>


Clique para visualizar o blog e se estiver tudo certo salve as alterações no modelo e já está tudo pronto, agora seu blog mostra apenas um resumo da postagem e uma miniatura da imagem e quem gostar pode clicar para ver o texto inteiro.

Se quiser podemos personalizar esse código mudando a quantidade de caracteres que aparecem no resumo e o tamanho da miniatura da imagem, veja abaixo:

summary_noimg = número de caracteres do resumo se o texto não tiver imagens
summary_img = número de caracteres do resumo se o texto não tiver imagens img_thumb_height = Altura da miniatura da imagem
img_thumb_width = Largura da miniatura da imagem


Na segunda parte do código tem escrito 'data:post.url'>Leia mais...</a> esse leia mais é o texto que aparece para clicar e expandir a postagem então você pode escrever o que desejar aqui, mas cuidado para não apagar os sinais do código, modifique deixando o trecho assim 'data:post.url'>Texto aqui</a>. Para formatar esse texto entre na pagina editar html e coloque junto com os estilos CSS isso aqui:

.rmlink a{border: 1px solid #666666}
.rmlink a:hover{border: 1px solid #000000}

aqui coloquei apenas bordas para dar um exemplo, mas pode usar qualquer tipo de formação CSS que desejar.

Acho que essa é uma maneira bem melhor do que usar aquela outra explicação que precisa fazer alterações em cada postagem, mas se quiser ver o outro jeito tem na Ajuda do Blogger.

Se quiser veja o blog Meu Jornal estou usando esse código nele para demostração.

Criar um menu expansivel

Hoje vamos fazer um menu expansível ou então colocar algum conteúdo que só é mostrado ao clicar no título, ele funciona da seguinte maneira aparece somente o título do menu e quando clicamos ele desliza mostrando seu conteúdo e se clicar novamente ele volta a desaparecer. Você pode usar para colocar o que você quiser: texto, uma lista de links, imagens... Para colocar esse menu expansível no blog dá um pouco de trabalho, mas vale à pena, pois o efeito visual dele é muito bom.
Entre na pagina editar html e ache </head> então coloque isso antes dessa tag:

<script src="http://cidadeweb.110mb.com/SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>

Após isso vá um pouco mais acima e junto com os outros estilos CSS cole esse trecho:

.CollapsiblePanel {
padding: 3px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.CollapsiblePanelTab {
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-style: italic;
}
.CollapsiblePanelContent {
padding: 5px;
background-color: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
font-weight: normal;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.CollapsiblePanelTab a {
color: black;
text-decoration: none;
}
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #FFCC99;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;}
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
text-decoration: underline;
color: #0000FF;}

Para modificar as cores que usamos veja como formatar texto, modificar bordas e fazer botões e modifique os estilos CollapsiblePanelContent(conteúdo), CollapsiblePanelOpen .CollapsiblePanelTab(título quando o conteúdo é mostrado) e CollapsiblePanelTab (link para mostrar o conteúdo), reparem que usamos o código as bordas separadamente para cada lado(left, right, top, bottom) isso para fazer parecer uma caixa quando expandimos o menu, então modifique como desejar. Então clique para salvar, por enquanto ainda não aparecerá nada no seu blog.

Entre na pagina layout, adicionar gadget, html/javascript e cole esse código:

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div tabindex="0" class="CollapsiblePanelTab">título do menu</div>
<div class="CollapsiblePanelContent">Conteúdo Oculto</div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
//-->
</script>


Onde está escrito título do menu é o texto que aparecerá no seu blog, quando alguém clicar nele vai abrir o resto do menu e mostrar tudo que tem dentro daquele menu. Portanto onde escrevemos conteúdo oculto você deve colocar o que desejar links, imagens, enfim qualquer coisa, apenas no caso de imagens cuidado com a largura da coluna do blog onde estará o menu, pois se a imagem for mais larga que o blog provavelmente terá problemas.

Então se for usar mais de desses menus com conteúdo oculto não precisa apenas repetir a ultima parte do código que é para ser colocada pela pagina layout, o restante que fizemos na pagina editar html não precisa de alterações. Mas necessário fazer alguns ajustes, repare que no inicio aparece:

<div id="CollapsiblePanel1" class="CollapsiblePanel1">

e no final:

var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});

Onde tem CollapsiblePanel1 continue a contagem modificando no inicio e no final para CollapsiblePanel2 e assim por diante, tome cuidado para não se esquecer de alterar nenhum deles(um no começo e duas vezes no final), outro detalhe é cuidado para não confundir a letra l com o numero 1 quando for modificar a contagem, aconteceu comigo quando estava escrevendo essa explicação. E assim poderá usar quantas vezes quiser o menu expansível no seu blog. Você poderá ver isso em funcionamento em nossa página de duvidas frequentes.

quinta-feira, 23 de julho de 2009

Adicionar Colunas

Eu vou ensinar aqui a adicionar uma nova coluna ao blog,vou mostrar 3 tipos de posicionamento de colunas,então vamos começar:

Vá no codigo do seu template

Sidebar - Main - Sidebar:

*Primeiro Passo (para todos os casos)

Encontrem este trecho do código do template:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width:800px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 190px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
width: 190px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Outer-wrapper mostra a medida total que terá seu template, a largura dele. A largura das colunas nunca pode exceder a largura da Outer-wrapper, ou uma coluna 'descerá' para dar espaço à outra. A primeira coisa a fazer é alterar o valor em width que está em Outer-wrapper. No Mínima, a largura é só de 660px. Se você deseja tres colunas no seu template (sidebar-main-sidebar), coloque pelo menos 800px de largura. Agora copie todo o trecho que se refere à newsidebar e cole abaixo do sidebar, como mostrado acima, em vermelho. Note que destaquei onde está float: left; Para que uma coluna fique à direita e outra à esquerda da coluna do post (sidebar-main-sidebar), sidebar-wrapper e newsidebar-wrapper precisam estar em lados opostos.

Muito bem. Agora determine as medidas que terão as colunas. Não se esqueça que o valor total não poderá ultrapassar o valor da Outer-Wrapper, incluindo aí bordas e espaçamento entre as colunas.

*Segundo Passo (para todos os casos)

Agora desça a página até encontrar este trecho do html (obs: desmarque onde está Expandir Modelo de Widget, para facilitar)

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>


<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>



<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
/<b:section>
</div>


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
< /div>

Acrescente a parte em vermelho, que se refere a coluna criada, antes de main-wrapper. Por que antes? Por que está determinado que esta coluna ficará à esquerda da coluna do post (foi determinado lá em cima, em float: left ok?), ou seja : newsidebar-main-sidebar.

Main - Sidebar - Sidebar:

Agora vamos deixar a coluna do post à esquerda e as sidebars à direita, uma do lado da outra.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 800px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
border: 1px solid $bordercolor;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 190px;
border: 1px solid $bordercolor;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
width: 190px;
border: 1px solid $bordercolor;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Aqui basta determinar em Float a mesma posição para as sidebars, como está em vermelho e depois seguir o segundo passo ensinado acima.


Main - Sidebar sobre Sidebar

Determine que as duas sidebars fiquem do mesmo lado (right ou left, em oposição a coluna do post, claro), apenas altere o valor de Outer-Wrapper para que caiba apenas a coluna do post e uma coluna lateral, o que obrigará a segunda coluna a descer.
Por exemplo: Determine o valor em width de Outer-Wrapper para 800px, para Main-wrapper 550px e para a Sidebar (para as duas, Sidebar e Newsidebar) 220px. A falta de espaço obrigará uma das colunas a descerem. Mas não se esqueça de detrminar que as duas colunas fiquem juntas à direita ou esquerda, ou uma delas descerá sob a coluna do post ok?

Adicionar aos Favoritos

Botão para as pessoas adicionarem seu blog/site aos favoritos, no FireFox e Internet Explorer, o código funciona para os dois navegadores e outros não muito conhecidos.

Como botão:

<script language="JavaScript">
function addFav(){
var url = "URL DO BLOG";
var title = "TÍTULO DO BLOG ";
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if(window.opera && window.print){
var mbm = document.createElement('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();
}
else if(document.all){window.external.AddFavorite(url, title);}
}
</script>
<a href="javascript:addFav()" title="Adicionar aos Favoritos"><img src="http://img65.imageshack.us/img65/8273/semttulo1qk6.png" width="150" height="30"></a>

Obs:Você pode mudar o link da imagem por uma outra de seu agrado

Como link:

<script language="JavaScript">
function addFav(){
var url = "URL DO BLOG";
var title = "TÍTULO DO BLOG ";
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if(window.opera && window.print){
var mbm = document.createElement('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();
}
else if(document.all){window.external.AddFavorite(url, title);}
}
</script>
<a href="javascript:addFav()" title="Adicionar aos Favoritos">Adicionar aos Favoritos</a>

Aparencia das Colunas

Para fazer alterações de bordas e planos de fundo nas colunas do template, procure no codigo do template:

#main-wrapper {
background-color:#FFFFFF;
border: 2px solid $bordercolor;

margin-left: 0px;
width: 400px;
float: left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
background-color:#FFFFFF;
border: 2px solid $bordercolor;

margin-right: 0px;
width: 165px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Onde #main-wrapper é a coluna de postagem e #sidebar-wrapper a do perfil.
Se você deseja colocar uma cor como plano de fundo da coluna use background-color: e o código da cor. Se deseja uma imagem, coloque background: url(endereço da imagem) repeat;

Em border você estabelecerá, como vimos em Header, a largura, cor e textura da borda. Aqui valem os mesmos procedimentos. Se você deseja colocar borda somente no topo e em uma das laterais, por exemplo, é só colocar:
border-top: 1px solid #00000; (largura em pixels e cor, somente como exemplos)
border-left: 1px solid #000000;

Assim a coluna terá borda somente no topo e do lado esquerdo. Se deseja borda em toda volta da coluna é só colocar:
border: 1px solid #000000; (sem precisar estabelecer onde a borda deve aparecer.)

Width estabelece a largura da coluna.

Alterar Largura das Colunas

Procure no seu código HTML as seguintes tags:


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}


#main-wrapper {
background-color: #F3F3EB;
border-top: 3px solid $bordercolor;
border-left: 3px solid $bordercolor;
border-bottom: 3px solid #43433B;
border-right:3px solid #43433B;
margin-left: 5px;
width: 550px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
background-color: #F3F3EB;
border-top: 3px solid $bordercolor;
border-left: 3px solid $bordercolor;
border-bottom: 3px solid #43433B;
border-right:3px solid #43433B;
margin-right: 0px;
width: 250px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Tudo o que está contido em #main-wrapper se refer a coluna do post. Assim, para aumentar ou diminuir a largura desta coluna você deve alterar os valores que estão em WIDTH.

Tudo o que está contido em #sidebar-wrapper se refere a coluna lateral do template (no caso de um template com uma coluna em cada lateral, aparecerá duas vezes). Aqui também os valores de WIDTH devem ser alterados. Cuidado para não desconfigurar completamente o template! Obedeça as dimensões que estão contidas na tag acima, em #outer-wrapper , sem ultrapassá-la!

Alterar Coluna

Vá no codigo do seu template e procure por:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Modifique o valor de width para um que corresponda à medida do template.

Bloquear Copia de Imagem

Claro que qualquer um pode dar um print screen e salvar uma imagem, ou usar qualquer outro recurso para isso, por que existem muitos. Mas, para travar o botão direito do mouse e impedir que se salve uma imagem da maneira mais simples é só adicionar este código ao endereço da imagem:

oncontextmenu="return false"

Ficando assim:

<img src="endereço da imagem" oncontextmenu="return false">

Colocar Rolagem no Post

Para colocar uma barra de rolagem nas postagens vá até a pagina editar html procure por:

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

e coloque essa linha:
height: 400px;

O numero 400 é o espaço na vertical que suas postagens ocuparão, esse também será o tamanho da barra de rolagem (altura).

Depois na ultima linha tire a palavra "hidden" e coloque auto.

Isso vai fazer aparecer a barra de rolagem nas postagens, depois você ajusta o numero 400 do tamanho que desejar.

Colocar Chat no Blog

Para colocar um Chat no blog entre no seguinte site: http://xat.com

Clique em "Make a chat Box".

Clique na imagem de fundo de sua preferência.

Em "Width" coloque a largura do chat. (Você pode ir testando os valores clicando em "Update & Getcode")

Em "Height" coloque o comprimento.

Clique em "Update & Getcode".

Copie o código e cole em "Adicionar elemento um elemento a pagina>HTML/JavaScript" no seu blog. (Posicione o elemento acima ou depois dos posts)

Você tambem pode postar o Chat e depois colocar o link do Post no Menu.

Colocar Meta Tags

Se você quer inserir Meta Tag no seu blog (o que facilita os sites de busca a te encontrarem), coloque no seu blog o seguinte código, logo depois de:

<title>Nome do Seu Blog</title>

Coloque este:

<meta content='COLOQUE AQUI O QUE QUER QUE APAREÇA SOB O TITULO DO SEU BLOG NOS MECANISMOS DE BUSCA' name='description'/>
<meta content='COLOQUE AQUI AS PALAVRAS CHAVES QUE DESCREVEM SEU BLOG SEPARADAS POR VIRGULAS SEM ESPAÇOS' name='keywords'/>
<meta content='index,follow' name='robots'/>


Depois de inserir o código, visualize e estando tudo ok, salve o template.

Colocar Ads no Post

Pessoal no Blogger é bem simples colocar um banner do adsense dentro do Post, isso aumenta seu CTR consideravelmente.
E como todos sabem quanto maior o CTR mais rendimento.

Na edição do html assinalar a opção expanded widgets. Isso faz com que apareça todo o conteudo do html.

Agora basta encontrar a tag <p><data:post.body/></p>.

Agora basta colocar o código abaixo entre as tags <p> e <data:post.body/>

<table align="'left'"><tr><td align="'left'">SEU CÓDIGO ADSENSE</td></tr></table>

Reparem que vcs podem alinhar o banner apenas alterando a propriedade align

PS.: CTR --> Taxa de cliques nos banners

Desabilitar Botão Direito

É só colocar na sidebar na opção javascrip/html siga os passos:

Agora entre em layout -> modelo -> elementos da página -> Adicionar um elemento de página -> HTML/JavaScript e adiciona.

Codigos:

<SCRIPT language=JavaScript>

<!--

function click() {

if (event.button==2) {

alert('O MINISTÉRIO DOS WEBDESIGNER ADVERTE!')

alert('COPIAR O CONTEÚDO DA PÁGINA DE ALGUÉM É PREJUDICIAL A SAÚDE!')

}

}

document.onmousedown=click

// -->

</SCRIPT>

Exibir Link

Este é um dos Hacks para Blogger - Blogspot mais pedidos de todos os tempos: Posts Resumidos na Home Page do Blog, com link de “Continue Lendo” ou “Leia Mais” no final do resumo.

Existem outros hacks que cumprem a mesma função, de diferentes formas; mas depois de vários testes, este é o melhor, na minha opinião. Ele permite que você resuma somente os posts que desejar, como você já deve ter visto por aqui.

Vamos ao Hack! Preste atenção, pois ele está dividido em 3 partes:

I - Configurando o script
II - Modificando o Template
III - Configurando o Editor do Blogger

Na Primeira Parte, você deve escolher entre duas opções: inserir o script diretamente no seu template, ou hospedar o script externamente. Siga somente as instruções para a opção que você escolheu!

A Segunda Parte e a Terceira Parte se aplicam na íntegra à todos os casos, sem importar qual opção você escolheu na Primeira parte.

I - Primeira Parte - Configurando o Script

Devido aos problemas recentes com os scripts dos hacks, vou explicar aqui duas formas de implementar o “Leia Mais”: inserindo o script diretamente no seu template, ou hospedando o script externamente.

1º Opção - Inserindo o script diretamente no seu template

1 - Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.

2 - Procure a tag </head>.

3 - Copie TODO o código mostrado nesta página e cole-o logo ANTES da tag </head>.

4 - Dê um preview, veja se está tudo certinho, e salve o template. A esta altura, você ainda não deveria ver nenhuma mudança no visual do blog.

Agora, você deve passar à II - Segunda Parte - Modificando o Template

2º Opção - Hospedando o script externamente

Por favor, só escolha esta opção se você tem alguma idéia de como fazer isto. Se este método lhe parecer muito complicado, é melhor optar pela 1º opção, e pronto.

1 - Faça o download do script: clique neste link com o botão direito do mouse, e salve o arquivo LeiaMais.txt no seu computador.

2 - Mude a extensão do arquivo de txt para js, no próprio Notepad. Simplesmente abra o arquivo, selecione “Guardar como” e substitua LeiaMais.txt por LeiaMais.js

3 - Faça o upload do arquivo em sua conta. Uma opção grátis para hospedar seus arquivos é o Google Pages.

4 - Coloque a URL do seu script no seguinte código:

<script src=’Insira aqui a URL do script’ type=’text/javascript’/>

Por exemplo: se eu estivesse hospedando o script na minha conta do Google pages, a URL seria:

<script src=’http://nospheratt.googlepages.com/LeiaMais.js’ type=’text/javascript’/>

5 - Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.

6 - Procure a tag </head>.

7 - Copie o código do script, com sua URL, e cole-o logo ANTES da tag .

8 - Dê um preview, veja se está tudo certinho, e salve o template. A esta altura, você ainda não deveria ver nenhuma mudança no visual do blog.

Agora, você deve passar à II - Segunda Parte - Modificando o Template

III - Terceira Parte - Configurando o Editor do Blogger

1 - Ainda na sua conta do Blogger, vá até Configurações -> Formatação.

2 - Bem em baixo, Você verá a caixa vazia do Modelo de postagem. Copie e cole as seguintes linhas dentro dessa caixa:

Digite aqui o resumo do post
<span id="fullpost">
Digite aqui o resto do post
</span>

É melhor copiar e colar este código, para não correr o risco de inserir espaços ou caracteres que impediriam o hack de funcionar. Salve as configurações.

3 - Agora, quando você entrar em “Criar Postagem”, a caixa mostrará onde você deve digitar o resumo do post (a parte que você deseja que apareça na Home, antes do link “Leia Mais…”) e onde digitar o resto do post (a parte que aparecerá somente na página do post).

Atenção: as tags <span id="fullpost"> e </span> devem permanecer intactas para que o hack funcione! Antes de publicar seu post, certifique-se de que elas não foram alteradas.

E se eu não quiser resumir um post?

Simplesmente, quando for escrever o post, delete completamente o texto que aparece na caixa do texto da postagem. Não se preocupe; cada vez que você for criar um novo post, o texto que indica onde digitar o resumo e o resto do post reaparecerá.

Você escolhe se quer resumir o post ou não, e o link de Leia Mais só aparecerá nos posts que foram divididos com o <span id=”fullpost”>. Não é genial?

Observação: o Ramani avisa no post original do hack que se você clicar no link “Postagens Mais Antigas”, é possível que o link “Leia Mais” apareça mesmo em posts antigos que não foram divididos seguindo o hack. Ele explica que este é um problema conhecido, para o qual ele ainda não encontrou solução.

Eu acho que este é um preço pequeno a pagar, para ter seus posts resumidos/com sumário e link “Leia Mais” no Blogspot. Eu mesma não vi esse problema aqui no Blogando, pelo menos ainda. Mas a decisão é sua, é claro.

Observação 2: Se você usar este hack, lembre-se de incluir um link ao Hackosphere (o blog do autor do hack) na sua sidebar ou num post. É o mínimo que podemos fazer para agradecer, não é mesmo?

Fazer Baner no Fotoshop

E ae gente!
Vou mostrar pra vocês, neste Tutorial, como fazer GIFs no Photoshop.

Mas... o que é uma GIF?
Gif é uma imagem, mas animada. É como um pequeno vídeo do Windows Media Player...

Em qual programa podemos fazer GIFs?
Em muitos, mas aqui vou mostrar como afzer GIFs no Photoshop... Na verdade, é no Image Ready, que vem junto com o PS.

Bom, vamos começar...

PARTE I - baixando o Photoshop

Antes de tudo, vc tem que ter Photoshop

Vá no site

http://baixaki.ig.com.br/download/Adobe-Photoshop.htm

e baixe o demo.
Instale o PS (claro) e comece a parte II.

PARTE II - fazendo a GIF

Primeiro, decida do que é a sua GIF. Já vá tendo as idéias pra ela.
Então abra o Paint ou o Photoshop e faça a fake da primeira frame...
Mas o que é frame?
Frame é um quadrinho da GIF.
Se a GIF é, por exemplo, assim:

.
..
...

Cada linha é uma frame.

Continuando, faça as frames e salve-as em uma pasta SÓ COM AS FRAMES DA FAKE com o nome de 001, 002, 003... Sempre no formato PNG. NÃO SALVE EM GIF!!

Depois que acabar, abra o Image Ready. Ou abra o Photoshop e vá em "File/Edit in Image Ready".


Vá em "File/Import/Folder as Frame" e selecione a pasta onde estão as frames da sua GIF.



Ele vai pegar todas as frames e fazer sua GIF.



Pronto, sua GIF está feita! Aperte o botão Play (>) na Tab animation para ver como ficou. Otimo, non? "Mas espera aí Gaia, tá muito rapido!!"
Ahá! Então na mesma tab Animation, embaixo das frames, há escrito "0 sec v".



Clique nesse "v" e selecione a velocidade adequada para os quadrinhos, ou clique em "Other" para definir uma outra velocidade. Se todos forem uma mesma velocidade, aperte no 1º quadrinho, pressione ALT, clique no ultimo quadrinho e ajuste a velocidade.



PARTE III-salvando a gifs

"Agora, como salvar, Gaia?"
Vá em "File/Save as" e salve-a em .PSD
Depois vá em "File/Save Optimizided as" e salve em .GIF

Pronto, acabamos a parte basica... Mas e se você quiser fazer efeitos?
Selecione as frames que deseja fazer o efeito com CTRL e aperte neste icone:



Há três tipos de tweens (efeitos):

Position: Vamos supor que vc queira fazer um GIF de um sol indo de um lado pro outro da GIF. Use esta opção e o IR criará frames assim:*
*
*
*
etc...

Opacidade: se você quiser fazer um efeito de uma coisa sumindo e desaparecendo, esse é o seu efeito.

Effects: lol, esse eu não sei XD Depois selecione quantas frames você quer adicionar. Mais frames significa mais perfeição, mas fica mais lenta a GIF.

E aqui uma GIF minha recente, usando tudo que tenho direito:



Depois de salva a gif entre no imageshack e procure por sua gif e depois clique em "host it! "
ai vc espera upa a imagem e ai pega o codigo " Hotlink for Websites " e edita no começo do codigo o link: http://imageshack.us pelo link que vai dar o seu banner,ou seja,coloque o link de um site,comunidade,etc.

Fazer Menu com Rolagem

O código para fazer esse menu é dividido em duas partes:
O estilo CSS do botão que deve ser colocado junto com o restante do CSS do seu site:


.botao a, .botao a:visited{
width: 220px;
color: #000000;
text-decoration: none;
padding-top: 3px;
display: block;
padding-bottom: 3px;margin-bottom: 1px;
background-image: url(Imagem do botão);
font-family: "Comic Sans MS";
font-size: 10pt;
text-align: left;
text-indent: 6px;
}
.botao a:hover{
color: #0000FF;
background-color: #FFFFCC;
background-image: url(Imagem do botão quando o mouse estiver sobre ele);
}


E a outra parte que deve ser colocada onde o menu irá aparecer, no caso do Blogspot isso é na pagina layout, adicionar elemento, html/javascript.

<div style="width: 240px;height: 295px; overflow: auto;border: 1px
solid #999999">
<div class="botao">
<a href=”Endereço do Site” target="_blank">Nome
do Site</a>
</div></div>

Na parte do CSS a linha background-image: url(Imagem do botão); e background-image: url(Imagem do botão quando o mouse estiver sobre ele), você deve hospedar a imagem em algum site e colocar a url aqui. Se preferir pode usar uma cor de fundo trocando essas linhas por background-color: #CCCCCC; escolhendo a cor que desejar, caso use uma cor de fundo em vez de uma imagem sugiro que coloque bordas(adicione essa linha jundo com a outra border: 1px solid #333333;) está também pode ser de qualquer cor. Lembre-se de colocar a cor de fundo e borda nas duas partes do CSS. Sobre o tamanho pode ser alterado como você quiser: width: 240px é a largura do menu e width: 220px é do botão, quando fizer alterações faça nas duas larguras.

Fazer Menu Expansivel

Para ter um menu que se expande, copie o código abaixo, vá até o HTML do seu blog, procure pela tag <head>

Agora cole o codigo abaixo depois da tag <head>

<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>
<style type='text/css'>
#dolphincontainer{position:relative;height:43px;color:#f06214;background:#ffffff;
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:34px;font-size:12px;text-transform:uppercase;
font-weight:bold;background:#F06214 url() repeat-x bottom left;
padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#ffffff;text-decoration:none;
padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#000000;
background:transparent url() repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#FCD9B6;
background:#ffffff url() no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 18px 0 0;width:auto;
background:#805E5E url() no-repeat top right;height:33px;}
</style>

Agora clique em "Elementos de página e depois em "Adicionar novo elemento de página" ao abrir a tabela, clique em HTML/Javascript

Agora pegue o segundo código:

<a href="javascript:void(0);" onclick="expandcollapse('favoritos')"><img border="0" src="
http://img175.imageshack.us/img175/3509/1favoritosbrancobutoniud1.jpg"/></a><br/>
<ul id="favoritos" class="texthidden">
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
</ul>

Modifique onde estão escrito "favoritos" pelo nome do menu que você quiser,mas atenção tem que mudar e escrever igual nos dois lugares onde estão escrito"favoritos".

Onde esta em amarelo você pode modificar por link de outra imagem

Fazer Menu Horizontal

1ºA primeira parte do código deve ser colocada de preferência logo depois de tudo que se refere a header.Então vá até o codigo do seu template e procure pelo seguinte codigo:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}


#navigation{
height:40px;
width: 890px;
line-height:2.9em;
margin:-12px 10px 10px 5px;
background: url(ENDEREÇO DA SUA IMAGEM) repeat-x;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}

2ºAgora adicione o codigo em vermelho como mostra o exemplo acima.

3ºAgora vamos ao segundo codigo,encontre o seguinte trecho no codigo do seu template:

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a>
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='TPBB (Header)' type='Header'/>
</b:section>
</div>

<!-- Não esqueça de colocar aqui os seus links!!-->

<div id='navigation'>
<ul>
<li><a href='inserir link do seu blog' title=''>Home</a></li>
<li><a href='inserir link aqui' title=''>Artigos</a></li>
<li><a href='inserir link aqui' title=''>Fotos</a></li>
<li><a href='inserir link aqui' title=''>Links</a></li>
<li><a href='inserir link aqui' title=''>Forum</a></li>
<li><a href='inserir link aqui' title=''>Outros Sites</a></li>
<li><a href='inserir link aqui' title=''>FAQ</a></li>
<li><a href='inserir link aqui' title=''>Contato</a></li>

</ul>
</div>


4ºAdicione o codigo vermelho como aparece no exemplo acima.Onde esta 'insirir link aqui' é opnde você irá colocar os links.E as partes em amarelo do codigo acima você pode mudar de nome pelo que você quer que apareça.

Bom eras isso espero ter ajudado.

Hack de Post Recente

Instalando o Hack de Posts Recentes no Blogger Clássico

1 - Entre na sua conta no Blogspot. Escolha o blog que quer editar: clique em Modelo->Editar HTML.

IMPORTANTE: sempre faça back up antes de modificar seu layout. Copie todo o código HTML num arquivo TXT, e salve uma cópia em seu HD.

2 - Procure esta tag:

<$BlogItemBody$>

3 - Adicione este código APÓS a tag <$BlogItemBody$> :

<ItemPage>
<script language=”Javascript”
src=”http://www.anniyalogam.com/scripts/relatedposts-blog.php?
url=<$BlogItemPermalinkUrl$>&blog=<$BlogURL$>”>
</script>
</ItemPage>

4 - Salve as alterações. Pronto!

Se tudo correr bem, a lista de Posts Relacionados aparecerá - somente nas páginas de postagem - logo depois do corpo do post. Caso não existam posts que preencham as condições da busca que eu expliquei acima, não aparecerá nada.

O único problema que eu vejo que pode haver com este hack é o idioma; o hack foi desenvolvido em inglês, e ignoro como o critério para “palavras triviais” se aplica em outros idiomas. Como eu disse, vocês terão que experimentar e me contar. Espero que este hack seja útil!

Instalar Templates

Para mudar o visual do novo blogger é só seguir os passos abaixo:

Primeiro vc tem que baixar um da web,em breve a comu tera um blog ai tera varios templates para vcs baixarem mas por enquanto vamos ao tutorial.

Antes de mais nada, se você tem widgets(acessorios) no seu blogger guarde os código de cada um deles, no bloco de notas mesmo, para colocar depois no novo template.

Vá na palheta "MODELO" depois na palheta "Editar HTML"

Agora temos duas formas de instalar o layout.

Primeira forma: carregar o template do HD.

Está é a opção mais segura. Vá em "browse", selecione o arquivo xml no seu pc e depois de "carregar".



Segunda forma: Copiar o Código do template diretamente.

Primeiro abra o template que está em seu pc no bloco de notas. Depois clique na opção expandir widgets.



Agora é só apagar todo código que está dentro do HTML, e colocar o novo que você abriu pelo bloco de notepad.

Mudar a Siderbar

Na Maioria dos Templates a sidebar vem do lado direito, Se você quiser muda-la de posição é simples.

Apenas mude isso:

Procure no HTML a tag "#main" (Pode haver mais de uma)

E altere

float:left;

para

float:right;

E procure pela tag "#sidebar" e altere

float:right;

para

float:left;

Ou seja a que estava float:right; (direita) no caso o menu, foi alterado para float:left; (direita) e vise versa.

Mudar a Cor de Fundo

Nem todos os templates tem a opção de Mudar a cor do fundo do menu, e do conteúdo individualmente, como por exemplo o template minima.

Então para isso procure no HTML do seu template por:

#sidebar-wrapper { - Lembrando que esse nome varia de Template pra template, mas a palavra sidebar tem em todos (Que significa no blog "MENU").

#main-wrapper { - Lembrando que esse nome varia de Template pra template, mas a palavra main tem em todos (Que significa no blog "POSTS").

Logo após essas duas tags você encontra a linha:

background:

Se não tiver é só colocar, e junto coloque a cor desejada, exemplo:

#main-wrapper {
background: black;

Não esque de colocar o ";" ponto e virgula depois da cor.

E no lugar da palavra black você pode inserir o código exadecimal da cor de sua preferência, não esquecendo do simbolo # antes.

Postar Codigo HTML

Para postar códigos html/javascript no post sem que ele seja 'interpretado' pelo navegador, ou seja, postar o código puro, basta substituir todos os símbolos < e > por &lt; e &gt;

Exemplo: Para conseguir postar o código de imagem aqui, sem que a imagem apareça, coloco:

&lt;img src="endereço da imagem"&gt;

Sem isso, apareceria a imagem (havendo um endereço real) ou absolutamente nada, já que no exemplo não existe um endereço de imagem real.

Quando publicado o post, aparecerá o código html puro, assim:

<img src="endereço da imagem>

Outra forma de postar codigo html é usar um javascript auto executavel feito por mim

basta você começar uma nova postagem ai digita todo o seu texto e coloca os codigos que você quer que apareça na postagem,não use nenhum outro codigo html(negrito,sublinhado,etc.)deixe para enfeita o seu vodigo mais tarde

depois de fizer toda a postagem copie o codigo abaixo e cole na barra de navegação(la onde fica o endereço do blogspot,onde você digita o endereço dos sites)
e aperta enter,automaticamente todos os caracteres com < e > vao ser substituidos por &lt; e &gt;

Codigo:

Redimensionar Imagem

Para redimensionar imagens hospedadas no blogger
basta quando você for fazer upload escolher o tamanho e em que posição ela irá ficar

Mas se você quer redimencionar um imagem de outro servidor ai você vai ter que adicionar ao codigo da imagem o seguinte codigo:

width="150"

Exemplo:

<img src="http://img529.imageshack.us/img529/3250/bloggerlogo1wf7.png" border="0" width="150"/></a>

Acima eu ja adicionei o width="150",você pode mudar a numeração de width pelo tamanho que você quiser.

Retirar Barra de Navegação

Basta adicionar o seguinte código antes de fechar a tag HEAD do template:

Retirar Nume. Dos Marc.

Vá no HTML do seu blog, clique em Expandir Modelo de Widgets e procure por:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<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>

Apague o que está em negrito, visualize e se estiver ok (ou seja, se tiver sumido a numeração), salve. OBS: aqui no exemplo, a widget Marcadores está seguida de <div id='sidebar-wrapper'>, mas não significa que esteja assim no seu código. Também não significa que o título da sua widget seja Marcadores: faça a busca pelo título que escolheu.

Retirar Bordas

Em alguns templates as imagens postadas ficam com bordas, caso queira tirar essa borda altomaticamente de todas as imagens, faça o seguinte:

Procure as seguintes linhas no HTML do seu template:

.post img {
padding:4px;
border:1px solid $bordercolor;
}

E troque border:1px por border:0px

Assim a borda ficará com tamanho minimo.

Retirar Titulo

Para tirar o Título do blogger basta ir em Layout > Modelo > Editar html.

Agora encontre o seguinte código no template:

<b:widget id="'Header1'" locked="'true'" title="'TITULODOSEUBLOG(Cabeçalho)'" type="'Header'/">

Agora delete ele do template.
Teste se ocorreu tudo certo clique em salvar.

Observação: O título não saira da barra de título do navegador.

Tradutor

Para colocar um tradutor no seu blog, como o que eu tenho aqui, copie o código abaixo, vá em Modelo->Inserir Elemento de Página-> e escolha HTML/JavaScript e cole o código, salvando.

<center><img src="http://img176.imageshack.us/img176/6091/84056383at1.png"/></center>

<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">

<input value="PT" name="wl_srclang" type="hidden"/>

<select style="font-size: 70%; width: 160px;" name="wl_trglang">

<option value="EN"/>Português - Inglês

<option value="FR"/>Português - Francês

<option value="DE"/>Português - Alemão

<option value="IT"/>Português - Italiano

<option value="PT"/>Português - Português

<option value="RU"/>Português - Russo

<option value="ES"/>Português - Espanhol

</select>

<input value="ENDEREÇO DO SEU BLOG" name="wl_url" type="hidden"/>

<input style="font-size: 70%; width: 50px;" value="Traduza" type="submit"/>

</form>


A imagem está hospedada no TinyPic, mas é sempre bom guardar uma cópia no seu computador.

terça-feira, 21 de julho de 2009

O que são Feeds e para que servem?

Através da pesquisa “Fala Leitor”, percebi que um grande número de leitores do Dicas Blogger não acompanha nossos posts via Feed. Quando comecei a blogar, eu também não me utilizava dessa poderosa ferramenta, por puro desconhecimento de suas funções e acabava ficando por fora das novidades da Blogosfera. Através dos Feeds, vocês poderão se inteirar de tudo que rola nos seus blogs e sites favoritos, em tempo real. A fim de colaborar com os blogueiros iniciantes, resolvi fazer um post explicando como utilizá-los.

O que são Feeds?

Segundo a Wikipédia:

O termo Feed vem do verbo em inglês "alimentar". Na Internet, este sistema também é conhecido como "RSS Feeds" (RDF Site Summary ou Really Simple Syndication).

Na prática, Feeds são usados para que um usuário de internet possa acompanhar os novos artigos e demais conteúdos de um site ou blog sem que precise visitar o site em si. Sempre que um novo conteúdo for publicado em determinado site, o "assinante" do feed poderá ler imediatamente.

Atualmente há 3 principais especificações para a criação de arquivos Feed:

  • RSS 1.0 - RDF Site Summary 1.0 (RSS-DEV).
  • RSS 2.0 - Really Simple Syndication 2.0 (Userland).
  • Atom (IETF).

As versões RSS 1.0 e RSS 2.0 são diferentes, possuem duas organizações que trabalham separadas; isto ocorreu porque após a finalização do grupo de estudos do RSS da Netscape duas organizações continuaram o desenvolvimento separadamente, o que originou duas versões diferentes. A especificação Atom (RFC-4287) é a única publicada por um orgão normatizador, no caso a IETF.

Resumindo: arquivos Feeds são listas de atualização de conteúdo de um determinado site, escritas com especificações baseadas em XML. Os usuários incluem o link dos arquivos Feed em seu programa leitor de Feed (agregador) e recebem, sem visitar o site, as informações sobre as atualizações que ocorreram. Também é possível distribuir arquivos de áudio (podcasts), imagens e vídeo.

Como criar um Feed?

Nós, usuários do Blogger, já temos à nossa disposição os seguinte endereços:

http://seublog.blogspot.com/feeds/posts/default (Feeds)

http://seublog.blogspot.com/feeds/comments/full (comentários)

Mas o bom mesmo é criar ou queimar nosso Feed no FeedBurner, que nos fornecerá diversas opções de personalização e gerenciamento. Aguardem que, no próximo post, irei trazer um tutorial de uso e configuração. Por enquanto, leiam estes dois artigos:

O que o FeedBurner pode fazer pelo seu blog, by Interney

FeedBurner, by Dicas Blogger

Ao criar um Feed, podemos disponibilizá-lo com os posts completos ou parciais. Para uma melhor compreensão, leiam este artigo:

Vai de Feed completo ou parcial?

Como eu faço para assinar?

Você vai precisar de um programa que receba os feeds, também chamado de agregador. Existem opções offline (que você terá que instalar no seu pc) e as online(que você precisará estar conectado à internet para usar). Das opções online, temos:

  • Via Navegador

A maioria dos navegadores já trazem um leitor de feed embutido; é o caso do Firefox, do Internet Explorer e do Opera. No Google Chrome ainda teremos que aguardar e no Safari, eu desconheço, por nunca tê-lo utilizado.

Vou dar como exemplo o agregador do Firefox:

icone_feeds

Vejam que, ao final da barra de endereços, existe um ícone, que é o padrão de identificação dos Feeds de um site; para assinar, basta clicar sobre este ícone e escolher entre RSS ou ATOM, que na prática, dá tudo na mesma.

image

O Firefox irá, então, incluir o Feed na sua barra dos favoritos:

image

No Firefox, também é possível escolher qual agregador usar. Vá em ferramentas, opções e programas:

image

Eu uso o Google Reader, mas você pode manter o original do Firefox ou utilizar-se de outros programas.

E este é o agregador do Internet Explorer:

image

  • Via Web Site

Existem diversas opções, sendo os mais famosos, o Google Reader, o Bloglines e o Netvibes. Vou dar como exemplo o Google Reader porque estou mais familiarizada com ele, sem contar que podemos usar nossa (velha e boa) conta do Google.

Para adicionar um Feed/RSS, clique em adicionar inscrição e cole o endereço do Feed.

image image

Caso queira manter suas incrições mais organizadas, crie pastas para separar as diversas categorias de sites ou blogs que você acompanha. Para tanto, ao assinar o Feed, o Reader perguntará em qual pasta você deseja adicioná-lo; clique em “nova pasta” para criar uma.

image

  • Outras opções

Muitos blogs já trazem, em destaque, um convite para que os leitores assinem seus Feeds e que, geralmente,foram queimados no FeedBurner.

Clique com o botão direito sobre o link ou sobre o ícone do Feed que deseja assinar, copie o endereço e cole no seu agregador.

image image

Ou então, clique sobre o link ou sobre o ícone do Feed. Você será, então, direcionado à página padrão do FeedBurner.

image

Outro exemplo:

image image

Ah, Juliana, eu não quero usar um agregador, prefiro receber os artigos por email…Tá na mão!

Basta clicar sobre a opção “Via email” e se inscrever.

image

Moleza, não?

Recomendo a leitura dos seguintes artigos:

AdSense para Feed

Acompanhe os comentários do seu blog via Feed

Widget para Feeds

O que são feeds, by Template para você

Tudo sobre feed/RSS, by Mundo dos Blogues

Agregando Feeds no seu navegador, by Usuário Compulsivo

Seguidores

  ©Template by Dicas Blogger.

TOPO