quarta-feira, 20 de janeiro de 2016

Emu do blog

Este tutorial vai te ensinar a deixar o menu do jeito que esta na foto. É necessário apagar todos os códigos antigos antes de adicionar os novos.

ps: como assim apagar os códigos antigos? R: o seu layout veio com um menu certo? então apague o código que pertence a ele, ou seja, apague o código do menu atual para colocar o novo :)

Muitas vezes o CSS esta 'escondido' dentro do template, caso esteja basta clicar em ►<b:skin>...</b:skin> para que você possa visualizar CSS e editar.

no css:

/* ---  Menu  -------- */
.widget-content { width:100%}
#PageList1 {background: #; width: 100%;height: 44px;  line-height:20px; margin-bottom: 38px; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; text-transform:uppercase; }
#PageList1 ul li a {font-family: &#39;Open Sans Condensed&#39;, sans-serif; color:#737373; text-decoration: none;
font-size: 24px; padding: 05px; font-weight: 300; -webkit-transition-duration: .50s;-moz-transition:  50s; -o-transition: 50s;}
#PageList1 ul li a:hover {color:#9f9f9f;text-decoration: none;}
/* ---  Fim do Menu  -------- */

Para posicionar o menu antes das postagens encontre a tag '<body>' e procure por ''<div id='content-wrapper'>" e logo depois dessa linha cole este código (click no link).

Personalizando o menu:

border (bottom / top) - linha do menu;

font-family - tipo da fonte;

font-weight - normal, bold, bolder, lighter, 100, 200, 300, 400;

font-style - estilo da font, suas variações são oblique, initial, inherit.

text-transform: uppercase - texto maiúsculo, suas variações: none: texto normal, capitalize: todas as primeiras letras do texto em maiúsculas, lowercase: todas as letras do texto em minúsculas ;

#PageList1 ul li a - cor do link, tipo de fonte, tamanho, padding (espassamento);

#PageList1 ul li a:hover - cor do link quando clicar;

#PageList1 - width (tamanho total do menu), height (altura do menu), aqui você pode adicionar cor no fundo em 'background'.

Fonte que utilizei: <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

Numeraçao paginas

Link de navegação numerado para Blogger

Marcos Lemos

Layout, Templates

Mais um artigo para ajudar você a customizar seu template no Blogger, agora mudando os links de navegação de página padrões do Blogger, numerando cada página. Tudo o que você puder fazer para facilitar a navegabilidade de seu blog é importante e uma dessas formas e permitir que o visitante percorras suas páginas uma por uma, passando pelo conteúdo que deseja. E o modelo que vou mostrar é como ilustra a imagem.

Não está feliz com seu Blog?
Descubra como SALVAR seu Blog em 40 dias - http://www.salvarblog.com
Curso "Técnicas de SEO para Blogs": http://seo.blogueiro.pro

Introdução e recomendações.

Já ensinei um modelo aqui bem parecido com esse, mas muita gente teve dificuldades e ele apresenta mesmo um pequeno problema para blogs que publicam mais de 1 artigo por dia, mas se quiser testar também, o resultado é praticamente o mesmo:

Paginação Numerada para Blog

Bem como já mostramos outras formas de mudar o link de navegação das páginas:

Personalizar Links de Navegação do Blogger

Vale lembrar também que, antes de fazer qualquer modificação em seu blog principal, teste em um blog preparado para isso e faça um backup completo do seu blog original para não passar sustos e poder reverter as mudanças caso algo não saia como desejado.

Inserindo paginação numerada no Blogger.

O modelo que vou mostrar abaixo eu encontrei no blog Blogger Widgets (em inglês). Veja o artigo original caso tenha alguma dúvida: Numbered Page Navigation For Blogger.

Proceda da seguinte forma:

1. Abra o painel do Blogger em sua conta e clique no menu “Layout” ~> “Editar HTML”. No código fonte de seu blog procure pela seguinte linha:

]]></b:skin>

2. Imediatamente ACIMA dela cole o seguinte trecho de CSS (que determina as caracteríticas dos elementos que serão usados):

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

4. Não altere nada aí e agora procure por </body> que estará bem no final do código-fonte. Também, imediatamente ACIMA dele, cole o trecho que segue:

<!-- Inicio do codigo de navegacao -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Anterior&#39;;
var downPageWord =&#39;Próximo&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!-- Final do codigo de navegacao -->

terça-feira, 19 de janeiro de 2016

Teste 3asdsdsdsa

asnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoi asnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoiasnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoiasnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoiasnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoi
asnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoiasnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoiasnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoiasnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoiasnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoi

asnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoiasnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoiasnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoiasnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoiasnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoiasnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoiasnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoiasnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoiasnjd nsdo hsdahsdh soaia hhaadsh ihshaaihosshihids ahasho hsoi

Outro teste

Testetestgdsabdm skxcnklakxcn nio nc cds cns undd xsnc Testetestgdsabdm skxcnklakxcn nio nc cds cns undd xsnc Testetestgdsabdm skxcnklakxcn nio nc cds cns undd xsnc Testetestgdsabdm skxcnklakxcn nio nc cds cns undd xsnc Testetestgdsabdm skxcnklakxcn nio nc cds cns undd xsnc Testetestgdsabdm skxcnklakxcn nio nc cds cns undd xsnc Testetestgdsabdm skxcnklakxcn nio nc cds cns undd xsnc Testetestgdsabdm skxcnklakxcn nio nc cds cns undd xsnc

Testetestgdsabdm skxcnklakxcn nio nc cds cns undd xsnc Testetestgdsabdm skxcnklakxcn nio nc cds cns undd xsnc Testetestgdsabdm skxcnklakxcn nio nc cds cns undd xsnc Testetestgdsabdm skxcnklakxcn nio nc cds cns undd xsnc

Menu