Personalizar texto "Postar um Comentário"

Por padrão no blogger quando vamos deixar um comentário em algum blog, acima do formulário de comentário (campo onde digitaremos a mensagem), aparece o texto: "Postar um Comentário".



Mas há maneiras de personalizarmos este texto, e substituí-lo por outro texto, ou substituir todo o texto por uma imagem personalizada, ou incluir uma imagem para que ela apareça junto com o texto.

Para isto você deverá fazer algumas modificações no código HTML do seu template, e incluir alguns estilos.
Vejamos.

1) Para aplicar estilos ao texto padrão, como cores, background, tamanho da fonte, bordas etc:

Entre na aba Layout, vá até o modo "Editar HTML", marque a caixinha "Expandir modelos de widgtes" e procure pela tag ]]></b:skin>
e cole logo ACIMA dela:

h4#comment-post-message{
background:transparent url(URL-DA-SUA-IMAGEM) no-repeat left center;
color:#fff;   /*coloque aqui cor da fonte*/
font-size:20px;   /*coloque aqui o tamanho da fonte*/
height:27px;
line-height:27px;
padding:0 0 0 35px;
border:1px solid #fff;   /*coloque borda se quiser*/
}

Salve as Modificações e visualize para ver como ficou. Depois é só ir configurando os estilos de acordo com o seu gosto.
Em 'background' coloque o endereço da imagem, caso queira acrescentar uma imagem juntamente com o texto, se não quiser incluir imagem, basta apagar esta linha.

2)Se quiser alterar o texto padrão:

Procure por:

<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>

e substitua o trecho:<data:postCommentMsg/> pelo texto que vc quer.

Se no seu template a àrea de comentários já foi muito modificada, e você não conseguir liocalizar o código acima, tente localizar por:

<a name='comment-form'/>
<h3><data:postCommentMsg/></h3>

e substitua o trecho: <data:postCommentMsg/> pelo texto que vc quer.

Veja um exemplo configurado com uma imagem decorativa e o texto alterado:



3)Se quiser substituir todo o texto por uma imagem personalizada:

Substitua o trecho:
<data:postCommentMsg/>

pelo código a seguir:

<img src="url-da-imagen"/>

Salve as modificações!

Não esqueça que se caso você preferir utilizar a opção de personalização de nº3, você deverá criar uma imagem sua e hospedá-la no seu site preferido.

► Continue Lendo...

Novo Endereço do Gothic Darkness

Já fazia um bom tempo que eu estava com vontade de registrar um domínio próprio para o meu blog.
Resolvi fazer esta mudança de endereço para um dominio próprio, pois além de deixar o blog com um ar mais profissional, ainda aumenta o acesso e as visitas do google, já que muitas empresas bloqueiam o acesso do "blogspot.com" ( o que realmente é lamentável).
Apesar da mudança de endereço, eu ainda continuo e pretendo continuar utilizando a hospedagem do Blogger.
O nome do blog com o 'blogspot.com' no final ficava enorme, agora está menor e bem mais fácil de ser memorizado.
Eu estou adorando o novo endereço..\o/
O único "desconforto" no início é que alguns recursos podem ficar bagunçados, mas isso eu vou arrumando, por isso peço desculpas por algum problema, mas tenham paciência que logo tudo ficará perfeitinho, eu prometo!
Eu notei que meu contador de comentários (estatísticas do blog) diminuiu o número de comentários publicados. O mais estranho é que meu blog atualmente possui mais de 500 comentários e no contador está apresentando o número de 135 e os comentários recebidos no dia de hoje não foram computados. Só não sei ainda se isso é algum bug do Blogger ou se é devido a mudança do endereço, ainda vou descobrir!

Li algumas dicas de outros sites que tratam sobre o assunto 'dominio próprio' e vi que no início eu também corro o risco de ter uma perda no PageRank do google, mas acredito que isso logo será recuperado e em nada afetará meu trabalho aqui.
Atualmente o Gothic Darkness está com PageRank 3. Pode significar pouco, mas para um blog que tem poucos meses no ar (desde maio de 2009), para mim isso é mais que gratificante, pois saber que o "tio google" classificou este número de PageRank para o meu blog, me deixa muito contente!
Mas voltando ao novo endereço, agora para acessar o Gothic Darkness está bem mais fácil, o endereço atual agora é:
http://www.mundodarkness.com
e pode ser acessado usando com o "www" ou não.

Logo poderá ser acessado também usando o ".com.br", pois eu já registrei o dominio ".com.br" também, e já providenciei a mudança junto a empresa onde registrei os domínios para que todos possam acessar o Gothic Darkness usando qualquer um desses endereços, só que para o ".com.br" essa mudança demora alguns dias.
Mas aguardem, que logo todos poderão acessar o meu blog de qualquer lugar e digitando qualquer um desses 2 dominios (que chique não?).

Para aqueles que linkaram o Gothic Darkness em seus blogs, ou que usam algum template criado por mim, não se preocupem em alterar o link com o novo endereço, o Blogger faz o redirecionamento automático, portanto todos os links que antes eram "blogspot.com" serão automaticamente redirecionado para o "http://www.mundodarkness.com".
Já atualizei o banner na sidebar com o novo endereço.

Aproveito também para informar a vocês que logo irei disponibilizar um tutorial com mais informações a respeito desse assunto, para ajudar aos que tem intenção de adquirir um domínio próprio e efetuar a mudança de endereço como eu fiz.

Outra coisa importante que gostaria de avisar a todos:
Tenho recebido vários pedidos de encomendas de templates e atendimento personalizado para o Blooger, e como meu tempo é curto, e eu sou péssima para estipular valores para cobrança desses serviços, resolvi criar uma tabela disponibilizando os preços para cada tipo de serviço personalizado, assim eu não necessito responder a tantos emails por dia para enviar orçamentos quando solicitados.
Os valores foram baseados nos valores cobrados por outros blogs que também prestam este tipo de serviço.
O bom é que também irá facilitar a vida daqueles que pretendem obter este tipo de serviço, pois já poderão visualizar os valores e decidir que tipo de serviço pretende contratar e entrarão em contato apenas se quiserem obter mesmo o serviço.
Logo a tabela estará disponibilizada para visualização!

Gostaria de comunicar também que se eu não responder a todos os comentários não foi porque eu não quis, mas porque não consegui, devido ao acúmulo de trabalho e serviços que tenho agora neste final de ano.
Só não respondo comentários cuja a resposta já esteja publicada aqui no site e a pessoa tem preguiça de procurar, e fica perguntando, estes não responderei mesmo,o máximo que posso fazer é apontar o link do post onde está publicado o tutorial sobre o assunto em pauta e olhe lá!

Bom, é isso!

► Continue Lendo...

Icone de Feed Flutuante no blog

Atendendo a pedidos, através de 'Sugestão de postagens', hoje vou ensinar como colocar um ícone de Feed com efeito flutuante, igual ao usado aqui no Gothic Darkness.



A primeira coisa que você deve fazer é escolher um ícone (imagem) de Feed.
Se quiser sugestões, confira aqui alguns icones de Feed que disponibilizei para download.
Escolhida a imagem que você vai usar, hospede-a no seu site preferido. (se quiser use o seu album picasa ou hospede no próprio blogger).

Agora clique na aba "Layout" e entre na edição HTML do seu template, clique em "Expandir modelos de widgets" e procure pela tag ]]></b:skin>

e cole logo ABAIXO dela:

<a href='LINK-DO-SEU-FEED-AQUI' style='display:scroll;position:fixed;top:10px;left:12px;' target='_blank' title='Assine nosso Feed'>
<img src='ENDEREÇO-DA-SUA-IMAGEM'/></a>

Ajuste os valores em:
top:10px; -> Distância da imagem para o topo
left:10px; -> Aqui você define a distância da imagem para esquerda.
Se quiser que a imagem fique flutuando à direita, altere "left" para "right".


Salve as modificações e pronto!

Se você quiser enviar alguma sugestão de artigo, envie através da nossa Enquete, ou através do nosso Formulário de Contato. Farei o possível para atender a sua sugestão.

SKM9BM2QGKT3

► Continue Lendo...

Lista de Artigos Relacionados no Rodapé

Você já aprendeu a instalar uma lista de Artigos Relacionados com Imagens, onde os artigos relacionados ficam adicionados ao final de cada postagem e usa imagens e textos aos assuntos contidos nos mesmos marcadores.
Agora você verá outra maneira de instalar uma lista de artigos relacionados ao final das postagens, que é a que eu uso aqui no Gothic Darkness.



Para colocar no rodapé das postagens uma lista com os Artigos Relacionados, como uso aqui no Gothic Darkness, é muito fácil. É um recurso muito útil, pois direciona o leitor para outros textos contidos nos mesmos marcadores.
Para ter esse recurso, é necessário instalar um arquivo javascript no seu template.

Vá até Layout >> Editar HTML , não precisa marcar "Expandir modelos de widgets" e localize a tag ]]></b:skin>
E cole ABAIXO 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>

Salve!
Agora volte ao modo edição HTML, marque "Expandir modelos de widgets" e procure por este trecho:

<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 != &quot;true&quot;'/>
</b:loop>
</b:if>

E cole o código a seguir logo ACIMA de </b:loop> :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>

Agora procure pela linha:

<div class='post-footer-line post-footer-line-3'>

e cole logo abaixo dela, o código a seguir:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='relacionados'>
<h4>Artigos Relacionados:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Salve as modificações!

Caso você queira modificar a quantidade de artigos relacionados que serão exibidos, por cada categoria, procure por:

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>

E altere o nº 10 para o número que você achar melhor.

Se quiser alterar o título de "Artigos Relacionados", altere o texto (destacado em azul)na linha :
<h4>Artigos Relacionados:</h4>

Se quiser você pode aplicar estilos ao Título para definir o tamanho e a cor da fonte. Para isso você deverá acrescentar um código no CSS.
Procure pela tag: ]]></b:skin>
E cole ACIMA dela:

#relacionados h4{
margin: auto;
padding: 0 0 0;
font-size:px;  /*coloque aqui o tamanho da fonte*/
color: #;  /*coloque aqui o valor da cor para o título*/
}

Salve!

Os artigos relacionados aparecerão apenas nas páginas internas, e no rodapé dos posts, não aparecem na home.

► Continue Lendo...

Ocultar Elementos em Página Específica

Com esta dica você vai aprender a ocultar ou exibir Widgets ou qualquer outro elemento para que eles apareçam somente nas páginas que você definir, ou seja, você vai poder escolher quais elementos você quer que apareça somente na página inicial ou somente nas páginas internas.

Por padrão, no blogger, toda vez que inserimos um gadget na sidebar, ele se apresenta em todas as páginas (inicial, interna e de marcadores).
Porém é possível definir, através de uma condicional, em quais páginas os widgets ou qualquer outro ítem apareçam.
Você pode controlar a exibição de um 'elemento/widget/gadget' em seu template.

Se você reparar bem, aqui no Gothic Darkness, alguns Widgets que utilizo aparecem somente na página inicial, não aparecem nas páginas internas, como o banner Link-me, o widget de comentários recentes e o widget de Feed.

Agora você vai ver como implementar isso no seu blog também, e poder escolher e definir onde ficará a exibição de cada elemento.

Com este efeito, você :
- Poderá deixar seu template de modo que a página inicial se diferencie das demais páginas;
- Pode melhorar a usabilidade dos seus widgets fazendo com que apareçam somente nas páginas onde são mais importantes;
- Ajuda a melhorar o carregamento do seu blog, ao ocultar certos Widgets 'pesadinhos' nas página Internas.

Widgets diferentes para cada página:

Exemplificando para um melhor entendimento:
Digamos que você tem um Widget de "Comentários Recentes" e queira ocultá-lo nas páginas internas.
Clique na aba "Layout" e entre na edição HTML do seu template, clique em "Expandir modelos de widgets" e procure pelo título do widget que você quer controlar a exibição.

Exemplo - Widget somente na página inicial:

<b:widget id='HTML1' locked='false' title='Comentários Recentes' type='HTML'>
<b:includable id='main'>

Cole o código que define onde este Widget irá aparecer logo depois dessas linhas, que no exemplo acima será:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Agora você precisa fechar a condicional.
Cole:

</b:if>

antes de :

</b:includable>

Deverá ficar assim:

<b:widget id='HTML1' locked='false' title='Comentários Recentes' type='HTML'><b:if cond='data:blog.pageType != "item"'>
<b:includable id='main'>

<b:if cond='blog.url == data:blog.homepageUrl'>

((restante do código fonte do Widget))

</b:if>

</b:includable>
</b:widget>

e pronto, seu widget vai aparecer somente na página inicial do blog.

Veja o Código especifico da variável para cada função:

Para Ocultar um elemento APENAS na Página Inicial:

<b:if cond='data:blog.homepageUrl != data:blog.url'>

Para Ocultar um elemento APENAS nas Páginas internas(de postagens):

<b:if cond='data:blog.pageType != "item"'>

Para Ocultar um elemento APENAS na página inicial, de marcadores e arquivo:

<b:if cond='data:blog.pageType == "item"'>

Para Ocultar na página de um marcador específico:

<b:if cond='data:blog.homepageUrl != http://NOME-DO-SEU_BLOG.blogspot.com/search/label/NOME-DO-SEU-MARCADOR"'>

Onde colar o código:

No caso de Widget você deve localizar o título que você deu ao Widget e colar o código desejado logo APÓS a linha:

<b:includable id='main'>
e depois cole a linha:
</b:if>
antes do trecho:
</b:includable>

Bom, é isso!

► Continue Lendo...

Como Melhorar o Carregamento do Blog

De que adianta você passar horas personalizando seu blog se a página apresenta lentidão excessiva no carregamento? Em outras palavras, você deixou seu blog com sua cara, seu estilo, mas parou pra pensar se todos os elementos que você inseriu deixou o seu blog lento demais?
Quando criamos um blog queremos que ele seja visualizado e acessado por várias pessoas, mas se um visitante chega até sua página, e se depara com uma lentidão de carregamento até conseguir chegar ao conteúdo que ele foi buscar, com certeza ele fechará a página e vai buscar a informação em outro lugar.
Mesmo que tenhamos uma internet rápida, devemos sempre pensar naqueles que estão do outro lado e que são nosso foco principal: os leitores!
E se a pessoa que acessa seu blog possui uma internet lenta?
Afim de tentar ajudar você a ter um melhor desempenho no carregamento do seu blog, aqui vou disponibilizar uma série de dicas para otimizar seu blog e evitar que você deixe sua página lenta no carregamento e tornar seu blog mais rápido.

1) Simplicidade e objetividade é sempre fundamental:

Procure ser simples e objetivo. Evite inserir elementos (widgets) demais no seu blog. Blogs que apresentam elementos demais simultâneamente acabam tornando os elementos mais visiveis que seu próprio conteúdo.

2) Quantidade de postagens na página inicial:

Procure ajustar a quantidade de postagens que aparecerão na sua página inicial. Utilizar o "leia mais" é uma excelente forma de otimizar o carregamento do seu blog. Ao acessar seu blog, o visitante buscará o título do post que lhe interessou. Ao apresentar muitas postagens na home de forma completa, obriga o leitor a ter que navegar por uma longa jornada até o final da página para conseguir visualizar seus posts pelo título e finalmente escolher qual vai ler, qual lhe chamou mais atenção.
E em razão disso, duas coisas podem acabar ocorrendo: ou ele é realmente persistente e vai até o final da página até encontrar o que ele quer, ou vai desistir de procurar e vai sair da sua página.
Portanto, pense sempre em seu leitor, não deixe-o cansado e não torne suas publicações cansativas de serem visualizadas.
Se você escreve posts grandes e sempre utiliza imagens em sua postagem, procure usar o "Leia Mais" e defina de 4 a 5 postagens no máximo para a home.

3) Sistema de Comentários:

Otimize o sistema que você disponibiliza para que seu leitor deixe um comentário em seu blog.
A Forma de comentar em páginas separadas ou janelas pop-up, acaba tornando um verdadeiro incômodo para o visitante, sem falar que demanda maior tempo de carregamento da página, o que pode acabar causando que ele desista de comentar em seu blog.
Procure utilizar o modo de "Postagens abaixo incorporada".
Se você não sabe como configurar: Vá em "Configurações", selecione a aba "Comentários" e em "Posição do formulário de comentários", selecione "Postagem abaixo incorporada".

4) Scripts e Hacks:

Procure colocar no corpo HTML do seu template apenas scripts que você realmente utiliza. Se você instalou scripts e não utiliza mais as funções dele, remova-o!
Evite carregar seu template e sua sidebar com scripts demais. Não faça uma "salada" de scripts, pois muitos deles simultaneamente, por vezes apresentam conflitos entre si.
Por exemplo: o script "marquee" quando utilizado com o script JQuery dá um conflito tremendo no carregamento. Demora horas para finalizar o carregamento de ambos e até que carregue tudo, sua página se apresenta de forma toda desconfigurada.
Portanto, evite ao máximo utilizar script "marquee" (geralmente usado para banner dos parceiros rotativos)
Faça uma avaliação de quais realmente são necessários.
Quando você abre a página do blog, o navegador vai buscar cada endereço de arquivo JavaScript que está nas chamadas do seu template, antes de carregar os estilos de sua página. E cada vez que atualizamos sua página, o navegador irá buscar e carregar tudo novamente.
Dê preferência em hospedar javascripts pequenos no próprio template.E para Javascripts maiores hospede todos em um único lugar. Uma dica: Hospede arquivos javascript no google sites. Leva muito menos tempo se o navegador buscar apenas um endereço para carregar tudo de uma só vez.

5) Evite usar Flash:

Evite o uso de widgets em flash, até mesmo em suas postagens.
Widgets feitos em Flash pesam muito na hora do carregamento. Faça uma avaliação se esse conteúdo realmente é relevante o suficiente para seus leitores antes de colocá-los em suas postagens ou em sua sidebar.

6) Uso de tabelas:

Evite usar tabelas em suas postagens. Tabelas geram muito código e tornam o carregamento pesado demais.

7) Imagens no post:

Procure usar imagens pequenas nas postagens.
Opte por hospedar no próprio blogger as imagens que você vai publicar em seu post, clicando no icone "inserir imagem" na edição HTML da postagem.
Mas atenção: Quando você hospeda no post uma imagem de 1024px x 800px , por exemplo, ainda que o Blogger a transforme em uma imagem com largura de 300px, é a imagem original que vai pesar em sua página.Faça um redimensionamento da imagem antes de posta-la, adaptando o tamanho dela ao tamanho da sua área de postagem, a não ser que você precise que seu leitor clique na imagem para amplia-la e ver alguns detalhes dela (como em ilustrações de tutoriais, por exemplo).
Dê preferência ao uso de imagens no modo "Pequena".Isso ajuda a poupar tempo na hora do carregamento da página.
Só utilize imagens em gif ou png se for realmente necessário, por exemplo,para imagens como banners, botões, etc.
Imagens meramente ilustrativas no post, dê preferência para as do tipo "jepg".
Isso ajuda a melhorar o carregamento.

8) Imagens no Template:

Procure definir altura e largura para imagens utilizadas em seu layout e hospede as imagens no próprio blogger.
Quando você utiliza alguma imagem no seu template, determine altura (height) e largura (width)no elemento onde sua imagem ficará, de acordo com o tamanho que a imagem original apresenta.
Por exemplo: Se vai utilizar uma imagem como background em "outer-wrapper" e a imagem que você vai utilizar possui 900px de largura(widht) e 500px de altura(height), defina essas exatas medidas na folha de estilos do template referente a "outer-wrapper".
Veja como ficaria esse exemplo:

#outer-wrapper{
width:900px; height:500px;
background: url(endereço-da-imagem) no-repeat top center;
}

Quando não se define esse atributo, o navegador é obrigado a determinar todos esses valores antes de continuar a carregar o restante do blog.
Caso você não saiba o tamanho da imagem e queira descobrir a altura e largura das imagens, clique com o botão direito em cima da imagem e vá em 'Propriedades'.

9) Uso de rádio ou player é o maior vilão:

Uso de rádio e players na sidebar além de ser um incômodo para o leitor, compromete muito o tempo de carregamento da página.Lembre-se sempre: as pessoas não gostam de se sentir obrigadas a ouvir algo que ela não queira. É muito chato quando visitamos um blog e de repente uma rádio , ou música começa a tocar sem que a gente peça.
Muitas vezes o usuário está ouvindo uma música no próprio computador, imagina o desconforto e o conflito de melodia que isso iria causar?
Não coloque esse tipo de widget no seu blog. Caso a inserção de uma rádio seja muito relevante ao seu conteúdo, coloque apenas um link para ela, e nunca em "autoplay".

10) Uso de Widgets em excesso:

Não exagere na quantidade de widgets. E tenha maior cuidado com os Widgets que dependem de arquivos JavaScript, principalmente porque javascripts em excesso podem causar conflitos entre si.
Verifique e analise sempre se o uso de certo Widget realmente causará algum impacto positivo no seu conteúdo e na navegação para o seu leitor. Faça uma avaliação constante no funcionamento dos Widgets e decida se há mesmo necessidade em mantê-los. Um widget a menos pode fazer muita diferença no carregamento do seu blog.
Procure colocar os widgets mais pesados no Footer (Rodapé), assim eles serão carregados depois de carregar o conteúdo principal do Blog.
Existem certos widgets que não fazem o menor sentido permanecerem nas páginas internas e outros que não tem necessidade de ficarem na página inicial.
No próximo post vou ensinar como melhorar a usabilidade dos seus widgets de modo que eles apareçam nas páginas onde são mais importantes. Assim poderá definir quais widgets aparecerão na home e quais aparecerão na páginas internas.

Finalizando:

Lembre-se que a cada atualização (mudança) de página todos os estilos contidos dentro da linha <body> serão carregados novamente e cada elemento contido ali terá uma nova chamada HTTP que também será carregada novamente.
Quanto mais elementos, mais requisições HTTP e quanto mais requisições HTTP, mais o blog vai demorar a carregar.
Se você procurar definir os estilos do seu template dentro da folha de estilos (na CSS) do template, elas carregam só no primeiro acesso e ficam lá no cache do usuário. (Eu digo elementos, como imagens de background, por exemplo).
Os estilos devem ser inseridos sempre entre as tags <b:skin> e ]]></b:skin>

Analizando o carregamento do seu blog:

Depois de todas essas dicas, que tal verificar os aspectos de seu site, inclusive a velocidade de carregamento?
Vamos utilizar ferramentas para fazer estas análises:

O site Seo Centro analisa a velocidade de carregamnento do seu blog, bem como as metas tags.

O Yahoo Site Explorer verifica o tamanho das páginas do seu blog, e checa quais são as páginas que precisam de mais otimização. Basta acessar o site e inserir a URL do seu blog conforme a imagem abaixo:


Outra opção de análise é no site Website Speed Test, basta acessar o site , digitar o endereço do seu blog e clique em Submit.

Se você quiser otimizar mais o seu blog,utilize o analisador de sites do WebSiteOptimization.com. Basta acessar o site, digitar o endereço do seu blog que ele fará uma análise com relatório e ainda recomendará modificações que podem ser feitas.
O site demonstra cada item em cores diferentes apontando a situação de cada um:
Verde é porque está tudo ok;
Amarelo são os que ainda podem ser otimizados;
Vermelho são os críticos e devem ser otimizados o mais breve possível!

► Continue Lendo...

Personalizar Blockquote no Blogger

Blockquote é o elemento que usamos para indicar uma citação de parte de um texto de outra fonte ou para dar destaque em alguma parte do texto dentro do post.
Ele é muito útil, pois serve para diferenciar as citações que você queira fazer em seu post.


Veja um Exemplo abaixo:

Este texto está destacado pelo função Blockquote.

Se você quiser ativar a função Blockquote para diferenciar partes de textos em suas postagens, deverá aplicar os estilos dentro do CSS do seu template.
Os templates padrões do Blooger já vem com esta função ativada, porém não possuem estilos configurados, isso você terá que fazer manualmente.

Clique na aba "Layout" e entre na edição HTML do seu template, não precisa clicar em "Expandir modelos de widgets" e procure por: (Você pode ultilizar CTRL+F para facilitar sua busca)

.post blockquote {

e acrescente as linhas de estilo logo abaixo desta linha:

background:#a5a3fd ;  /*Altere a cor do fundo como preferir*/
border:2px dashed #2b2a59; /*Altere a cor da borda como preferir*/
padding: 5px;
margin:10px 20px 10px 20px;

Deverá ficar assim:

.post blockquote {
background:#a5a3fd ;  /*Altere a cor do fundo como preferir*/
border:2px dashed #2b2a59; /*Altere a cor da borda como preferir*/
padding: 5px;
margin:10px 20px 10px 20px;
}

Se no seu Template não possuir a linha .post blockquote
Copie todo o código postado acima e cole-o logo ACIMA de ]]></b:skin>
ou cole-o na àrea de estilos para Postagem que geralmente está em /* Posts

Lembrem-se:
Em "Background" e em "border" você deve colocar as cores correspondentes de acordo com as cores do seu template para que combinem.
No código acima utilizei cores apenas como exemplo para que você visualize o local que deverá incluir as cores.

Depois de aplicados os estilos, toda vez que você quiser destacar parte do texto em sua postagem basta clicar no desenho de "aspas" no modo de edição de sua postagem.



Em "Editar Html" a função Blockquote é representada pelas tags:
<blockquote></blockquote>

Se você preferir utilizar o modo HTMl para colocar em destaque alguma parte do texto, basta usar as tags dessa maneira:

<blockquote> Seu texto em destaque aqui </blockquote>

► Continue Lendo...

Autor do Post Abaixo do Titulo

Por padrão, no Blogger, sempre que um post é publicado a assinatura do autor da postagem aparece no rodapé do post. (Postado por:...)
Se você quiser que a assinatura do autor da postagem e apareça abaixo do titulo do post e não no rodapé, basta fazer algumas modificações no código do seu template.



Vá em Layout >> Editar HTML >> Expandir modelos de widgets, e procure por este código:

<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span>

Encontrado código você deverá:
1) Copiá-lo
2) Salvá-lo em um bloco de notas
3) Apagar ele do seu template.

Agora procure por:

<div class='post-header-line-1'/>

E cole logo ABAIXO desta linha o código que você copiou no bloco de notas, e salve as modificações, devendo ficar assim:

<div class='post-header-line-1'/>
<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span>

► Continue Lendo...