Slider responsivo de postagens recentes para blog | Quero Dicas | Tutoriais para seu blogs


Slider responsivo de postagens recentes para blog


Hoje eu trouxe um modelo de Slide de postagens recentes para seu blog modelo responsivo.  

Lembre-se: Modelo Responsivo, significa que ele se adaptam a largura da área onde você for colocar. Exemplo: Se colocar acima da área do post ele se adaptará ao tamanho desta área; Se colocar na sidebar ele se adaptará a largura da sua sidebar.

Este modelo foi postado pelo site prodeveloper.com.br. Infelizmente, o site não está mais no ar (Espero, sinceramente, que eles voltem!). Mas antes deles fecharem o site, eu guardei este, entre outros tutoriais que eles disponibilizaram e hoje estou repassando a vocês. Minha unica alteração no código foi a sua customização ao CSS (estilo).


A instalação é simples (três códigos) e para facilitar ainda mais, deixei ao lado de cada código do CSS onde você poderá alterar suas cores e fontes. Caso mexa em qualquer outro local do código, poderá ocorrer erros ao resultado.

Outra alteração que você deverá alterar é seu endereço completo de seu blog no campo onde está o endereço da fonte do slide (http://prodeveloper.com.br)  e a quantidade de postagem que deseja vincular (MaxPost:8).

Vamos ao Tutorial
Como sempre recomendo, faça um backup do seu template, ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e  dê preferências ao blog de teste! Caso não saiba fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog.
1° Passo: Acesse seu Blogger, vá em "Modelo" e depois clique em "Editar HTML"
2° Passo: Clique no código do template, pressione "CTRL+F" e pesquise por :
 
</head>

3° Passo: Logo ACIMA do código encontrado, cole o seguinte:
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

4º Passo: Agora pesquise por:
 
<div class='column-center-inner'>
Lembrando que essa div é encontrada em templates padrões do Blogger que representa a área logo acima da postagens. Caso seu blog não possua, será necessário que você encontre o trecho referente a esse espaço em seu blog /ou outro local que deseja instalar.
5° Passo: Logo ABAIXO do trecho encontrado, cole o seguinte código:

 Slide de postagens recentes Estilo Rotativo

Altere a área http://prodeveloper.com.br pelo seu endereço completo de seu blog e a quantidade de postagem que deseja vincular MaxPost:8,

6° Passo: Pesquise agora por:
 
]]></b:skin>

7° Passo: Logo ACIMA do código encontrado, cole o seguinte:

 CSS; Slide de postagens recentes Estilo Rotativo

Faça as suas alterações de cores e tamanhos de fontes como desejar.
Tabela de cores: Clique e acesse

8° Passo: Clique em "Salvar Modelo". Vá em seu blog e veja como ficou.

Observações e Erros:
• Este slide aparecerá somente na home do seu blog, Caso deseja que ele apareça em todas as páginas e postagens, retire o código <b:if cond='data:blog.url == data:blog.homepageUrl'> e </b:if> localizado no 5º passo. 

• Este Slide só aparecerá com seu Feed ativo e precisa ser publico.

• Caso tenha seguido todo o tutorial e mesmo assim o slide não apareceu em seu blog. O que poderá estar ocorrendo é que seu layout poderá está com excesso de scripts e ocorrendo conflitos. Minha dica é: Tente descobrir o script em conflito e o elimine.

Gostou do Slide de postagens recentes para seu blog? Comente!
Beijinhos


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.