Slide de posts recentes com botão Leia mais, título dos posts e categorias- responsivo e automático!

Tempos atrás eu ensinei aqui no blog um slide praticamente igual  a este que vou mostrar hoje, recorde:
Slide de posts recentes com botão Leia mais, título dos posts e categorias
Ele é lindo, funciona perfeitamente mas tem o problema de não ser responsivo.
E a gente sabe que atualmente muitos dos acessos dos blogs são feitos via dispositivos móveis, o que significa que o design do seu blog precisa ser responsivo ou ao menos adaptado aos dispositivos móveis.

Mas esse slide que ensino hoje é responsivo, e portanto cumpre essa função.
Olha que lindo:

Demonstração do tutorial
Vamos aprender?
Antes de começarmos, 4 dicas:

1. Sempre faça o teste em um blog de testes que tenha ao menos 5 posts com imagens grandes. Evite realizar experimentos em seu blog oficial, ok?
2. O blog onde for testar o slide precisa ser público; blogs privados não dão certo.
3. O blog precisa ter ao menos 5 posts com imagens grandes. 
4. Caso seu blog tenha outro slide ou algum widget que use a biblioteca JQuery para rodar pode acontecer dos scripts se anularem e aí nada funcionará. Então, teste sempre em um blog que não tenha muita coisa instalada e sobretudo, nenhum outro slide ou script em JQuery.

Como instalar o slide de posts recentes responsivo no blog

Dicas anotadas? Acesse a página com os códigos necessários à execução do tutorial:

Copiar o código
A seguir acesse o painel administrativo do blog onde deseja instalar o slide e clique em Editar HTML.
Dentro da caixa de código tecle Ctrl+F e na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima de ]]></b:skin> cole o CÓDIGO CSS.
Salve.

Agora, na barra de busca, digite </head> e localize.
Acima de </head> cole o CÓDIGO JAVASCRIPT.
Salve.

Localize </body> e acima disso cole o CÓDIGO DO PLUGIN.
Salve.
Sim, é tudo isso mesmo, um bloco bem grande de código.
Infelizmente, por ser um plugin adaptado de um original Wordpress. eu não consegui (ainda) hospedar em um host e fazer funcionar.
Só funciona assim, colando o plugin inteiro. Mas funciona, e é o que importa, né?

Estamos quase no fim.
Vá ao modo Layout do blog e clique em Adicionar um gadget.
Escolha a opção HTML/JAVASCRIPT  e na caixa que expandir cole o CÓDIGO HTML.
Salve, posicione imediatamente abaixo de seu cabeçalho e salve a organização.
Se tudo deu certo (#temfé) seu slide aparecerá certinho.

Dicas extras muito importantes

1- Como você verá eu deixei 2 opções de CÓDIGO HTML.
A primeira exibe os posts de determinada categoria e a segunda opção exibe os posts recentes gerais.
Caso você opte por exibir posts de determinada categoria precisa editar o CÓDIGO JAVASCRIPT  na parte que aparece assim:

// Enter the posts labels here
cat1 = 'CATEGORIA AQUI';

Onde está grifado em vermelho coloque a categoria cujos posts quer exibir, com a grafia exata de como ela aparece em seu blog.
Exemplo: se eu estivesse usando o slide aqui no blog e quisesse exibir os posts da categoria Dicas para blogs escreveria exatamente assim, que é como essa categoria é grafada.
Entendeu?

2- Se, contudo, optar por exibir os posts recentes gerais apague o trecho marcado em vermelho no CÓDIGO JAVASCRIPT.

3- Caso seu template não seja responsivo você ainda assim pode usar esse slide e inclusive pode configurar seu template para exibir o slide na versão mobile.
Clique no link abaixo para ver como é simples fazer isso:

 Como exibir elementos de página na versão mobile do blog

E terminamos!
Se você tiver alguma dúvida que não tenha sido sanada no tutorial diga nos comentários e eu ajudo se for possível.
E não esqueça de curtir ou compartilhar o post!
Me ajuda muito, muito!!!