Swift

Slide com Posts Recentes Automático no Blogger

Hoje veremos um slide que apresenta as postagens recentes de forma automática.
Este slide funciona em conjunto com 3 tipo diferentes de arquivos javascript: o JQuery, o script S3lider e o script de posts recentes, criado pelo Anhvo.
A Rô Zancheta, do Bloggersphera, conseguiu fazer uma adaptação no script original de posts recentes, conseguindo aliar este script ao script do S3lider, fazendo com que os posts publicados recentemente apareçam automaticamente em forma de slider.
No tutorial da Rô, ela explica como conseguiu fazer tais adaptações, que por sinal, o tutorial dela é uma verdadeira aula, para usuários mais avançados.
Seguindo as explicações da Rô Zancheta, eu testei o código, e fiz umas pequenas adaptações nele, afim de facilitar a instalação e o uso, mas os créditos da adaptação dos scripts são todos dela.
[becape]Antes de mais nada, sempre é bom recomendar que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.[/becape]

1º passo – Aplicar os estilos para o Slide:

No painel do blogger, acesse o menu “modelo”, clique em “editar html” e cole este código logo ACIMA da tag ]]></b:skin>

/* s3Slider
--------------------------- */
#slide-wrapper ul li{
list-style:none;
margin:0;
padding:0;
}
/*--- container geral do slide ---*/
#slide-wrapper{
margin:auto;
width:auto; /* coloque um valor na largura se quiser */
}

/*--- container do slide ---*/
#postslide{
height:250px; /* altura total do container */
width:auto; /* coloque um valor na largura se quiser - deve ser a mesma do container */
margin:5px auto;
overflow:hidden;
position:relative;
}

/*--- conteúdo do slide ---*/
#postslideContent{
position:absolute;
top:0;
right:0;
width:auto; /* coloque um valor na largura se quiser - deve ser a mesma do container */
background:#333; /* edite cor de fundo se quiser*/
}

.postslideImage{ /* --Não alterar-- */
display:none;
float:left;
position:relative;
}

/*--- fonte do texto do titulo dos posts ---*/
.postslideImage span{
background-color:#000;
color:#fff;
display:none;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
font-size:20px;
left:0;
bottom:0;
padding:20px 15px;
position:absolute;
width:auto; /* coloque um valor na largura se quiser - deve ser a mesma do container */
}

/*--- fonte do texto do resumo do post ---*/
.postslideImage span p{
font-size:12px;
line-height:1.6em;
padding:10px 25px 15px 0;
margin:auto;
}

/*--- estilos dos links ---*/
.postslideImage a:link,
.postslideImage a:visited,
.postslideImage a:hover{
color:#fff; /* você pode alterar a cor dos links */
}
No código acima eu destaquei nas cores azul e verde, os trechos de códigos editáveis, para que você possa alterar as medidas e as cores de acordo com seu template.

2º passo - Instalar o arquivo Javascript do Slider:

Para o funcionamento do slide é necessário utilizar dois scripts:
1) postslide
2) recentpostslide

Depois de hospedados, você deverá acrescentar os arquivos no seu template.
Volte no menu "modelo", entre na edição html e cole o seguinte código logo ACIMA da tag </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script src='URL-DO-ARQUIVO-POSTSLIDE' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#postslide&#39;).postslide({
timeOut: 6000});
});
</script>

3º passo - Escolhendo local que ficará o slide para Incorporar o script de posts recentes:

Agora escolha o local onde quer posicionar o seu slide.
Você pode instalar o slide logo abaixo do cabeçalho, ou pode instalá-lo acima da coluna de postagens, em "main".
Esta parte é muito importante e a mais complicada, preste bastante atenção, pois você precisará editar o código para ajustar o slide de acordo com o local que você escolher.
Vou explicar abaixo 2 exemplos de locais para você escolher e instalar o slide.
Eu aconselho, que após a instalação do slide no local que você escolheu, você volte no código CSS (1º passo) e ajuste as medidas de "width".

1. Instalar o Slide abaixo do cabeçalho:

? Templates nativos e/ou modificados:
Para instalar seu slide abaixo do cabeçalho, você deverá verificar se no seu template a div crosscol está visivel. Caso não esteja, é necessário que você habilite-a no seu template.
Veremos como fazer isso, a seguir.
Volte na edição HTML do seu blog, NÃO marque "Expandir Modelos de Widgets" e procure por:

<div id='crosscol-wrapper' style='text-align:center'>
 <b:section class='crosscol' id='crosscol'/>
</div>
Substitua tudo por:

<div id='crosscol-wrapper'>
<!-- Slide Posts Recentes início -->
<div id='slide-wrapper'>
<div id='postslide'>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = &quot;http://lh3.ggpht.com/_UCfxgWHzU98/TJe2iGJDFPI/AAAAAAAADlQ/Kl037bivjzg/no-image.jpg&quot;;
showRandomImg = true;
imgwidth = 660; <!-- ajuste a largura da imagem -->
imgheight = 250;
summaryPost = 140;
startpost = 1;
numposts = 7; <!-- numero de posts que aparecem no slide -->
home_page = &quot;<data:blog.homepageUrl/>&quot;;
</script>
<script src='URL-DO-ARQUIVO-RECENTPOSTSLIDE' type='text/javascript'/>
</div>
</div><!-- Slide Posts Recentes fim -->
<b:section class='crosscol' id='crosscol'/>
</div>
Em imgwidth = 660; você deve colocar a largura da imagem de acordo com a mesma medida total do seu template. Pode ser a mesma medida que está em "outer-wrapper".
Caso não tenha a div crosscol no seu template, basta acrescentá-la, abaixo de
<div id='content-wrapper'>


2. Instalar o Slide acima da coluna de postagens:

? Templates nativos e/ou modificados:
Se você quiser que seu slide fique logo acima da coluna de postagens, você deverá colar o código logo abaixo da div main-wrapper.
Vá no menu "modelo", entre na edição html e procure por:

<div id='main-wrapper'>
E logo abaixo dela cole o seguinte código:

<!-- Slide Posts Recentes início -->
<div id='slide-wrapper'>
<div id='postslide'>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = &quot;http://lh3.ggpht.com/_UCfxgWHzU98/TJe2iGJDFPI/AAAAAAAADlQ/Kl037bivjzg/no-image.jpg&quot;;
showRandomImg = true;
imgwidth = 410; <!-- ajuste a largura da imagem -->
imgheight = 250;
summaryPost = 140;
startpost = 1;
numposts = 7; <!-- numero de posts que aparecem no slide -->
home_page = &quot;<data:blog.homepageUrl/>&quot;;
</script>
<script src='URL-DO-ARQUIVO-RECENTPOSTSLIDE' type='text/javascript'/>
</div>
</div><!-- Slide Posts Recentes fim -->
Em imgwidth = 410; você deve colocar a largura da imagem de acordo com a mesma medida que tem em "main-wrapper" no seu template.
? Templates Designer de Modelo:
Se você usa uns dos modelos novos de template Designer de Modelo, eu aconselho que você instale o slide acima da coluna de postagens.
Eu testei o código, tentando instalá-lo abaixo do menu e particularmente, não deu certo, não ficou bom, mas se você quiser testar, fica a seu critério.
O melhor local para instalação deste slide para os templates designer de modelo, realmente é acima da coluna de postagens.
O código do local para instalar o slide acima da coluna de postagem é diferente, portanto preste atenção:
Vá no menu "modelo" >> "editar html" e procure por:

<div class='column-center-inner'>
E cole logo ABAIXO dela o seguinte código:

<!-- Slide Posts Recentes início -->
<div id='slide-wrapper'>
<div id='postslide'>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = &quot;http://lh3.ggpht.com/_UCfxgWHzU98/TJe2iGJDFPI/AAAAAAAADlQ/Kl037bivjzg/no-image.jpg&quot;;
showRandomImg = true;
imgwidth = 560; <!-- ajuste a largura da imagem -->
imgheight = 250;
summaryPost = 140;
startpost = 1;
numposts = 7; <!-- numero de posts que aparecem no slide -->
home_page = &quot;<data:blog.homepageUrl/>&quot;;
</script>
<script src='URL-DO-ARQUIVO-RECENTPOSTSLIDE' type='text/javascript'/>
</div>
</div><!-- Slide Posts Recentes fim -->

Onde está imgwidth = 560; você deve ajustar esta medida e colocar a largura da imagem de acordo com a mesma medida que tem no seu template.
As larguras dos templates designers de modelo variam de acordo com o modelo do template, portanto não há como eu informar qual o valor correto que você deverá incluir neste campo, você terá que testar, incluindo valores e ir visualizando para ver se está de acordo com a largura do seu template.
 
[alerta]Lembrando que, a funcionalidade deste script pode variar de acordo com o template.
Templates que possuem muitos scripts, acabam gerando "conflitos" entre si, por isso alguns arquivos javascript dão erro pra alguns, mas funcionam perfeitamente para outros.
Caso este script não funcione em seu blog, verifique se você já tem instalado algum outro script que conflite com o JQuery.

You Might Also Like

0 comentários

Facebook 2018

Visitas

Instant Message fev

Link Direto Fev

Mobile Instant Message fev

Banner Rodapé pc

Banner Mobile Definitivo 2018

Popunder Mobile Definitivo

Banner Mobile Definitivo

Instage Mensagem pc

Popunder Definitivo

Banner video

Banner Mobile 20188

Banner Mobile 2018

Popunder Mobile Real

Popunder Mobile

Flickr Images