Slide Automático com Posts Aleatórios no Blogger


Coloque no blog um slide automático que adiciona aleatoriamente as postagens e exibe-as com efeitos surpreendentes.

Os slides há muito tempo são utilizados para destacar algo importante dentro de um site ou blog. Desde o começo da criação dos códigos html várias alternativas tem sido criadas e aperfeiçoadas, mas, mesmo assim inúmeros blogueiros continuam sem se render a outras possibilidades e ainda veem nos slides a melhor maneira de exibir postagens, publicidades e várias outras coisas que desejam destacar para os visitantes.

Pela web, a quantidade de códigos encontrados para colocar slide num blog é grande e até com boa qualidade se for olhar pelo objetivo proposto por cada um deles. Porém, os mais procurados são os slides automáticos, ou seja, aqueles que não tem a necessidade de estar configurando a todo momento que desejar substituir algum destaque, pois, sua praticidade e economia de tempo conquistam todos que desejam ter algum slide em seu blog.

Slide Automático exibindo todas as postagens do blog

Se você procurava um slide automático com um visual bastante completo e profissional, acaba de encontrar. Nesse slide, as postagens são escolhidas aleatoriamente, exibindo todas as publicações alternando a medida que que novas páginas forem visitadas. 

Além de toda funcionalidade, ele também conta com um design exclusivo, exibindo o título e uma descrição da postagem em destaque com backgrounds com efeitos de transparência. E, também para ser complementado, também vem com setas laterais e exibindo a data em que feita a publicação e os comentários publicados para aquela postagem até o momento.

Recomendamos que antes de fazer qualquer alteração no código, faça um backup do template, caso não saiba como proceder acesse o artigo Como Fazer um Backup do Blog

Colocar Slide com Postagens Aleatórias no blog

1º Passo: Acesse seu Blogger, vá em "Modelo" e depois "Editar Html".

2º Passo: Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>

3º Passo: Logo ACIMA da tag encontrada, cole o seguinte código:

/* Slide Random Blogger-----------------------*/
ul.featpost,
ul.featpost li {
padding:0;
margin:0;
overflow:hidden;
position:relative;
}
ul.featpost li {
height:280px;
display:none;
float:left;
}
ul.featpost li:first-child {
display:block;
}
ul.featpost,
.featuredpost {
height:280px;
}
.featuredpost {
overflow:hidden;
}
ul.featpost img {
width:100%;
height:100%;
}
#main-top .widget-content {
padding:5px;
}
ul.featpost .labeltext {
position:absolute;
bottom:35px;
left:0;
width:85%;
z-index:9;
background-color:#fff;
padding:7px 10px;
color:#000;
}
ul.featpost strong.titlex {
position:absolute;
bottom:95px;
display:block;
left:10px;
z-index:10;
background-color:#fff;
padding:5px 8px;
max-height:22px;
overflow:hidden;
}
ul.featpost strong.titlex a {
font:;
color:#000;
text-decoration:none;
width:100%;
font-weight:bold;
text-transform:capitalize;
display:inline-block;
}
ul.featpost .labeltext .infolabel {
font-size:90%;text-align:right;
}
ul.featpost .labeltext .infolabel a {
color:#F9F619;
}
ul.featpost .labeltext .date {
margin-right:5px;
}
ul.featpost .labeltext p {
margin:5px 0 0;
font-style:italic;
}
#main-top .flex-control-nav.flex-control-paging, #manualslidenya .flex-control-nav.flex-control-paging {
position:absolute;
width:100%;
bottom:15px;
z-index: 2;
}
#main-top .flex-viewport, #main-top-manualslide .flex-viewport {
max-width:800px;
}
.featuredpost .flex-direction-nav a {
top:50%;
margin-top:-20px;
}
a.feathumb {
width:100%;
height:280px;
display:block;
}
#mainmtop-manualslide .widget > h2 {
display: none;
}
#mainmtop-manualslide .Image .widget-content {
padding: 0;
border: 0;
max-height: 280px;
overflow: hidden;
}
#mainmtop-manualslide .widget {
padding: 0;
margin-bottom: 40px;
}
#mainmtop-manualslide {
overflow: hidden;
max-height: 310px;
position: relative;
z-index: 0;
}
#manualslidenya {
padding: 5px;
max-height: 280px;
}
#main-top-manualslide .bungkus {
padding: 0 10px 15px;
}
#main-top-manualslide .Image img {
max-height: 280px;
}
.flex-direction-nav a {
position:absolute;
display:block;
top:90px;
width:25px;
height:40px;
background-color:transparent;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
outline:0;
text-indent:-9999px;
background-image:url(http://1.bp.blogspot.com/-5Sp-MZWyiaU/UWxMDK77sGI/AAAAAAAAI9E/5VUb6FmzgNY/s1600/glyphicons-halflings-white.png);
background-repeat:no-repeat;
z-index: 2;
}
.widget-content:hover .flex-direction-nav a, #manualslidenya:hover .flex-direction-nav a {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}
.flex-direction-nav a:hover {
background-color:#fff;
}
.flex-direction-nav a.flex-prev {
right:0;
-moz-border-radius:3px 0 0 3px;
-webkit-border-radius:3px 0 0 3px;
border-radius:3px 0 0 3px;
background-position:-18px 7px;
}
.flex-direction-nav a.flex-next {
left:0;
-moz-border-radius:0 3px 3px 0;
-webkit-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
background-position:7px 7px;
}
.flex-control-nav.flex-control-paging,
.flex-control-nav.flex-control-paging li {
list-style:none;
padding:0;
text-align:center;
margin:0;
}
.flex-control-nav.flex-control-paging li {
display:inline-block;
}
.flex-control-nav.flex-control-paging a {
display:inline-block;
text-indent:-9999px;
margin:0 3px;
width:10px;
height:10px;
background-color:#fff;
cursor:pointer;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
}
.flex-control-nav.flex-control-paging a.flex-active {
background-color:#fff;
}
.flex-viewport,
.rcbytag {
max-width:612px;
margin:0 auto;
}
ul.featpost strong.titlex {
padding: 10px 15px;background: rgba(67,113,207,0.8);
z-index: 99;
font-size: 20px;
bottom: 100px;
margin-bottom: 35px;
}
ul.featpost strong.titlex a{
color: #f5f5f5;
font-family: 'Oswald',serif;
}
ul.featpost .labeltext {
background: rgba(0,0,0,0.7);
padding: 7px 14px;
width: 385px;
color: #fff;
font-size: 13px;
line-height: 17px;
z-index: 99;
}

4º Passo: Pesquise agora por </head>

5º Passo: Logo ACIMA da tag encontrada cole o seguinte código:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script type="text/javascript" src="http://yourjavascript.com/20381546315/slide-recent-posts.js"></script>

6º Passo: Clique em "Salvar Modelo".

7º Passo: Agora, no menu lateral de seu Blogger vá em "Layout", "Adicionar um gadget" e escolha do tipo"HTML/Javascript".

8º Passo: Dentro do gadget, cole o seguinte código:

<div id="featpost"></div>
<script type='text/javascript'>
jQuery("#featpost").AutofeaturedPost({
MaxPost:5});
</script>

# Ajuste MaxPost:5 para a quantidade de posts que desejar que apareça.

9º Passo: Clique em "Salvar", arraste o gadget para acima da área de postagens e clique em "Salvar Organização".

10º Passo: Acesse seu blog e veja como ficou.

Concluindo

Após a instalação da maneira correta o slide automático estará funcionando normalmente te deixando sem a tarefa de estar sempre configurando os destaques e liberando seu tempo que poderá ser utilizado para a publicação de novos artigos em seu blog.

E você gosta de utilizar slides em seu blog? Já possui algum slide automático?

Deixe seu comentário, ele é a motivação do nosso trabalho.
Proxima
« Anterior
Anterior
Proxima »