Neste tutorial veremos como inserir setas de navegação flutuante no blogger, que nada mais é do que os links de “Postagens mais antigas” e “Postagens recentes” do blog.
Você já deve ter visto em alguns blogs links de navegação flutuantes, que deslizam ao longo da tela, possibilitando que seus visitantes possam navegar entre seus posts, facilitando assim, que ele encontre o post anterior, ou o post mais recente, fazendo com que ele continue navegando pelo seu blog.

1º passo: Implementar o código CSS:

Se você estiver usando um dos modelos padrões do Blogger, Designer de Modelo, você poderá adicionar código CSS de 2 maneiras. Vou mostrar aqui as 2, assim você poderá escolher qual a maneira mais fácil para você, ok?

1. Adicionar CSS através do HTML do Template:
Acesse o painel do Blogger e clique no menu “Modelo“, em seguida clique no botão “editar HTML“.
No editor HTML do seu template, clique no botão “formatar modelo” e em seguida use as teclas Ctrl+F e procure pela tag ]]></b:skin>

Dica: Se ao lado desta tag tiver aparecendo aquela setinha preta, clique nela.
localizando a tag skin no blogger

Você deverá colar o código CSS bem ACIMA da tag ]]></b:skin>

2. Adicionar CSS através do painel do blogger:
No painel do Blogger, clique no menu “Modelo”, em seguida clique no link “Avançado” e em seguida no link “Adicionar CSS”.
Dentro do campo à direita, é o local que você vai adicionar o código CSS, que eu estou disponibilizando logo aqui em baixo. Depois de adicionado, clique no botão “aplicar ao blog” para salvar as alterações.
adicionar css pelo painel do blogger

ESTE É O CÓDIGO CSS PARA VOCÊ ADICIONAR:

/* Links de navegação flutuante 
----------------------------------- */
#blog-pager-newer-link {   /*-----botão do lado direito -postagens recentes----*/
float : left;
padding-left : 680px;     /* --ajuste as medidas aumentando ou diminuindo a numeração--*/
border : none;
}
#blog-pager-older-link {   /*----botão do lado esquerdo - postagens mais antigas----*/
float : right;
padding-right : 537px;    /* --ajuste as medidas aumentando ou diminuindo a numeração--*/
border : none;
}

.Blogprevlink{ 
margin-left:-100px; position:fixed;top:55%;display:block;text-decoration:none;width:54px;height:65px;z-index:99;
background:url(http://4.bp.blogspot.com/-FeHOY5F5Ve0/UgWuQ6757FI/AAAAAAAAASA/ydTmayGMZkc/s1600/button_prev.png) no-repeat; width:47px;
height:133px;
}

.Blogprevlink .detail{width:0;line-height:1.6em;overflow:hidden;position:absolute;top:0;left:70px;}
.Blogprevlink .detail span{padding:20px;display:block;height:100px;overflow:hidden;width:180px}

.Blognextlink{ 
margin-left:-100px; position:fixed;top:55%;display:block;text-decoration:none;width:55px;height:65px;z-index:99;
background:url(http://3.bp.blogspot.com/-IP9Rc29STno/UgWuOpgn01I/AAAAAAAAAR4/SoqbK53-TWk/s1600/button_next.png) no-repeat; width:47px;
height:133px;
}

.Blognextlink .detail{width:0;line-height:1.6em;overflow:hidden;position:absolute;top:0;left:70px;}
.Blognextlink .detail span{padding:20px;display:block;height:100px;overflow:hidden;width:180px}
#prevLink{left:10px !important}
#prevLink{left:30px}
#nextLink{right:30px; }
#nextLink .detail{right:70px !important;left:auto}
#nextLink{right:10px !important}


Agora vamos verificar as partes que você deve editar para ajustar as setas de acordo com a largura do seu template.

Para ajustar a seta referente as postagens recentes:
680 → ajuste as medidas aumentando ou diminuindo esta numeração.
Para ajustar a seta referente as postagens mais antigas:
537 → ajuste as medidas aumentando ou diminuindo esta numeração.

Se quiser substituir a imagem da seta, você deve usar uma imagem no tamanho de 47X133 (47 de largura e 133 de altura).
 

0 comentários:

Postar um comentário

Regras dos comentários

1. Todos os comentários são lidos e se possível respondidos.
2. Não serão toleradas faltas de respeito.
3. Se possível comente e faça de nós um grupo feliz.
4. Caso comente como Anónimo o seu comentário será anulado!
5. Caso o link não Esteja Pegando Deixe um comentário avisando!

Obrigado

 
Top