Slide de postagens recentes- modelo responsivo

Eu já ensinei aqui no blog alguns modelos de slides, relembre:

Modelos variados de slides para blog

Hoje quero compartilhar contigo este modelo, que é um dos mais bonitos que consegui adaptar para o Blogger.
Veja:

Demonstração do slide de posts recentes 
Ele é responsivo, o que significa que ele assumirá a largura da área onde for colocado.
Se colocar acima da área do post ele assumirá o tamanho dessa área; se o colocar na sidebar ele ficará da largura da sidebar, e se o inserir abaixo do menu ele ficará da largura total do blog.

A instalação é bem simples, apenas três códigos, sendo que a maior dificuldade é a personalização.
E mesmo isso é muito fácil, trata-se apenas de trocar cores e fontes, caso queira.
Se não mexer em nada o resultado será exatamente como em minha demonstração.
A única alteração indispensável é colocar o endereço completo de seu blog no campo destacado no terceiro código, o Código HTML.
Vamos aprender?

Dicas preciosas para evitar erros

→ Para começar a dica de ouro é: faça antes em um blog de testes que tenha exatamente o mesmo template de seu blog real.

→ Leia o tutorial inteiro antes de começar. E leia o código, especialmente o primeiro código, o que comanda a aparência do slide, o código CSS.
Repito: leia o código até entender; faça testes até achar o que deseja, mexa, revire, faça com dedicação e paciência.

Instalando o Slide de postagens recentes

Vá ao painel de seu blog e clique na aba Modelo. A seguir clique em Editar HTML.
Dentro da caixa de códigos tecle Ctrl+F e na barra de busca que aparecer digite ]]></b:skin>.
Tecle Enter para localizar.
Acima disso cole o código CSS:

Copiar o código CSS
Este é o código que define cores, fontes, a aparência geral do slide.
Deixei marcado emCAPSLOCK todas as áreas que acho seguro você editar.
Ajuste as cores para combinar com seu blog, ajuste as fontes se desejar, etc.
Feito isso, salve.

Agora, dentro da caixa de pesquisa digite </head> e tecle Enter.
Acima dessa tag cole o código JAVASCRIPT:

Copiar o código JAVASCRIPT
Salve a alteração.
Uma dica importante: caso seu blog já tenha a chamada JQuery apague a primeira linha do código pois não é preciso ter 2 chamadas Jquery no mesmo template.

Agora vamos instalar de fato o slide.
Vá ao seu painel do blog e clique na aba Layout (Deseño em espanhol, ou Esquema, em português de Portugal).
Clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Cole dentro da caixa que expandir o código HTML:

Copiar o código html
No campo destacado em azul coloque, claro, o endereço completo de seu blog.
Salve, arraste para onde deseja que fique e salve a alteração.
Se tudo deu certo seu slide está pronto.

Fiz tudo conforme o tutorial e não deu certo, o que houve?

Não há como eu saber pois cada template possui características próprias.
Podem ter acontecido algumas dessas coisas:

• Seu blog possui excesso de scripts e eles causaram conflito com o slide; Nesse caso precisa descobrir a causa do conflito e elimina-la se possível;
• Você pulou alguma parte, inseriu algum dos códigos no lugar errado ou apagou alguma aspa, sinal ou comando sem querer. Refaça tudo para se certificar;
• Seus feeds precisar ser ativos e seu blog precisa ser público;
• Você colocou o endereço de seu blog de forma incorreta ou incompleta;
• Seu template não assume o slide, e nesse caso não há o que fazer, a menos que troque de template;
• Já existe algum slide em seu blog? Não pode ter outro além desse.

Tutorial completo, longo mas bem simples de seguir. Leia com atenção, faça com paciência.
Acredite em mim, fazê-lo vai demorar bem menos do que você imagina, e certamente bem menos do que eu demorei para traduzir os comandos, interpretar o código, adaptar ao Blogger, testar em 4 templates nativos diferentes montar o tutorial :)