►md

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

Pesquisar

Mostrando postagens com marcador tutoriais. Mostrar todas as postagens
Mostrando postagens com marcador tutoriais. 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




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