» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Como ter Marcadores no Seu Blog




Os marcadores são muito úteis para você organizar os assuntos do seu blog!

Aqui no templates uso os marcadores na widget ÍNDICE onde indica todos os assuntos do blog, por exemplo: Todos os templates possuem o marcador TEMPLATES, tutoriais possuem marcador TUTORIAIS, posts sobre menu em abas possuem marcador MENU EM ABAS, etc...

Isto facilita para o visitante encontrar qual o assunto que quer ver no seu blog além de ajudar quando você coloca o recurso de posts relacionados, uma vez que este recurso irá usar seus marcadores para indicar quais os posts relacionados àquele que você está lendo.

Para colocar um marcador é só clicar na imagem abaixo para saber como fazer:



Após fazer isso ao criar seus posts, você pode colocar a widget MARCADORES nas sidebars do seu blog.
Quando você vai adicionar um elemento de página terá a opção MARCADORES, é só selecioná-la, colocar como quer que seus marcadores sejam exibidos e posicioná-la onde quiser em seu blog.

Obs: Este post está classificado como os marcadores: TUTORIAIS E DICAS

Imagem para Recado no Orkut




Usando o código que expliquei no post anterior:

Parabéns
By Imagens para Você


Colocando Gadget de Comentários Recentes no Blogger




Esta gadget mostra os últimos comentários feitos em seu blog.

Este recurso é muito interessante, pois é uma forma de valorizar os leitores do seu blog ao mostrar quem comentou por último.

Existem também hacks que mostram os leitores que mais comentam em seu blog e também com a foto (avatar) dos leitores.

Veja como ficou no Demoplate.

Para colocar o recurso dos Comentários Recentes em seu blog:

» Vá em Layout
 » 

→ Clique em Adicionar um Gadget → Na caixinha que vai aparecer procure pelo tipo HTML/Javascript→ Clique nele

→ Coloque o Título que preferir: Comentários Recentes, Últimos Comentários, etc...

→ Cole o código que ensino abaixo onde mostra a figura.

1ª Opção - Usando o Código Javascript hospedado em um site de sua preferência:

»Clique em Adicionar um elemento de página→ Escolha tipo HTML→ Copie o código abaixo e cole na gadget.
<ul>
<script style="text/javascript" src="Endereço do Javascript">
</script>
<script style="text/javascript">
var numcomments = 5;
var showcommentdate = false;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://Endereço do SEU BLOG/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
</ul>
►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.

»A gadget de Posts Recentes funciona com um JavaScript que deve ser hospedado por você→ Veja como fazer no fim do post;
» Ou você tem a opção de colocar o código javascript incorporado ao seu template, ou seja, Hospedar no próprio Blogger, para que não corra o risco do site de hospedagem dar problemas.

2ª Opção - Usando o Javascript completo:

O código ficará assim:
<ul>
<script>
function showrecentcomments(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write('<li>');
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a>');
if (showposttitle == true) document.write(' on ' + posttitle);
if (showcommentdate == true) document.write(' at ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ');
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (standardstyling) document.write('<br/>');
if (comment.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(comment);
if (standardstyling) document.write('</i>');}
else
{
if (standardstyling) document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + alturl + '">(more)</a>');
if (standardstyling) document.write('</i>');}
if (!standardstyling) document.write('</div>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('</li>');
if (!standardstyling) document.write('</div>');}
</script>
<script style="text/javascript">
var numcomments = 5;
var showcommentdate = false;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://Endereço do SEU BLOG/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
</ul>

Como hospedar o Javascript para usar a 1ª Opção

» O código em VERDE é o Javascript dos comentários recentes.


» COPIE as linhas em VERDE acima COLE em um bloco de notas;
→Você pode usar o programa Notepad ++
» Salve no bloco de notas em seu computador com a extensão .js no nome do arquivo - Ex: Clique em Salvar Como e escreva o nome: Comentários Recentes.js

»Hospede este arquivo em um site de sua preferência colocando o LINK fornecido por sua hospedagem onde está indicado na 1ª opção deste tutorial;

»Desta forma não haverá o risco de seus comentários recentes não funcionarem, a não ser que muitas pessoas usem o mesmo endereço do java e sua taxa de transmissão de banda ultrapassar o limite do site de hospedagem.



Atualização em 07/05/2013

Hack para Exibir os Anúncios Google entre os Posts




Alguns templates não tem o código que possibilita exibir os anúncios Adsense entre os posts!
Por isso estou ensinando como você pode configurar seu template para exibir os anúncios Adsense entre os posts.

Vá em Layout→ Modelo→ Editar HTML → Selecionar a caixinha Expandir Widgets.

Se você usa o Internet Explorer ou o Firefox use a tecla F3 para localizar os códigos HTML do seu blog.

Encontre as linhas:
<b:include data='top' name='status-message'/>

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>
1º- Entre estas linhas:
<b:include data='top' name='status-message'/>

<b:loop values='data:posts' var='post'>
Adicione a linha:
<data:adStart/>
2º- Entre as linhas:
</b:if>
</b:loop>
Adicione as linhas:
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
Atualização em 31/08-12:46h
Para que os anúncios fiquem centralizados adicione as tags <center> e </center> no código acima, de forma que fique assim:
<center><b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if></center>

3º- Entre as linhas:
</b:loop>
</div>

Adicione a linha:
<data:adEnd/>


Seu código deverá ficar desta forma:
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
Após incluir estes códigos você deve clicar em SALVAR MODELO.
►Ir em Elementos da página→ Em Postagens no Blog→ Clicar em Editar no canto inferior direito.
Image and video hosting by TinyPic
►Selecionar a opção X Exibir anúncios entre postagens.
Image and video hosting by TinyPic
Clique na imagem para ampliar

►Em Configurar anúncios inline selecione:▲
1- Entre quantas postagens seus anúncios deverão ser exibidos. Pode ser a cada 1 post ou 2 ou mais, desde que na sua página principal contenham no máximo o total de 3 anúncios adsense (segundo as regras do adsense). Se você selecionar 1 que significa entre cada post e exibir 5 posts na página principal seus anúncios não aparecerão, você tem que calcular para não ultrapassar os 3 anúncios;
2- Formato do banner (Sugestão: Banner 468x60);
3- Cores do seu anúncio (Se tiver dúvidas quanto às cores clique na 4- Clique em SALVAR ALTERAÇÕES.

PRONTO! SEUS ANÚNCIOS DO GOOGLE ADSENSE ESTARÃO ENTRE SEUS POSTS.

ACHO ESTA DICA INTERESSANTE PORQUE NÃO POLUI SEU BLOG/SITE, DESDE QUE AS CORES PARA SEU ANÚNCIO SEJAM BEM ESCOLHIDAS.

Fonte: Aprendi fuçando num template para download que aparecia os anúncios entre os posts e procurei o que ele tinha que o meu não tinha.

Colocando Gadget de Posts Recentes




Esta widget mostra os últimos posts criados por você.

Para colocar este recurso em seu blog:
Vá em Layout→ Modelo→ Elementos de página→Escolha onde quer adicionar a widget de Posts Recentes

1ª Opção - Usando o Códidigo Javascript hospedado em um site de sua preferência:

»Clique em Adicionar um elemento de página→ Escolha tipo HTML→ Copie o código abaixo e cole na widget.
<ul>
<script src='LINK DO JAVASCRIPT' type='text/javascript'>
</script>
<script style="text/javascript">
var numposts = 5;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://Endereço do seu BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script>
</ul>

Configurando seu Gadget

►Se quiser alterar o número de posts altere o número 5 em [var numposts = 5;] por um número maior ou menor.
►Se não quiser mostrar a data dos posts troque true em [var showpostdate = true;] por false.
►Se não quiser que apareça o resumo do post troque true em [var showpostsummary = true;] por false.

►Se você optou por mostrar o resumo do post altere a quantidade de caracteres nesta linha [var numchars= 100;] alterando o número 100 por o número que lhe convier.

»A gadget de Posts Recentes funciona com um JavaScript que deve ser hospedado por você→ Veja como fazer no fim do post;

» Ou você tem a opção de colocar o código javascript incorporado ao seu template, ou seja, Hospedar no próprio Blogger, para que não corra o risco do site de hospedagem dar problemas.

2ª Opção - Usando o Javascript completo:

O código ficará assim:
<ul>
<script>
// ----------------------------------------
// SHOW RECENT POSTS
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
// Version: 2.0
// Date:    2006-12-01
// Author:  Hans Oosting
// URL:     beautifulbeta.blogspot.com
// ----------------------------------------

function showrecentposts(json) {

for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write('<li>');
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ', ' + cdyear);
if (!standardstyling) document.write('</div><div class="bbrecpostsum"">');
if (showpostsummary == true) {
if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) {
 if (standardstyling) document.write('<i>');
 document.write(postcontent);
 if (standardstyling) document.write('</i>');}
else {
 if (standardstyling) document.write('<i>');
 postcontent = postcontent.substring(0, numchars);
 var quoteEnd = postcontent.lastIndexOf(" ");
 postcontent = postcontent.substring(0,quoteEnd);
 document.write(postcontent + '...' + readmorelink);
 if (standardstyling) document.write('</i>');}
}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('</li>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('');
if (!standardstyling) document.write('</div>');

}
</script>
<script style="text/javascript">
var numposts = 5;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://Endereço do seu BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script>
</ul>

Como fazer com o Javascript para usar a 1ª Opção

» O código em AZUL é o Javascript dos Posts Recentes.
» COPIE as linhas em AZUL acima COLE em um bloco de notas;
» Salve no bloco de notas em seu computador com a extensão .js no nome do arquivo - Ex: Clique em Salvar Como e escreva o nome: Posts Recentes.js
»Hospede este arquivo em um site de sua preferência colocando o LINK fornecido por sua hospedagem onde está indicado na 1ª opção deste tutorial;


»Desta forma não haverá o risco de seus posts recentes não funcionarem, a não ser que muitas pessoas usem o mesmo endereço do java e sua taxa de transmissão de banda ultrapassar o limite do site de hospedagem.

Fonte: http://ustadz.net/typoxp-21-blogger-template.htm


Última Atualização:14/07/2013

TEMPLATE BROWN




Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar.

FAÇA O DOWNLOAD AQUI


►Para alterar os links da barra de navegação!
Encontre o seguinte código:

<ul class='solidblockmenu'>
<li><a class='current' href='URL do Link'>Home</a>>/li>
<li><a href='URL do Link' title=''><b>Ítem2</b>>/a>>/li>
<li><a href='URL do Link' title=''><b>Ítem3</b>>/a>>/li>
<li><a href='URL do Link' title=''><b>Ítem4</b>>/a>>/li>
<li><a href='URL do Link' title=''><b>Ítem5</b>>/a>>/li>
<li><a href='URL do Link' title=''><b>Ítem6</b>>/a>>/li>
</ul>

1- Substitua 'URL do Link' pelo endereço do Link que você quer colocar;
2- Em title='' -> coloque entre as aspas '____' o título do link;
3- Ítens -> Substitua os Ítens pelo título do link para que apareça na barra de navegação.

COMO EU DISSE NO POST ANTERIOR: ESTE TEMPLATE ESTÁ NUM ARQUIVO ZIP ACOMPANHADO DAS IMAGENS QUE ELE CONTÉM. DESCOMPACTE-O E INSTALE O ARQUIVO XML, ELE JÁ CONTÉM AS IMAGENS HOSPEDADAS NO SITE TINYPIC, SE HOUVER QUALQUER PROBLEMA VOCÊ JÁ TEM AS IMAGENS DELE PARA HOSPEDAR ONDE QUISER E SUBSTITUIR NO HTML DO BLOG.

Minhas desculpas!




Com o aumento do número de visitas e downloads dos templates e das imagens que disponibilizo nos meus blogs a taxa de transferência de dados do photobucket aumentou consideravelmente.

Com isso, ultrapassei o limite de 25GB disponíveis para uma conta gratuita do photobucket e eles bloquearam as imagens que hospedo lá.
Por 3 dias as imagens ficaram bloqueadas e os templates desfigurados.

Peço Desculpas àqueles que foram prejudicados com este problema!

Realmente eu não esperava tantas visitas e que houvessem tantos usuários de meus templates!
Obrigada!

Por isso, a partir de agora todos os templates que já existem no Templates para Você e os próximos estarão acompanhados das imagens que contiverem neles para evitar que este problema se repita e seus donos podem hospedá-las onde quiserem!
Estarei, nos próximos dias, disponibilizando nos templates já existentes suas imagens por intermédio de seus respectivos posts.


Problemas com as Imagens




AMIGOS USUÁRIOS DOS TEMPLATES DESTE BLOG!

AS IMAGENS DOS TEMPLATES ESTÃO FORA DO AR, PORQUE O LIMITE DE 25MB DE TRANSFERÊNCIA DE DADOS MENSAIS DO PHOTOBUCKET FOI EXCEDIDO.

COM ISSO ELES BLOQUEARAM MINHAS IMAGENS E AS SUAS, INFELIZMENTE.

ESTAREI RESOLVENDO ESTE PROBLEMA, MUDANDO DE HOSPEDAGEM O MAIS RÁPIDO POSSÍVEL. PEÇO UM POUCO DE PACIÊNCIA!

DESCULPEM O TRANSTORNO.


ACREDITO E ESPERO QUE ESTE PROBLEMA SEJA TEMPORÁRIO.

TEMPLATE RAINBOW DROPS





Unlimited Free Image and File Hosting at MediaFire


Clique na imagem para ampliar.

»FAÇA O DOWNLOAD AQUI«


Para Editar a Barra de Navegação:
→Encontre o código
<div id='stylefour'>
<ul>
<li><a href='#' title=''>Home</a></li>

<li><a href='#' title=''>About Us</a></li>

<li><a href='#' title=''>Services</a></li>

<li><a href='#' title=''>Our Work</a></li>

<li><a href='#' title=''>Contact Us</a></li>
</ul>
</div>
→Altere # pelo endereço do Link e as palavras Home, About Us, Services, Our Work, Contact Us pelos títulos correspondentes aos links.

Para que a widget Posts Recentes funcione em seu blog:
Vá em Layout→ Modelo→ Elementos de página→ Encontre a widget:Posts Recentes→ Clique em Editar
→Coloque o código deste post: COLOCANDO WIDGET DE POSTS RECENTES;
→ Siga as instruções do post para colocar o endereço do seu blog.


Para que a widget de Busca no Blog funcione:
Vá em Layout→ Modelo→ Elementos de página→ Encontre a widget tipo HTML/Java Script - ela não tem título e fica acima da de Posts Recentes→ Clique em Editar
→Coloque o código:
<form id="searchthis" action="http://ENDEREÇO DO SEU BLOG/search" style="display: inline;" method="get">
<table style="width: 400px; height: 100%;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="middle">
<input id="b-query" style="width: 95%;" name="q" type="text">
</td>
<td class="navbutton" valign="middle">
<input id="submit" tabindex="1" value="Busca" name="submit" type="submit">
</td>
</tr>
</tbody>
</table>
</form>
→ Na linha do código da widget: <form id="searchthis" action="http:// ENDEREÇO DO SEU BLOG/search" style="display: inline;" method="get">
→ Coloque o Endereço do seu blog onde está indicado.

TEMPLATE PINK




Um template pink muito lindo, com barra de navegação e 3 colunas.
Unlimited Free Image and File Hosting at MediaFire
Clique na imagem para ampliar.

FAÇA O DOWNLOAD AQUI

Este link para download é do Template Pink Atualizado em 23/09/2009

Especificações
Coluna da esquerda (sidebar-wrapper): 185px
Coluna do centro (main-wrapper): 400px
Coluna da direita (newsidebar-wrapper):185px
Largura total do template (outer-wrapper): 800px

►Para alterar os links da barra de navegação!
Encontre o seguinte código:

<ul class='solidblockmenu'>
<li><a class='current' href='URL do Link'>Home</a>>/li>
<li><a href='URL do Link' title=''><b>Ítem2</b>>/a>>/li>
<li><a href='URL do Link' title=''><b>Ítem3</b>>/a>>/li>
<li><a href='URL do Link' title=''><b>Ítem4</b>>/a>>/li>
<li><a href='URL do Link' title=''><b>Ítem5</b>>/a>>/li>
<li><a href='URL do Link' title=''><b>Ítem6</b>>/a>>/li>
</ul>

1- Substitua 'URL do Link' pelo endereço do Link que você quer colocar;
2- Em title='' -> coloque entre as aspas '____' o título do link;
3- Ítens -> Substitua os Ítens pelo título do link para que apareça na barra de navegação.


ATENÇÃO:
ESTE TEMPLATE FOI ATUALIZADO E REPUBLICADO NESTE LINK:

Template PinkA3 Atualizado


 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger