►md

mensagensdiversificadas.com.br ...mensagens diversificadas...para pessoas que gostam de se comunicar

Pesquisar

Mostrando postagens com marcador tutorial. Mostrar todas as postagens
Mostrando postagens com marcador tutorial. Mostrar todas as postagens

17/04/2015

Saiba como "Como colocar Páginas Numeradas no Blogger"

18:30 0

fonte e créditos:
templatesparavoce




Uma releitura:

  » Páginas Numeradas no Blogger com 08 (Oito) Estilos CSS para Você Escolher


Em 2009 ,foi publicado ...

...um artigo que ensinava a colocar paginação no blogger



Agora ,  02  (dois) novos hacks de páginas numeradas no blogger do TPV
 

...agora , 
...muito mais fácil e simples que o de 2009 
...e tem a opção de colocar estilos diferentes para a páginas numeradas.  

→ Junto com este hack  
tem-se, também,   8  (oito) estilos CSS das páginas numeradas para se escolher.


"Numerar as páginas do seu blog é um recurso muito útil, porque facilita a navegação em seu blog. (Usabilidade)

..."algumas Vantagens das Páginas Numeradas"... :
» O leitor pode navegar nas páginas de posts do seu blog e voltar quando quiser naquela que o chamou a atenção;
» Melhor organização do seu blog;
» Design simples e bonito sem ocupar muito espaço. 


"Uma diferença que este hack tem em relação ao próximo artigo de páginas numeradas é que este tem a opção do link da última (last) e primeira (first) página, enquanto o outro não possui esta opção."


backup do template
"Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS.
Portanto:
.Sempre tente antes num blogue de testes.
. Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
. Leia o tutorial até o fim e tenha certeza de ter entendido."

Então:



Paginação no Blogger

Como colocar Páginas Numeradas no Blogger


 Passos a seguir:

1- Encontre a Linha:


<b:includable id='mobile-index-post' var='post'>

2- Cole, antes da linha acima

o código a seguir: ▼


<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}
</script>
<script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' 
type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>
 

▲Configure o código acima:

»perPage: 5, → Significa quantos posts serão exibidos por página de navegação.
►Deve ser igual ao número de postagens na página principal que você configurou quando criou seu blog.
Confira em Configurações » Postagens e comentários » Mostrar no máximo X postagens na página principal.» Clique em Salvar configurações
»numPages: 5, →São quantos números de páginas serão exibidos na página de navegação.
»firstText: &quot;First&quot;, →Altere First, se quiser, por Primeira página;
»lastText: &quot;Last&quot;, →Altere Last, se quiser, por Última página;
»nextText: &quot;&#187;&quot;, →&#187; Corresponde ao símbolo » você pode alterá-lo por outro símbolo;
»prevText: &quot;&#171;&quot; →&#171; Corresponde ao símbolo « você pode alterá-lo por outro símbolo.

Para ajudar »Leia:Símbolos - Atalhos do Teclado


OBSERVAÇÃO IMPORTANTE: (Respondendo à comentários e dúvidas.)

Se seu blog possui muitos posts e você limitar a quantidade de posts (perPage) e números de páginas (numPages). Muito possivelmente quando você clicar em Last não será direcionado à real última página do seu blog onde se encontra o seu primeiro post.
Este problema também acontecia aqui no TPV. Tentei colocar perPage: 10 e numPages: 10 e deu certo. Consegui chegar até a última página real do blog.
Assim. Você deve ir testando para ver quais as numerações que irão dar certo ao seu blog.

3- Agora, encontre a Linha: 


<b:include name='nextprev'/>


4- Selecione a linha acima▲ 

e ,

Substitua esta linha 

por este código abaixo ▼:


<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>
 
Clique em Salvar modelo.


Observação Importante:

Assim você aplicar este hack acesse um post.
 
Se no final do seu post os links para :
[Previous Post ou Postagem mais Recente], [Next Post ou Postagem mais Antiga] e [Home ou Início] estiverem nesta ordem respectivamente.
 
A solução que encontrei para que o link [Início ou Home] fique no meio, entre os links [Previous] e [Next post] foi esta:


Encontre a linha: 

 
<b:includable id='nextprev'>
 
»Expanda este bloco de códigos. (clique em ► no canto esquerdo do seu editor de HTML
 

Nele encontre a linha: 
 
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
 
 
Se esta linha estiver entre uma condicional b:if como exemplifiquei abaixo copie as 3 linhas e mude de lugar.
 
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'>Home</a>
    </b:if>

Recorte-a e cole onde está mostrando a imagem abaixo.

 
Entre 

<b:if cond='data:newerPageUrl'> e <b:if cond='data:olderPageUrl'>


Configurando o Estilo das Páginas Numeradas no Blogger

Copie o código CSS do estilo que preferir e cole acima da tag ]]></b:skin>


1º Estilo:



/*---Page-Navigation--- */
#blog-pager,
.pagenavi {padding: 6px 10px;
    clear: both;
    text-align: center;
    margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
    text-decoration: none;
    color: #333;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    background-color: #F8F8F8;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffcfcfc,EndColorStr=#fff8f8f8);
    background-image: -moz-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
    background-image: -ms-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
    background-image: -o-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FCFCFC),color-stop(100%,#F8F8F8));
    background-image: -webkit-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
    background-image: linear-gradient(to bottom,#FCFCFC 0,#F8F8F8 100%);
    padding: 5px 10px;
    border: 1px solid lightGrey;
    font-weight: bold;
    font-size: 12px;
    vertical-align: middle;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    margin: 2px 2px;
    -webkit-transition: .0s ease-in!important;
    -moz-transition: .0s ease-in!important;
    -ms-transition: .0s ease-in!important;
    -o-transition: .0s ease-in!important;
    transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
    border-color: #C6C6C6;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);
    background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);
    background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);
    background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));
    background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);
    background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
    border-color: #C6C6C6;
    background-color: #E9E9E9;
    background-image: none;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
    -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
    border-color: #C6C6C6;
    background-color: #E9E9E9;
    background-image: none;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
    -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
 
► Clique em Salvar modelo.



2º Estilo

/*---Page-Navigation--- */
#Page-Navigation { margin-top: 3em !important }
.pagenavi {padding: 8px 10px;
    clear: both;
    text-align: center;
    margin: 30px auto 10px;
    font-size: 13px !important;
    font-weight: bold;
}
.pagenavi span,
.pagenavi a {
    margin-right: 5px !important;
    padding: 7px 10px 7px 10px !important;
    color: #1E598E !important;
    background: #F6F6F6 !important;
    border: 1px solid #C8D5E0 !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    text-transform: none;
    text-decoration: none;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.pagenavi a:visited { color: #1E598E !important }
.pagenavi a:hover {
    color: #1E598E !important;
    border-color: #C8D5E0 !important;
    background: #C8D5E0 !important;
}
.pagenavi .current {
    padding: 7px 10px 7px 10px !important;
    border: 1px solid #C8D5E0 !important;
    color: #1E598E !important;
    margin-right: 3px !important;
    border-color: #C8D5E0 !important;
    background: #ffffff !important;
    border-radius: 5px;
}
.pagenavi .pages,
.pagenavi .current { font-weight: bold }
.pagenavi .pages {
    border: 1px solid #C8D5E0 !important;
    color: #1E598E !important;
    background: #F6F6F6 !important;
}
#blog-pager-newer-link { float: left }
#blog-pager-newer-link a {
    padding: 7px 10px 7px 10px !important;
    color: #1E598E !important;
    background: #F6F6F6 !important;
    border: 1px solid #C8D5E0 !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    text-transform: none;
    text-decoration: none;
    font-size: 1.4em !important;
    margin-right: 3px !important;
    text-decoration: none !important;
}
#blog-pager-newer-link a:hover {
    padding: 7px 10px 7px 10px !important;
    color: #1E598E !important;
    border-color: #C8D5E0 !important;
    background: #C8D5E0 !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#blog-pager-older-link { float: right }
#blog-pager-older-link a {
    padding: 7px 10px 7px 10px !important;
    color: #1E598E !important;
    background: #F6F6F6 !important;
    border: 1px solid #C8D5E0 !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    text-transform: none;
    text-decoration: none;
    font-size: 1.4em !important;
    margin-right: 3px !important;
    text-decoration: none !important;
}
#blog-pager-older-link a:hover {
    padding: 7px 10px 7px 10px !important;
    color: #1E598E !important;
    border-color: #C8D5E0 !important;
    background: #C8D5E0 !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#blog-pager {
    text-align: center;
    float: center;
    margin-left: 214px !important;
}
#blog-pager a {
    padding: 7px 10px 7px 10px !important;
    color: #1E598E !important;
    background: #F6F6F6 !important;
    border: 1px solid #C8D5E0 !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    text-transform: none;
    text-decoration: none;
    font-size: 1.4em !important;
    margin-right: 3px !important;
    text-decoration: none !important;
}
#blog-pager a:hover {
    padding: 7px 10px 7px 10px !important;
    color: #1E598E !important;
    border-color: #C8D5E0 !important;
    background: #C8D5E0 !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
 
► Clique em Salvar modelo.

3º Estilo

/*---Page-Navigation--- */
#blog-pager, .pagenavi{
    padding: 6px 10px;
    clear: both;
    text-align: center;
    margin: 20px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
    margin: 0 6px;
    display: inline-block;
    font-weight: 400;
    line-height: 1.2em;
    text-decoration: none;
    background-color: #295874;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #FFFFFF;
    padding: 5px 8px;
}
#blog-pager a:hover,
.pagenavi a:hover,
.pagenavi span.current{
    background-color: #3180AE;
    text-align: center;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }

►Clique em Salvar modelo.



4º Estilo

Azul

/*---Page-Navigation--- */
#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
border: 1px solid #3d8bf2;/*Cor da Borda Azul*/                
padding: 5px 10px;                 
text-decoration: none;                 
font-family: arial;                 
color:#fff;                 
margin: 2px;                 
background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg1.PNG');/*Imagem de Fundo*/
background-position: left;            
-webkit-transition: all 0.7s ease-in-out;               
-moz-transition: all 0.7s ease-in-out;                 
-o-transition: all 0.7s ease-in-out;  
}
#blog-pager a:hover, .pagenavi a:hover {
background-position:right; 
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background-position:right; 
}

Rosa

/*---Page-Navigation---*/
#blog-pager, .pagenavi { padding: 5px 10px;
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
border: 1px solid #D2136F;/*Cor da Borda Rosa*/                
padding: 5px 10px;                 
text-decoration: none;                 
font-family: arial;                 
color:#fff;                 
margin: 2px;                 
background-image: 
url('http://4.bp.blogspot.com/-qif9KRu_IBo/UfBrsXlprOI/AAAAAAAAADU/3U1HiFHE1Mw/s1600/menubg1.PNG');
/*Imagem de Fundo*/
background-position: left;            
-webkit-transition: all 0.7s ease-in-out;               
-moz-transition: all 0.7s ease-in-out;                 
-o-transition: all 0.7s ease-in-out;  
}
#blog-pager a:hover, .pagenavi a:hover {
background-position:right; 
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background-position:right; 
}
 
"Note que foi mudado : apenas a cor da borda e a imagem de fundo."
"Você pode fazer com a cor que quiser."


► Clique em Salvar modelo.



5º Estilo

/*---Page-Navigation--- */
#blog-pager, .pagenavi{
    padding: 6px 10px;
    clear: both;
    text-align: center;
    margin: 20px auto 10px;
}
.pagenavi span.current{color: #999999;}
#blog-pager a,.pagenavi a, .pagenavi span{background: #FFFFFF;border-radius: 30px 30px 30px 30px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);color: #AE2525;margin: 0 6px;
display: inline-block; font-weight: 400;line-height: 1.2em;text-decoration: none;padding: 10px 12px;}
#blog-pager a:hover, .pagenavi a:hover {background: #eaeaea; color:#EA1C5D; 
border:1px none #ccc; -webkit-transition-duration: .90s;}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }

►Clique em Salvar modelo.



6º Estilo

/*---Page-Navigation--- */
.blog-pager, .pagenavi{
    padding: 6px 10px;
    clear: both;
    text-align: center;
    margin: 20px auto 10px;
}
.blog-pager a, .pagenavi a, .pagenavi span{background: #E3E2D9;
border: 1px solid #CECCC1;color: #000;
margin: 0 6px;display: inline-block; font-weight: 400;
line-height: 1.2em;text-decoration: none;padding: 4px 8px;}
.blog-pager a:hover,.pagenavi a:hover, 
.pagenavi span.current {background-color: #CA4C3F;border: 1px solid #B05142;
color: #FFFFFF;}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link { float:none;}

► Clique em Salvar modelo.


7º Estilo

/*---Page-Navigation--- */
.blog-pager, .pagenavi {
  padding: 8px;
  clear: both;
  text-align: center;
  margin: 20px auto 10px;
}
.blog-pager a, .pagenavi a, .pagenavi span {
 padding: 5px; margin-right: 10px;
 font-size: 15px; color: #03719c; text-decoration: none;
 border: 3px solid #ccc; 
-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; 
-webkit-transition-duration: .90s;
 }
.blog-pager a:hover, .pagenavi a:hover, .pagenavi span.current {
 background: #03719c;
 color: #fff;
 border: 3px solid #AFAFAF;
 }
.pagenavi span.current { font-weight: bold; }
.blog-pager-older-link, .home-link,
.blog-pager-newer-link { float:none;}
 
 
► Clique em Salvar modelo.

8º Estilo

/*---Page-Navigation--- */
.pagenavi .pages { display: none;}
#blog-pager, .pagenavi {padding: 8px 10px;
     clear: both;
     text-align: center;
     margin: 30px auto 15px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
padding: 5px 10px;
text-decoration: none;
font-family: arial;
color: white;
margin: 2px;
background: black;
background-position: bottom;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
border-radius: 30px;
font-size: 20px;
}
#blog-pager a:hover, .pagenavi a:hover {
background: orange;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;}
.pagenavi .current {
background: orange;} 
 
► Clique em Salvar modelo.
 
Veja que neste estilo não aparece a opção:
 [Page 1 of 4]  
como na imagem a seguir:
 

Atenção!

Para que apareça você deve apagar a linha em negrito neste Estilo 8  
 
.pagenavi .pages { display: none;}


E se você quiser que não apareça o 
 [Page 1 of 4]  
nos outros estilos 
acrescente esta linha :
.pagenavi .pages { display: none;}
no código CSS dos mesmos.

Fontes:
♦ Tradução e Adaptação do Tutorial: 5 Different Styles of Page Navigation For Blogger V2 Autorizado pelo Autor
♦ Adaptação dos estilos CSS deste tutorial: 5 CSS Styles for WP-Pagenavi Plugin









Gostando do artigo, deixe sua idéia!
Que tal?
Comentem sobre o artigo, suas opiniões, as quais são importantes para nosso site!

- Tirem suas dúvidas através de contato
ou através de:
nosso formulário de comentários aqui!!!


Att.
Equipe
mensagensdiversificadas.com.br




04/10/2014

otimizar seu blog...confira as dicas!

07:53 0
. .

08 (oito)Dicas para otimizar seu blog




Com as mudanças constantes nos algoritmos dos motores de busca, como o Panda e o Penguin, o primordial é trabalhar corretamente as técnicas de SEO. Mas como aparecer em primeiro no google?
Os inúmeros fatores e técnicas existente para otimização correta de um site, abordamos as principais técnicas de SEO. Quanto mais você souber otimizar um site, melhor será o resultado. Com estas dicas você poderá otimizar corretamente seus artigos e poderá competir com seus concorrentes.

1 – Título

Um dos fatores principais de rankeamento. No título deverá conter as palavras chaves, além de ser simples e objetivo, o título como um dos fatores de maior peso em rankeamento terá que ser bem chamativo, para atrair atenção e ser clicado.
#Dica de Título: “Pense como você pesquisaria o assunto abordado”.

2 – Marcação do Autor

 

Atualmente é um aspecto fundamental em questão de cliques, pois gera mais credibilidade para seu site, alem de destacar seus conteúdos, quando não há concorrência em questão de marcação do autor.
A marcação do autor é muito bom para o marketing pessoal através do Google +.

3 – Conteúdo

 

Os conteúdos devem conter palavras chaves e ser muito atrativo, chamar a atenção do leitor para continuar em seu site. Deve ser composto de links para outras matérias através da palavra chave relacionada ao assunto. Conter mais que 800 palavras já está em bom tamanho.
Portanto quanto mais qualidade tiver seu conteúdo, melhor posicionado será.

4 – Headings

 

As Headings servem para organizar os artigos, mas que tem muita importância em relação a SEO. Headings são os títulos e sub-títulos, são tags de cabeçalho ou hierarquia de títulos.
Os headings dizem aos motores de busca a importância do assunto, com o H1 sendo de maior peso até o H6 sendo o menor.  No H1 é inserido a parte mais importante do assunto, sua palavra chave que tende a indexar.
# Dica
H1 corresponde ao cabeçalho ou título do blog
H2 ao título das postagens
H3 também para títulos de widgets e datas.
H3, H4 e H5 correspondem aos subtítulos
H6 rodapé

5 – Imagens

 

Alguns blogueiros ainda esquecem de otimizar as imagens. A imagem bem rankeada pode trazer inúmeras visitas para seu blog.
Existem 3 fatores para rankear a imagem.
– Composta de url
– Título
– Texto alternativo
Como os motores de busca não conseguem ler imagens, é adicionado o atributo “alt” para dizer o que sua imagem mostra. Essas imagens são indexadas no Google Imagens, de acordo com as palavras chaves inseridas nesse atributo.
Para ter um rankeamento bom do artigo nos resultados orgânicos do google segue um exemplo de SEO em imagens com os atributos “title” no link e “alt” na imagem.

<a href=”link” title=”blog”><img src=”imagem” alt=”blog”/></a>

6 – Divulgação e Interação

Outro modo de mostrar ao google que seu conteúdo é realmente importante e de qualidade, são as mídias sociais.
Comentários nas matérias é essencial, mas também os “curtir” do Facebook, “tweets” do Twitter e “+1″ do Google Plus são primordiais.
#Dica
– Insira uma pergunta ao final do artigo
– Peça aos usuários para comentarem, dar opiniões e tirar dúvidas.
– Responda os comentários, para demonstrar credibilidade e atenção com os mesmos.

7 – Link Building

Para criar um backlink  defina o texto âncora que será linkado interno ou externo. Procure sempre uma palavra chave de acordo com o conteúdo relacionado, pois provavelmente o outro blogueiro irá linkar para seu site também. Não insira clique aqui e linke para outro site, que futuramente poderá te retribuir o link da mesma forma.
#Dica
Insira o “title” no link e insira para abrir o link em nova janela, no caso de link externo, para o usuário continuar em seu site.

8 – Rich Snippets

Os  Rich Snippets são mais uma forma de interação e chamar a atenção do usuário para clicar em seu blog. Essa é uma forma de votar em seu artigo.
Existem 3 formatos: microdados, RDFa e Microformats. O microformats é o mais popular.

"E você tem inserido estas técnicas em seu site ou blog para deixá-lo na primeira página do google?"





fonte:







Gostando do artigo, deixe sua idéia!
Que tal?
– Comentem sobre o artigo, suas opiniões, as quais são importantes para nosso site!

- Tirem suas dúvidas através de contato
ou através de:
nosso formulário de comentários aqui!!!


Att.
Equipe
mensagensdiversificadas.com.br
 

26/06/2014

Saiba :"Como Fazer Um Template Ensinando detalhadamente"…???

09:44 0




"Como Fazer Um Template Ensinando detalhadamente"…???


Pesquisa rebuscada
na net,
e,

fonte + creditos,
merecidamente para:


forum.wmonline.com.br/
topic/66199-
tutorial-de-como-fazer-um-template


”  Tutorial De Como Fazer Um Template Ensinando detalhadamente”

”  Um template é composto por 2 partes… 
... a parte do DESIGN 
e a  
parte do CODIGO…
  ..."a parte do design que é mais fácil…


“PARTE 1" – PARTE DO "DESIGN”


A parte do design surge
 a partir da sua criatividade e talento 


...para você poder fazer um template com imagens "legais"...
...é necessário que saiba mecher em alguns programas de "design"… 

...como o :

Corel Draw, 
PhotoShop,  
Fireworks( o mais fácil de mecher e o mais usado)”
 
…"mas para você poder aprender a fazer o template mais rápido e sem nenhuma necessidade de ficar se preocupando com imagens  
...foi colocada duas imagens na internet”

 
Imagem 01

"Essa Imagem"  ,
..."ela é a figura principal
aquela imagem que fica bem em cima” 

 Imagem 02

“Essa Imagem será o fundo,  
todo template precisa de um fundo”...  


..."agora que a parte do design está feita
vamos para a parte mais 
“CHATA” 
do template, 
que é o 
CÓDIGO FONTE"



"PARTE 2 " – CÓDIGO FONTE"

O Código fonte é a parte principal de um site, blog, etc.

… "e não é difícil aprender o CÓDIGO FONTE, 
ele é chamado de "HTML"

 … "todos devem ter ouvidos  falar "… 

... "rápido e fácil de aprender"… 


...então:


"O código fonte é 
compostos por  
tags, 
são elas: 
HTML, 
HEAD, 
TITLE 

BODY,

Todas as "tags",
são necessárias, 
serem fechadas
assim após abertas. 


Exemplo, para o caso da postagem/tutorial,  a ser ensinada aqui: 


<HTML> xxxxxxxxx </HTML>

Sendo que:

< = Sinal de abrir
> = Sinal de fechar
/  = Fechar a "tag" (vide ecemplo acima)


"HTML" é a "tag" principal
 
HEAD é  uma das  "tags" que poucas vezes é usado… 

é mais usado em alguns "SCRIPT"

TITLE
como o nome mesmo diz, é a parte que ficará o título do seu site


BODY é o corpo do site… 
...nele que colocaremos todo o código"…


..."colocação do código inteiro  
aqui 

depois 
..."explicando parte por parte "...
 
"CODIGO INTEIRO":



 
<html>
<head>

                                           <!-- NÃO MUDE NADA ATÈ ALI EM BAIXO-->
<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color: FFFFFF;
scrollbar-highlight-color: 000000;
scrollbar-3dlight-color: 000000;
scrollbar-darkshadow-color: FFFFFF;
scrollbar-shadow-color: FFFFFF;
scrollbar-arrow-color: 000000;
scrollbar-track-color: 000000;
}
-->
</STYLE>
<meta http-equiv="Content-Language" content="pt-br">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="Javascript1.2" src="http://blig.ig.com.br/js/funcoes_templates.js"></script>
<STYLE type="text/css">
P, body, td, tr, div {
        font-style: normal;
        font-weight: normal;
        font-size: 10px;
        color: #FFFFFF;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        line-height: 12px;
}
A, A:link{color:#FFFFFF;text-decoration:none}
A:visited{color:#FFFFFF}
A:active{color:#FFFFFF}
a:hover {text-decoration: none; filter: shadow(Color=#666666, strength=1);      height:0px;     cursor: hand;   font-family: Verdana, Arial, Helvetica, sans-serif;     color: #FFFFFF}
hr{width:100%;color:#4FC7FB;height:5;border:1px solid #1A348B; text-align:center}
</STYLE>

                                                          <!-- FIM DA ONDE NÂO È PRA MUDAR -->

                                                      <title>"COLOQUE O SEU TITULO AQUI"</title>
</head>

                                              <!-- AQUI QUE FICA O ENDEREÇO DA FIGURA (ESSE É O FUNDO O SITE) -->
<body background="http://sr.kremer.vila.bol.com.br/gorillaz_02.gif">
<table width="669" border="0" cellspacing="0" cellpadding="0" height="0">

           <!--  AQUI FICA O ENDEREÇO DA FIGURA PRINCIPAL -->
  <img src="http://sr.kremer.vila.bol.com.br/gorillaz_01.gif"></table>

<!--              INICIO DO SEU PERFIL                    -->
<div id="Layer1" style="position:absolute; left:20px; top:567px; width:161px; height:68px; z-index:1"> 
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td valign="top"> <p align="left"><b><font color="#FFFFFF" size="2"> Perfil</font></b><br>
          <br>
          <b>Nome</b>: Seu Nome<br>
          <b>Idade</b>: Sua Idade<br>
          <b> Icq</b>: Seu Icq<b> <br>
          Email</b>: Seu Email<br>
          <strong>Signo</strong>: Seu Signo<br>
          <b>Coisas que adoro</b>: "Coisas que você adora fazer"<br>
          <b> Coisas que odeio</b>: "Coisas que você odeia"<br>
        <p></p>
        <p> <font color="#FFFFFF"><b><font size="2">Blogs Amigos</font></b></font><br>
          <br>
          <a href="http://www.so_templates.blig.com.br" target="_blank">Blog do 
          So_Templates </a><br>
        </p>
        <p> <b><font color="#FFFFFF" size="2">Links</font></b><br>
          <br>
          <a href="http://www.so_templates.blig.com.br" target="_blank"> So_Templates</a><br>
          <a href="http://www.blig.com.br">Blig</a></p>
        <p> <b><font color="#FFFFFF" size="2">Arquivo</font></b><br>
          <br>
                                   <!--FIM  DO SEU PERFIL -->

     </p>
        <br> <p align="center">Template by<br>
          So_Templates</p></td>
    </tr>
  </table>
</div>
<div id="Layer2" style="position:absolute; left:252px; top:610px; width:488px; height:46px; z-index:2"> <div align="center"> 

        </p>

        <br>
        <p align="center">


                  <!--INICIO -  CODIGO DA HOSPEDAGEM -->







                 <!-- COLOQUE O CODIGO DA HOSPEDAGEM AQUI -->






                           <!--FIM -  CODIGO DA HOSPEDAGEM-->


</body>
</html>




aí está  o código, certo"... 

...agora,
... explicação  das partes mais importantes…

 




...tem uma parte que ,
não é aconselhável mudar 
para quem esta aprendendo agora...”
 
..."no começo 
aonde está  escrito COLOQUE AQUI SEU TÍTULOé aonde você vai colocar o titulo é ,claro,
... é dentro da tags :
<title> </title>

Exemplo: 

 <title> Minhas Poesias</title>

 


“depois vem 
aonde fica o 
endereço das imagens, 
para você poder 
colocar o fundo 
e  
a imagem principal, 
ela 
"precisa estar na internet"…


...depois vem o PERFIL… 
...aí : coloca o seu nome

...aí vem a parte importante de um blog… 

..."o código"...

o qual
..."mandará as mensagens para o template"… 

..."cada lugar que você coloca o seu blog tem um"… 

..."eles nunca são iguais"… 

..."existem o 
 blogger, 
blig,  
uol,  
weblogger"... 

..."no código 

em cima tem uma parte que  está escrito :
COLOQUE O CODIGO DA HOSPEDAGEM AQUI” 
..."então lá,
é 
que você vai colocar o código de qual você vai usar"…



...seguem , aqui 
os códigos do 
blogger, 
blig 
e do 
weblogger"...

 



BLOGGER

 
<!--INICIO -  tags do Blogger -->
        <blogger> 
                
              <p class="mensagem"><small><b><$BlogItemDateTime$><
/font></b></small><br><br>
                <font size="1"><$BlogItemBody$></font><br><br>
                <small>Enviado por <b><$BlogItemAuthorNickname$></b></small></font>
</p>
              </blogger> <br>
<br>
                <div align="center"><br>
    <br>
    <br>
    *Template Exclusivo do So_Templates</div>
</div>
  <tr>
    <td>

        <!--FIM -  tags do Blogger --></p>
        </a></td>
    </tr>
  </table>
</div>
<div id="Layer2" style="position:absolute; left:252px; top:610px; width:488px; height:46px; z-index:2"> 
  <div align="center">





 Blig


<!--INICIO -  tags do Blogger -->
<p class="mensagem" align="justify">[#LISTAGEM#]</p>  <br>
<br>
                <p> </p>
                <p><div align="center">*Template exclusivo do So_Template</font> </div></p>
              </div>

        <!--FIM -  tags do Blogger -->
 
 
 
 
 
 



Weblogger

<!--INICIO -  tags do Blogger -->
<weblogger> 
                 <font size="1">
         <weblogcabecalhodata> 
    </font> 
        <tr align="left"> 
          <td width="520">
            <p align="center">
            <#weblogDataCabecalho#>
            <br>
            <br>
            </p>
          </td>
        </tr>
        </weblogcabecalhodata> 
        <tr> 
          <td width="520"> 
            <p align="justify"><#weblogMensagem#></p>
            <p align="left">
            :: Enviado por
 <a href="mailto:<#weblogEmail#>">
            <#weblogApelido#>
            </a>
            - <#weblogHora#> ::<br>
            <a href="javascript:wb_comentario(<#weblogcodigo#>)">
            <#weblogTotalComentarios#> 
              comentários.</a>
            <br>
            </p>
          </td>
        </tr>
      </table>
    <p align="left">
      </weblogger> <br>
<br>
                <p> </p>
                <p>*Template exclusivo do So_Templates</font> </div></p>
              </div>

        <!--FIM -  tags do Blogger -->



"Caso alguns desses,  ter problema,  
é porque
...não não foi testado"

…"só foi testado  o código do
blogger"… 

..."ele está funcionando "...

“O Template está pronto"… 


..."alguns outros templates"


… mas ,
..." ainda :" arrumar os códigos deles"… 
...mas se vocês
 quiserem ver:


"TEMPLATE 01 – GORILLAZ
TEMPLATE 02 – IRON MAIDEN
TEMPLATE 03 – DIABLO"






Related Posts with Thumbnails
...caso alguém quiser usar alguns dos templates que acima "...

 ...para pegar o  o código por inteiro"…
é so mandar um email 
para:
sr.kremer@bol.com.br 




___________________________________________________________________

curtir



arquivo

o ooOAdicione sua URL no Google, e apareça nas buscas || Пост!Featured on Hometalk.com