Bloggueiros

Newsletters com Google Friends Connect

2010-06-22T12:00:00.015-03:00

O envio de newsletters (ou boletins informativos) é uma forma interessante para contatar os seguidores de seu blog. O Google Friend Connect permite a criação e envio de newsletters a seus seguidores, de acordo com o seu interesse.

Esta é uma das funcionalidades mais interessantes do Google Friend Connect: você pode enviar uma newsletter aos seus seguidores. É mais uma forma para você manter contato com os seguidores de seu blog, mantendo-os atualizados ou enviando avisos importante a eles. É um mecanismo que deve ser utilizado com cuidado: afinal, ninguém gosta de ver sua caixa de e-mails cheia de comunicações não solicitadas.

1. Logo no início dessa página, você verá que pode marcar a caixa “Peça que os visitantes se inscrevam imediatamente após o primeiro acesso.”. É interessante marcá-la para que seus seguidores possam decidir, no momento da inscrição, se irão ou não recebe suas newsletters.

2. Você pode também colocar um gadget em seu blog para que seus seguidores atuais façam a assinatura de sua newsletter. Isso é feito clicando na opção “gadget de inscrição de boletim informativo” nessa mesma tela. Você deve configura suas opções e publicar o código num gadget de “HTML/JavaScript”.

3. Escrever sua newsletter é simples: basta utilizar o formulário existente na própria página, no passo 1. Note que você pode (e deve!) colocar links para seu blog e também figuras para tornar a newsletter mais agradável. Se preferir, você pode escrever sua newsletter em um editor de HTML (como o Windows Live Writer) e colar o código HTML nesta página. No final do editor, há uma caixa para marcar caso você deseje mostrar em sua newsletter quem se tornou seguidor de seu blog recentemente.

4. No passo 2, você deve escolher quem receberá a newsletter que você está escrevendo. Você pode enviá-la para todos ou direcionar apenas para quem respondeu determinadas opções em sua enquete. Note que há um botão “Recalcular” que mostrará a você quantas pessoas receberão a newsletter com base no critério que você selecionar.

5. Quando sua newsletter estiver escrita e os destinatários escolhidos, basta clicar em “Visualizar e enviar boletim informativo”, no item 3. Na aba “Histórico do boletim informativo” você poderá acompanhar os boletins já enviados.

Este é outro entre os recursos mais importantes do Google Friend Connect. É também um recurso que deve ser utilizado com moderação: se você começar a encher seus seguidores de informativos que não os interessem, é bem provável que eles irão bloquear o recebimento dos próximos – o que pode ser feito através de um link na newsletter que ele recebe.

Adicionar o gadget de membros

2010-06-21T12:00:00.000-03:00

O primeiro passo para você passar a utilizar o Google Friend Connect em seu blog é adicionar o gadget de membros, que é onde seus visitantes poderão se cadastrar como seguidores de seu blog. Este gadget é muito parecido com o de “Seguidores” que está disponível na galeria do Blogger. A diferença é que neste você pode configurar o número de linhas de fotos que aparecerão – e também pode ser utilizado em blogs que não esteja no Blogger.

As instruções são bastante simples:

1. Escolha a largura que o gadget terá e o número de linha de fotos que serão exibidas.

2. Escolha as cores e a fonte desejadas para o seu gadget. À medida em que você as muda, você verá à direita como o gadget ficará.

3. Clique no botão “Gerar código” e copie o código HTML gerado.

4. Acesse www.blogger.com e entre na área de “Design” ou “Layout” de seu blog.

5. Adicione um novo gadget de “HTML/Javascript”.

6. Cole nele o código HTML copiado e clique em “Salvar”.

Pronto! Você já tem um gadget onde seus visitantes poderão seguir seu blog e os seus seguidores serão exibidos.

Como postar códigos HTML no blog?

2010-06-20T14:19:00.000-03:00

O site Blogcrowds, serve para você fazer conversão de um código HTML, para ser postado no corpo da postagem. É na verdade um conversor de códigos que serão aceitos no blogger, serve também para converter códigos do Adsense entre outros HTML, Scripts etc.
Para ver imagens explicativas clique em leia mais.

Farei um teste com um pequeno código HTML. Adicionarei a tag body e posteriormente cliquei em "Parse". Observe na imagem:

Primeiro passo...

Agora é só copiar o código que será gerado e postar no Editor Html do blog:

Copie e cole no corpo da página...

Pronto, agora é só copiar e postar em seu Editor Html do blogger. É muito bom, principalmente para utilizar o Adsense no corpo da postagem, basta converter e postar em alguma lugar do artigo. A dica é muito interessantes para blogs que postam muitos HTML, blogs de dicas e hacks entre outros. É muito mais simples postar HTML, teste você também!

Tornar o Seu Blog Compativel Com o IE 8

2008-03-29T20:21:00.000-03:00

Com o lançamento do Internet Explorer 8 Beta muitos se queixaram por problemas de compatiblidade no caso de alguns sites, sabemos que o programa ainda está em fase Beta ou seja ainda tem muito a ser corrigido no mesmo.

Foi encontrada uma solução para que o IE (Todas as Versões) torne-se compatível com seu site, confiram logo abaixo:

Basta para isso introduzir o seguinte código a seguir à tag no código HTML da página.

<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />

Adicionar coluna no template

2008-03-29T08:37:00.000-03:00

Você tem um template que adora e não está nem um pouco afim de trocar ele só para conseguir uma coluna extra...Ok, seus problemas acabaram! Vou explicar passo à passo como adicionar uma nova coluna no template.

Vamos nos familiarizar com o seguinte trecho do código do seu template (pode haver pequenas variações mas o básico é isso):

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

#main-wrapper {
background-color: #bgcolor;
margin-left: 3px;
border: 1px solid $bordercolor;
width: 468px;
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: #bgcolor;
border: 1px solid $bordercolor;
margin-right: 0px;
width: 210px;
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 Outer-Wrapper contém tudo o que está no template, main-wrapper contém a coluna do post e sidebar-wrapper contém a coluna lateral.
O que vamos fazer é adicionar outra coluna colando logo abaixo de sidebar, este código:

#newsidebar-wrapper {
background-color: #bgcolor;
border: 1px solid $bordercolor;
margin-left: 0px;
width: 210px;
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 */
}

Não precisa ter necessariamente background e border, isso vai à gosto do freguês...mas o resto, tem que ser tin-tin por tin-tin o que está aí. Agora atenção para as medidas. A soma da largura do post mais as duas sidebar tem que ser menor do que o valor width de Outer-Wrapper. Não esqueça de somar bordas e o espaçamento que talvez você deseje que tenha entre as colunas. Vá testando e visualizando até ficar bom (e recomendo visualizar em navegadores diferentes para não ter depois que ouvir um amigo dizer que seu template é um horror!).
Mas, antes de visualizar, desça a página até encontrar esta parte do código:

<div id='content-wrapper'></div>

e cole imediatamente abaixo este:

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

É isso. Mas, veja bem, se a sua sidebar está a esquerda, a nova tem que estar a direta e vice-versa. Ou seja, atenção onde está float: right; float: left;
Assim, você irá acrescentar este último código que eu coloquei na ordem que deve aparecer no template. newsidebar-main-sidebar, ok? (por que aqui, neste exemplo, a nova coluna fica à esquerda)

É mais simples do que parece. Dúvidas é só mandar.

EDIT: Nem todo template tem a div Content-Wrapper. Se o seu template não tem, insira a nova coluna depois da div Header, assim:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
</b:section>
</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>
</b:section></div>

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

Ou ainda, após :

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

</div>

se o seu template conter este trecho.

Outra pop-up

2008-03-23T17:09:00.000-03:00

Eu até acho esta melhor porque não atraplalha tanto quanto a outra

<p>&amp;amp;amp;lt;p&amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;lt;/p&amp;amp;amp;gt;</p>

Janela pop-up

2008-03-23T16:57:00.000-03:00

Clique em continue lendo e crie sua janela pop-up

<p>&amp;amp;amp;amp;lt;br&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;gt;</p>

Marquee

2008-03-23T16:47:00.000-03:00

Esse é um efeito de imagem de muito legal para você por em seu blog, site ou onde você pretender. Sua mensagem ou imagem poderá ir para várias direções.

<p>&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;</p>

Widget de comentários recentes

2008-03-23T14:53:00.000-03:00

Este é um recurso muito bom porque você não vai mais ficar procurando os últimos comentários eles aparecem na ordem

Vá em Layout→ Modelo→ Elementos de página→ Clique em Adicionar um elemento de página→ Escolha tipo HTML→ Copie o código abaixo e cole na widget.

<ul>
<script style="text/javascript" src="http://duniaanda.googlepages.com/typoxp-recentcomments2.js">
</script>
<script style="text/javascript">
var numcomments = 5;
var showcommentdate = false;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
</ul>

►Substitua BLOG pelo nome do seu blog.
►Se quiser alterar o número de comentários altere o número 5 em [var numcomments = 5;] por um número maior ou menor.
►Se quiser a data dos comentários troque false em [var showcommentdate = false;] por true.
►Se não quiser que apareça o título do post troque true em [var showposttitle = true;] por false.

Criar link-me

2008-03-23T13:28:00.000-03:00

Aqui você já tem que ter uma imagem o que este post faz é criar o código para que outras pessoas coloquem seu banner no blog delas

<p>&amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;gt;</p>

Colocando frame no blog

2008-03-22T20:31:00.000-03:00

Muito simples só copiar a página no lugar do # continue lendo e veja um exemplo

<iframe name="palco" src="#" frameborder="0" height="500" scrolling="auto" width="490">&amp;lt;br&amp;gt;&amp;lt;/span&amp;gt;</iframe>

Favicon no blogger

2008-03-22T16:17:00.000-03:00

Favicon é aquele iconezinho, que aparece antes do endereço de um site ou blog. Para personalizar seu favicon,crie uma imagem em 16 x 16 pixels, salve em PNG e faça o upload no servidor de sua preferência.(Eu uso o ImageShack)Vá no html do seu template e procure pela tag <head>.
Insira o seguinte código:

<link href='http://SUAIMAGEM.png' rel='shortcut icon'/>

Trocando SUAIMAGEM pelo link fornecido pelo site de uploads. Salve o modelo. Simples, não?

Trocar template

2008-03-22T16:14:00.000-03:00

Dica basica coisa que quase todo mundo sabe mas se voce nao sabia com certeza foi uma mao na roda!
Para mudar seu template no blogspot entre em modelo, editar html, clique em arquivo e escolha o modelo que você salvou, fazendo o upload a seguir.

Será perguntado se concordamos com a exclusão de diversos widgets.
Infelizmente, ao trocar de template, diversos elementos de página são perdidos.

Consertando o erro Your template is invalid because the tag ‘div’ appears inside of the tag ‘head’.

2008-03-22T14:28:00.000-03:00

Como alguns sabem,alguns templates para o novo blogger começaram a aparecer problemas,aqui vai alguns deles:Mush Blue, Aspire, iTheme, Blogy Web 2.0, SummerFruit, FTW, e o sIMPRESS.

como tem muita gente ainda quebrando a cabeça,vou ajudar neste post a acertar o erro.

1:proucure no template esse código:Ele esta depois da tag head
2:copie ou recorte ele e cole depois da tag body
3:antes de salvar,clique em visualizar,se estiver tudo certo salve e pronto.

Widget de posts relacionados

2008-03-22T11:14:00.000-03:00

Você vai ter que mexer um pouco com o código do blog. Este hack inclui a criação de um widget que vai exibir a lista. Essa não é uma opção muito prática, visto que não é possível inserir o widget no corpo dos posts. Mas não se preocupe; eu consegui melhorar o hack, para que a lista seja exibida no final do post, antes dos comentários como em qualquer outra plataforma de blog.

Primeiro, Vamos ao Hack
Siga cada passo cuidadosamente, prestando atenção para não inserir espaços ou caracteres desnecessários. Depois de cada passo, visualize o blog para certificar-se de que está tudo certinho, e salve antes de passar ao próximo passo. Assim, será mais fácil saber onde foi que você errou, e poderá voltar atrás sem ter que fazer tudo de novo.
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>. Cole o seguinte código logo ANTES dela:

<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 r = Math.floor((relatedTitles.length - 1) * Math.random());

var i = 0;

document.write('<ul>');

while (i < relatedTitles.length && i < 20) {

document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] +

'</a></li>');

if (r < relatedTitles.length - 1) {

r++;

} else {

r = 0;

}

i++;

}

document.write('</ul>');

}

//]]>

</script>

3 - Salve o template. Clique na caixinha “Expandir modelos de widgets”.
4 - Procure o seguinte trecho de código (certifique-se de que é esse trecho exato, existem outros parecidos):

<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:loop>

</b:if>

5 - Cole este código ANTES do </b:loop> :

<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>

6 - O código deve ficar assim (a parte vermelha é o que você adicionou):

<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>

7 - Salve o template. Se você quer adicionar o widget de Posts Recentes no final da página de postagem, você precisa…
Permitir a Adição de Elementos às Postagens no Blog
• Permaneça na tab “Editar HTML”:
• NÃO clique em “Expandir modelos de widgets”. Se a caixinha estiver marcada, desmarque.
• Procure pelo código dos Posts; ele deve estar logo após o Header-wrapper. O código é este (ou alguma coisa muito parecida):

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='false' title='Postagens no blog' type='Blog'/>

</b:section>

</div>

Simplesmente substitua “no“ por “yes“. Salve as mudanças.
Fim da Adição de Elementos às Postagens no Blog
Agora podemos continuar com o hack de Posts Recentes.

Como Criar o Widget de Posts Recentes
1 - Vá até a tab “Elementos da Página”.
2 - Você verá que agora existe um link “Adicionar um elemento de página“, sobre o campo dos posts. Clique nesse link.
3 - Escolha “HTML/JavaScript”, clicando em “Adicionar Ao Blog”.
4 - Escolha um Título - “Posts Relacionados”, “Veja Também”, o que você quiser - e cole o seguinte código no campo do Conteúdo:

<script type="text/javascript">

removeRelatedDuplicates();

printRelatedLabels();

</script>

5 - Salve as alterações. Volte para a tab “Editar HTML”. Clique na caixinha “Expandir modelos de widgets”.
6 - Procure o código do widget que você acaba de adicionar. Uma forma fácil de encontrá-lo e procurar o título que você deu ao widget, e certificar-se de que ele está dentro de uma tag <b:widget>. É algo assim:

<b:widget id='HTML13' locked='false' title='Posts
Relacionados' type='HTML'>

<b:includable id='main'>

<!– only display title if it's non-empty –>

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

7 - Inclua as linhas em vermelho, EXTAMENTE ONDE ESTÁ INDICADO.

<b:widget id='HTML13' locked='false' title='Posts
Relacionados' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>
<!– only display title if it's non-empty –>

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

8 - Salve o template. Você já pode arrastar seu widget de Posts Recentes para onde queira; o lugar mais aconselhável é debaixo das “Postagens do Blog”. A lista só vai aparecer nas páginas de postagem - não na Home do blog.

Precisa-se de um ADM

2008-03-21T17:38:00.000-03:00

Se você que ser um autor deste blog, faça um comentário contendo nome, cidade, idade, e seu endereço na web e claro seu e-mail de conta Google.

VAGAS ESGOTADAS

Blogger em rascunho

2008-03-21T15:52:00.000-03:00

Experimente os novos recursos do Blogger antes que eles sejam publicados!
Blogger em rascunho é uma versão especial do Blogger em que testamos novos recursos antes que eles sejam lançados para o público em geral. Venha ver o que estamos fazendo!

Propaganda no rodapé da postagem

2008-03-21T15:45:00.000-03:00

Este post ensina a você como colocar anúncios entre postagens (não é o Adsene do Google) é uma otíma dica para você que usa o BidVertiser é uma boa dica.

Coloque um banner divulgando um site, blog ou faça propaganda, no rodapé da postagem.
Ou seja, quando alguém comentar, verá a divulgaçãop que você desejar, o AdSense por exemplo ou o que quiser.

Faça o seguinte:

* Crie o seu própio banner e faça upload na janela de postagem.
* Copie o código HTML
* Se for AdSense, é só copiar o códio que eles mesmo disponibilizam.

Vá em.........
MODELO ==> HTML ==> clic "EXPANDIR MODELO WIDGET"

Procure o seguinte código:

< class="'post-footer'">

Cole o HTML que copiou, logo abaixo.

Clic em "VISUALIZAR"

Se estiver tudo bem, "SALVE O MODELO".
Pronto! Vai estar lá sua propaganda.

Bloggueiros no ar

2008-03-21T15:43:00.000-03:00

Esta dada a largada hoje dia 21 de março começou o Bloggueiros
Estarei postando neste blog templates, dicas e outras coisas
ATENÇÃO: a maioria dos posts deste blog seram resumidos ou seja voce devera clicar em continue lendo para ver todo o post
Muito obrigado