Slide Vertical com Postagens Recentes no Blogger

Slide espetacular com efeito em jQuery que exibe as postagens recentes no blog, indicado para ser utilizado na sidebar.

Pensamos muitas vezes em como apresentar as novas publicações de nossos blogs para que elas apareçam em todas as páginas e os visitantes possam ter acesso. Possibilidades não faltam, e a grande quantidade de widgets encontrados na web são prova disso, através deles podemos exibir as novidades a todos que acessem determinada postagem.

Mas, o que muitos blogueiros gostam de utilizar para “divulgar” as postagens recentes são os slides, pois, graça aos estilos que são diferenciais e principalmente efeitos de transição acabam por chamar a atenção de todos que visitam as páginas e influenciam-nos a clicar nos destaques. Infelizmente, encontrar slides que tenham o estilo que lhe agrade não é fácil e principalmente se for um slide que exibe automaticamente as postagens recém publicadas, já que não existem muitos por aí.

Slide com Posts Recentes na Sidebar de seu Blog

Apresentamos nessa postagem um slide com posts recentes que é um verdadeiro destaque. Nele, são inseridas automaticamente as postagens recém publicadas e você não terá nenhum trabalho com edição, o que é uma grande vantagem já que não precisará a toda hora estar substituindo os destaques e ocupando seu tempo que poderia ser utilizado na publicação de novos artigos.

Falando de seu design, esse slide vem no formato vertical, ao qual é recomendado sua colocação na sidebar do blog, mas que também não tem nenhuma objeção que seja utilizado em uma outra parte, bastando que você edite para que ocupe um novo local perfeitamente. Seu efeito de transição muda as postagens automaticamente dos quadros menores para o maior para que fique um variação bem interessante. 

Além de tudo já citado, cada quadro também possuirá um efeito hover (ao passar o mouse) as postagens que ficam com tom escuro quando estáticas se revelarão em um tom mais claro (Opacity), isso faz com que o design já bem completo se torne ainda mais agradável a todos que visitem suas páginas. E, para finalizar, nesse slide também contém logo abaixo setas para que as postagens sejam passadas manualmente caso o usuário desejar.

 ATENÇÃO: É recomendado em todos slides com posts recentes que o feed de seu blog esteja configurado como completo. Para isso vá em "Configurações" - "Outro" - "Permitir feed de blog" - "Completa".

Colocar Slide Vertical com Postagens Recentes no blog

>> Acesse seu Blogger e vá em "Layout".

>> Clique em "Adicionar um gadget" e escolha por "HTML/Javascript".

>> Dentro do conteúdo do gadget, cole o seguinte código:

<style scoped="" type="text/css">
#featuredpostside{width:300px}
ul.abt-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.abt-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative}
ul.abt-sidebar-slider{width:100%;height:500px}
ul.abt-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){display:block}
ul.abt-sidebar-slider img{border:0;width:100%;height:100%}
ul.abt-sidebar-slider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider  .overlayx,ul.abt-sidebar-slider li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.abt-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfPmYcco4Tg3UQPHKIel6oYjJhI5elX2z-SZHWVMZCiK185GLpuJ3sUv8_gwkTscjZ_UlvEomOmlYxcS4C61W8OgClOuNM8T5-wRRvBpi9kHum1CkLGfJti4B_W-VR2-CLkLDR7MtyM4c/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%}
ul.abt-sidebar-slider .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.abt-sidebar-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{font-size:150%}
ul.abt-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://yourjavascript.com/1184835243/slide-sidebar.js"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://prodeveloper.com.br/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>

Configuração do slide

* Em AZUL, ajuste de acordo com a largura desejada.

* Em VERMELHO, substitua pela url de seu blog.

* Em LARANJA, ajuste de acordo com quantidade de posts que desejar que apareça.

>> Clique em "Salvar", arraste o gadget para a área desejada e clique em "Salvar Organização".

>> Vá em seu blog e veja como ficou.

Após o processo concluído da maneira correta esse slide que funciona como um "divulgador"  de suas novas publicações dentro do próprio blog estará em pleno funcionamento, dando ao blogueiro uma nova ferramenta de interatividade com os leitores e também uma nova perspectiva visual em suas páginas.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.

Compartilhar

Curtir

G+

Tweet