Inserindo paginas numeradas no seu blog

Vá no Painel do seu Blog, Clique em Layout e depois em Editar HTML

Não esqueça de Baixar modelo completo do seu Template

Adicione esse codigo antes de ]]</b:skin> :

.showpageArea {padding: 0 2px;margin-top:2px;margin-bottom:5px;
}
.showpageArea a {border: 1px solid #bddbe6;
color: #000000;font-weight:normal;background:#fff;
padding: 3px 6px !important;font-size:11px;
margin:0px 2px;
background-image: url(http://i49.tinypic.com/72g6eq.png);
text-decoration: none;-moz-border-radius:5px;
}
.showpageArea a:hover {border: 1px solid #bddbe6; color: #000000; background: #bddbe6;}
.showpageNum a {border: 1px solid #bddbe6;
color: #000000;font-weight:normal; font-size:11px;
padding: 3px 6px !important;margin:0px 2px;
text-decoration: none;-moz-border-radius:5px;}
.showpageNum a:hover {border: 1px solid #bddbe6;
color: #000000;background: #bddbe6;
}
.showpagePoint {font-size:11px;-moz-border-radius:5px;
padding: 2px 5px 2px 5px;margin: 2px;font-weight: bold;
border: 1px solid #0066cc; color: #fff;
background: #0066cc;}
.showpage{font-size:11px;-moz-border-radius:5px;}
.showpage a:hover {font-size:11px; border: 1px solid #0066cc; color: #fff;background-color: #0066cc;}
.showpageNum a:link,.showpage a:link {font-size:11px;
padding: 2px 4px 2px 4px; margin: 2px;
text-decoration: none;border: 1px solid #bddbe6;
color: #000;background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #bddbe6;color: #000000;
background-color: #bddbe6;font-weight:normal;}

Agora dessa la em baixo e adicione esse codigo antes de </body>

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript' >
var pageCount=8;
var displayPageNum=6;
var downPageWord ='Próxima';
var upPageWord ='Anterior';
</script>
<script src='http://eddyvidaloka.webs.com/blogger%20page%20nav.js' type='text/javascript'/>
</b:if>

Obs : Esse Javascript ta com o "Paginas" Preto, se quiser mudar é so salvar o JS e mudar a cor...

Visualize para ver se está tudo correto e clique em Salvar Modelo.

Se o Hack não funcionar ou causar erros no seu template, desfaça as alterações clicando em Limpar Edições ou utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo.

Google Page Creator, migra em breve para o Google Sites image

 

Ao entrar no painel esta noite, notei essa mensagem e fui “Saber mais” sobre o assunto e creio que toda a blogosfera deve estar atenta a essas mudanças.

Estou publicando abaixo a tradução na íntegra, das informações do Blogger Help. Espero que eu também entenda e arregasse as mangas, porque tenho “trocentos” blogs e terei que fazer as mudanças necessárias . Vamos lá!

Atualizando os arquivos do Google Page Creator em seu blog

Você pode ter ouvido que o Google Page Creator está migrando para o Google Sites, e não será mais acessível para os usuários. Então, por que isso importa para os usuários do Blogger? Bem, para a grande maioria de vocês que nunca usou o Google Page Creator para sediar alguns dos conteúdos do seu blog, ele não importa. No entanto, para aqueles de vocês que confiou no Google Page Creator para armazenar imagens, modelo de código (HTML / Javascript / snippets CSS), ou outros arquivos, você terá que encontrar um novo local para hospedá-los. Alguns templates  e widgets também pode conter arquivos apontando para o Google Page Creator.

A boa notícia é que  nós construímos uma ferramenta que permitirá atualizar suas referências muito fácil.  Eis como funciona:

Primeira coisa sobre a ferramenta Template Updater,   localizado aqui, certifique-se de que você está assinado corretamente na Conta do Google.  Posição para a ferramenta irá automaticamente iniciar o processo de digitalização, que olha através de seus blogs para referências ao Google Page Creator, quer dentro de um blog de modelo ou widgets HTML.  Após digitar você verá uma mensagem de status para cada um de seus blogs. For  Para a maioria de vocês, a mensagem terá este aspecto:

Se vir esta mensagem para todos os seus blogs, então você está pronto! Você não tem referências para atualizar e você pode continuar blogando. No entanto, para aqueles que têm referências para o Google Page Creator, o scanner mostrará uma mensagem que se parece com esta:

Para iniciar o processo de atualização simples, basta clicar no link Update referências:

O primeiro passo é fazer o backup do seu modelo, de modo que você tem uma cópia do seu código se precisar novamente no futuro. Clique em Baixar o seu modelo de blog link para pegar uma cópia e, em seguida, clique em Avançar para ir para a Etapa 2!

Agora você verá uma tabela que lhe permite rever as atualizações que serão feitas para os arquivos do Google Page Creator. Tanto o 'velho' como os 'novos' fontes são definidos de modo que você pode ver claramente onde os arquivos são gerenciados após a atualização.
De lá, basta clicar em Update e seu blog será atualizado automaticamente. Você deverá ver uma confirmação de amarelo que tudo foi transferido corretamente:

Claro, se você tem outros blogs que precisam de atualização, você terá de executar a ferramenta de atualização de cada blog ;-)

Solução de problemas / Notas:

Se  o modelo ou widget que faz referência arquivos do Google Page Creator é corrupto, você poderá ver uma mensagem de falta de recursos no Novo Blogger hospedado URL.  Isto significa que o arquivo de origem não pode ser atualizado corretamente por meio da ferramenta.  Para corrigir isso, você terá que re-instalar o modelo ou legal de sua fonte original.

Para atualizar referências de um blog, você tem que ter privilégios administrativos para esse blog, que entre em contato com administrador do blog para ter os arquivos atualizados.  A tentativa de faze-lo sem esses privilégios retornará o seguinte erro:

O Updater Template apenas apóia a migração de arquivos de até 1MB .

Imagens ou outros arquivos maiores que 1MB não podem ser atualizadas.

Adicionando coluna no template

Bom hoje eu vou ensinar aqui a como adicionar uma nova coluna ao blog,Também vou mostrar 3 tipos de posicionamento de colunas, antes de tudo quero avisar que esse tutorial é para que já tem conhecimento e exige muita atenção, aconselho antes de tudo vocês a fazerem um backup do seu template em caso de erros você poderá voltar para que era antes e começar tudo denovo então vamos ao trablalho:

Vá no codigo do seu template

Sidebar - Main - Sidebar:

*Primeiro Passo (para todos os casos)

Encontrem este trecho do código do template:

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

#main-wrapper {
width: 400px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 190px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
width: 190px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Outer-wrapper mostra a medida total que terá seu template, a largura dele. A largura das colunas nunca pode exceder a largura da Outer-wrapper, ou uma coluna 'descerá' para dar espaço à outra. A primeira coisa a fazer é alterar o valor em width que está em Outer-wrapper. No Mínima, a largura é só de 660px. Se você deseja tres colunas no seu template (sidebar-main-sidebar), coloque pelo menos 800px de largura. Agora copie todo o trecho que se refere à newsidebar e cole abaixo do sidebar, como mostrado acima, em vermelho. Note que destaquei onde está float: left; Para que uma coluna fique à direita e outra à esquerda da coluna do post (sidebar-main-sidebar), sidebar-wrapper e newsidebar-wrapper precisam estar em lados opostos.

Muito bem. Agora determine as medidas que terão as colunas. Não se esqueça que o valor total não poderá ultrapassar o valor da Outer-Wrapper, incluindo aí bordas e espaçamento entre as colunas.

*Segundo Passo (para todos os casos)

Agora desça a página até encontrar este trecho do html (obs: desmarque onde está Expandir Modelo de Widget, para facilitar)

<div id='content-wrapper'>

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


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


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
/<b:section>
</div>


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

Acrescente a parte em vermelho, que se refere a coluna criada, antes de main-wrapper. Por que antes? Por que está determinado que esta coluna ficará à esquerda da coluna do post (foi determinado lá em cima, em float: left ok?), ou seja : newsidebar-main-sidebar.

Main - Sidebar - Sidebar:

Agora vamos deixar a coluna do post à esquerda e as sidebars à direita, uma do lado da outra.

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

#main-wrapper {
width: 400px;
border: 1px solid $bordercolor;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 190px;
border: 1px solid $bordercolor;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
width: 190px;
border: 1px solid $bordercolor;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Aqui basta determinar em Float a mesma posição para as sidebars, como está em vermelho e depois seguir o segundo passo ensinado acima.


Main - Sidebar sobre Sidebar

Determine que as duas sidebars fiquem do mesmo lado (right ou left, em oposição a coluna do post, claro), apenas altere o valor de Outer-Wrapper para que caiba apenas a coluna do post e uma coluna lateral, o que obrigará a segunda coluna a descer.
Por exemplo: Determine o valor em width de Outer-Wrapper para 800px, para Main-wrapper 550px e para a Sidebar (para as duas, Sidebar e Newsidebar) 220px. A falta de espaço obrigará uma das colunas a descerem. Mas não se esqueça de detrminar que as duas colunas fiquem juntas à direita ou esquerda, ou uma delas descerá sob a coluna do post ok?

Espero ter ajudao e até a proxima.

                          Boa Sorte !

Lista de Posts Relacionados no Rodapé do Post

Bom nesse tutorial vou ensinar a vocês como colocar uma lista do seus posts relacionados no rodapé do post, essa é mais uma dica que exige de você muita atenção então vamos ao trabalho.

1 - Ainda na tab “Editar Html”, clique em “Expandir modelos de widgets”.

2 - Procure esta linha de código:

<p class=’post-footer-line post-footer-line-3′/>3 - Adicione este código LOGO DEPOIS dessa linha (você pode substituir “Posts Relacionados” por qualquer texto que desejar):

<b:if cond=’data:blog.url != data:blog.homepageUrl’>Posts Relacionados</b:if>
<script type=’text/javascript’>
removeRelatedDuplicates();
printRelatedLabels();
</script>

4 - O código deve ficar assim:

<p class='post-footer-line post-footer-line-3'/>
<b:if cond='data:blog.url != data:blog.homepageUrl'>Posts Relacionados</b:if>
<script type=’text/javascript’>
removeRelatedDuplicates();
printRelatedLabels();
</script>

Tenha cuidado para não apagar ou sobreescrever nada, pois um simples espaço ou caracter sobrando ou faltando pode phoder completamente seu template.

5 - Salve o template. Você já pode ver sua lista de posts relacionados, ANTES dos comentários! Legal, não é?

Customizando a Quantidade de Posts Relacionados

Tanto se você está usando este método, como se decidiu usar o widget, pode determinar o número máximo de posts que aparecerão na lista. Este hack usa as Categorias (Labels, Marcadores ou Etiquetas do Blogger - é tudo a mesma coisa) para escolher os posts relacionados. Ou seja, ele vai “puxar” posts que estejam na mesma (ou mesmas) categoria.

Para modificar o número de posts que serão mostrados - o número pré-determinado são 10 posts, se achar que está bem assim, não faça mais nada - vá até a tab “Editar Html”, e clique em “Expandir modelos de widgets”. Procure este código no template:

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

Mude o número 5 para qualquer coisa que você queira. Aparentemente, esse número não indica o total de posts, mas o máximo de posts que são mostrados por cada categoria - embora eu não tenha certeza disso. Experimente mudar o número algumas vezes, até encontrar a combinação ideal para você.

E, caso você esteja se perguntando, o hack e o widget funcionam com todos os posts, inclusive os mais antigos.

Motivos Que Podem Causar Que o Hack de Posts Relacionados Não Funcione

1 - Você não usa as Categorias do Blogger.

Se seus posts não estão categorizados, a lista de posts relacionados não aparecerá - mas se você instalou o hack direitinho, provavelmente o título “Posts Relacionados” vai aparecer, sem nada embaixo. Coloque categorias nos posts, e a lista vai aparecer.

Se você tem alguns posts categorizados e outros não, a lista só aparecerá nos posts com categorias, mas o título “Posts Relacionados” vai aparecer em todos.

2 - Suas categorias contêm caracteres especiais

Alguns caracteres, como (?) e (/) podem causar problemas com este hack. Elimine-os das suas categorias, e pronto.

3 - Código adicionado de forma incorreta

O código do passo 3 deste posts deve ser adicionado após o código do passo 5 do post Widget de Posts Relacionados para Blogger - Blogspot, de forma que o código do passo 5 fique depois do código do passo 3 no HTML. Não entendeu? Simplesmente siga as instruções ao pé da letra e não modifique nada depois de instalar o hack!

Sempre tenha cuidado para não apagar ou sobreescrever nada, pois um simples espaço ou caracter sobrando ou faltando pode phoder completamente seu template.

4 - Você usa um Modelo Clássico de Template

Observação: Este hack é para o NOVO Blogger.

                                       Boa Sorte!

Fazendo um menu horizontal no blog

Nesse tutorial ensinarei a vocês como fazer um menu horizontal no blog, quero lembra que para fazer esse tutorial requer um pouco mais de atenção e conhecimento então vamos parar de enrrolação e vamos ao que interessa.

1ºA primeira parte do código deve ser colocada de preferência logo depois de tudo que se refere a header.Então vá até o codigo do seu template e procure pelo seguinte codigo:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}


#navigation{
height:40px;
width: 890px;
line-height:2.9em;
margin:-12px 10px 10px 5px;
background: url(ENDEREÇO DA SUA IMAGEM) repeat-x;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}
2ºAgora adicione o codigo em vermelho como mostra o exemplo acima.

3ºAgora vamos ao segundo codigo,encontre o seguinte trecho no codigo do seu template:

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a>
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='TPBB (Header)' type='Header'/>
</b:section>
</div>

<!-- Não esqueça de colocar aqui os seus links!!-->

<div id='navigation'>
<ul>
<li><a href='inserir link do seu blog' title=''>Home</a></li>
<li><a href='inserir link aqui' title=''>Artigos</a></li>
<li><a href='inserir link aqui' title=''>Fotos</a></li>
<li><a href='inserir link aqui' title=''>Links</a></li>
<li><a href='inserir link aqui' title=''>Forum</a></li>
<li><a href='inserir link aqui' title=''>Outros Sites</a></li>
<li><a href='inserir link aqui' title=''>FAQ</a></li>
<li><a href='inserir link aqui' title=''>Contato</a></li>

</ul>
</div>

4ºAdicione o codigo vermelho como aparece no exemplo acima.Onde esta 'insirir link aqui' é opnde você irá colocar os links.E as partes em amarelo do codigo acima você pode mudar de nome pelo que você quer que apareça.

Bom é  isso espero ter ajudado.

                        Boa Sorte !

Instalando novos templates ao blogger

Bom nesse tutorial ensinarei a vocês como istalar novos template no blog.

Bom para mudar o visual do novo blogger é só seguir os passos abaixo:

Primeiro vc tem que baixar um da web,em breve a comu tera um blog ai tera varios templates para vcs baixarem mas por enquanto vamos ao tutorial.

Antes de mais nada, se você tem widgets(acessorios) no seu blogger guarde os código de cada um deles, no bloco de notas mesmo, para colocar depois no novo template.

Vá na palheta "MODELO" depois na palheta "Editar HTML"

Agora temos duas formas de instalar o layout.

Primeira forma: carregar o template do HD.

Está é a opção mais segura. Vá em "browse", selecione o arquivo xml no seu pc e depois de "carregar".




Segunda forma: Copiar o Código do template diretamente.

Primeiro abra o template que está em seu pc no bloco de notas. Depois clique na opção expandir widgets.



Agora é só apagar todo código que está dentro do HTML, e colocar o novo que você abriu pelo bloco de notepad.

Se você não entendeu o tutorial acima veja essa video aula.

Redimensionando imagens no blog.

<

Bom nesse tutorial ensinarei 2 métodos para redimensinar uma imagem no blog.

Para redimensionar imagens hospedadas no blogger

basta quando você for fazer upload escolher o tamanho e em que posição ela irá ficar

Mas se você quer redimencionar um imagem de outro servidor ai você vai ter que adicionar ao codigo da imagem o seguinte codigo:

width="150"

Exemplo:

<img src="http://img529.imageshack.us/img529/3250/bloggerlogo1wf7.png" border="0" width="150"/></a>

Acima eu ja adicionei o width="150",você pode mudar a numeração de width pelo tamanho que você quiser.

Mudando cor de fundo blog

Bom nesse tutorial encinarei a vocês a como mudar o fundo do blog seja das colunas ou dos post. 

Antes do começamos quero avisa-los que nem todos os templates tem a opção de Mudar a cor do fundo do menu, e do conteúdo individualmente, como por exemplo o template minima.

Então para isso procure no HTML do seu template por:

#sidebar-wrapper { - Lembrando que esse nome varia de Template pra template, mas a palavra sidebar tem em todos (Que significa no blog "MENU").

#main-wrapper { - Lembrando que esse nome varia de Template pra template, mas a palavra main tem em todos (Que significa no blog "POSTS").

Logo após essas duas tags você encontra a linha:

background:

Se não tiver é só colocar, e junto coloque a cor desejada, exemplo:

#main-wrapper {
background: black;

Não esqueça de colocar o ";" ponto e virgula depois da cor.

E no lugar da palavra black você pode inserir o código exadecimal da cor de sua preferência, não esquecendo do simbolo # antes.

Retirando titulo do blogspot

Bom nesse tutoria ensinarei a vocês a como tirar o titulo do blog que fica na barra do navegador.

Pois ja tive esse problema apenas siga o tutorial embaixo para resolvelo.

Para tirar o Título do blogger é bem facil basta ir em Layout > Modelo > Editar html.

Agora encontre o seguinte código no template:

<b:widget id="'Header1'" locked="'true'" title="'TITULODOSEUBLOG(Cabeçalho)'" type="'Header'/">

Agora delete ele do template.

Clique em visualizar para ver se ocorreu tudo certo clique em salvar.

Observação: O título não saira da barra de título do navegador.

Colocando imagens ou frase aletóriamente

Bom nesse tutorial ensinarei a como colocar imagem ou frases aleatóriamente !

Este código serve para colocar frases ou imagens aleatórias no site ou blog. Ele faz aparecer somente uma das frases por vez. Você só precisa copiar o código e colocar as frases que desejar onde está escrito frase um, frase dois.... e assim por diante. Para mudar a quantidade de frases aleatórias você deve repetir quantas vezes forem necessárias esse trecho do código:

if (numero == 5){

frase = "Frase Seis"

}

Mas não esqueça de continuar a seqüência da numeração, portanto cuidado para não repetir os números senão o script não funcionará corretamente. Outra coisa que precisa ser alterada é o numero 6 nesta linha numero_de_imagens = 6, isto significa que temos 6 opções portanto se adicionar ou remover opções altere esse numero também.

Este código funciona também para imagens aleatórias para fazer isso basta colocar no lugar das frases o código das imagens, e funcionará normalmente, aparecendo uma imagem diferente cada vez que o blog for visitado.

<script language="JavaScript">

hoje = new Date()

numero_de_imagens = 6

segundos = hoje.getSeconds()

numero = segundos % numero_de_imagens

if (numero == 0){

frase = "Frase Um"

}

if (numero == 1){

frase = "Frase Dois"

}

if (numero == 2){

frase = "Frase Três"

}

if (numero == 3){

frase = "Frase Quatro"

}

if (numero == 4){

frase = "Frase Cinco"

}

if (numero == 5){

frase = "Frase Seis"

}

document.write(frase)

</script>