30 de nov de 2011

Postagens populares em forma de slide com efeito accordeon


Mais um modelo de slide para usar nas postagens mais vistas em seu blog. adaptada por Abu Farhan.


O que é necessário é que você tenha em seu blog o widget com as postagens populares e que cole o código em um widget HTML/Javascript. Estando implementado, deixe como mostra o exemplo.








Clique em Adicionar um Gadegt



Ao abrir, clique em  HTML/Javascript



Cole então o próximo código fazendo as modificações necessárias.


<style type="text/css" media="screen">
/*Popular post---------------------------------------------------------------------*/
.poppost{
margin: 10px 0px 20px -23px;
}
.popular-posts {
  margin: 0px 0px 30px 0px;
  padding: 0 0 0px 0px;
  position: relative;
  width: 910px;/*comprimento do slide*/
  height: 283px;/*largura do slide*/
  overflow: hidden;

}
.popular-posts  {
    /* recommended styles for kwicks ul container */
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}
.popular-posts  li{
text-shadow: 0.1em 0.1em 0.2em #000;
    /* these are required, but the values are up to you (must be pixel) */
    width: 160px;/*comprimento de cada item do slide fechado*/
    height: 263px;
    /*do not change these */
    display: block;
    overflow: hidden;
    padding: 0px;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.fadeout {
  display: block;
  position: absolute;
  right: 0px;
  width: 160px;
  height: 265px;
  z-index: 4;
  background: url(overlay.png) repeat-y scroll top right;
}
.popular-posts  li {
    /* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
    margin-right: -4px; /*Set to same as spacing option. */
    float: left;
}
.popular-posts .item-title {
  background: #182424   !important;
  color: #fff;
  opacity: 0.77;
  filter:alpha(opacity=77);
  position: absolute;
  padding: 10px;
  top: 60px;
}

.popular-posts .item-title a:visited{
  color: #fff;
  font-size:16px;
  text-transform:uppercase;

}

.popular-posts  .item-snippet{
  background: #182424;
  color: #fff;
  opacity: 0.77;
  filter:alpha(opacity=77);
  position: absolute;
  padding: 10px;
  top: 215px;
  height:127px;

}
.popular-posts  img {
  margin: 0  !important;
  padding:0  !important;
  width:600px; /*Tamanho da imagem quando abre o item do slide*/
  height:363px;
}

.popular-posts  li a {
  margin: 0  !important;
  padding:0  !important;
  background-color:#182424 !important;

}
.popular-posts  .item-title a {
 opacity: 0.77;
  filter:alpha(opacity=77);
} </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[

/*
    Kwicks for jQuery (version 1.5.1)
    Copyright (c) 2008 Jeremy Martin
    http://www.jeremymartin.name/projects.php?project=kwicks
  
    Licensed under the MIT license:
        http://www.opensource.org/licenses/mit-license.php

    Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);
$(document).ready(function() {$('.popular-posts').find("img").attr('src', function (i, e) {return e.replace("s72-c", "s1600")})
                    $('<span class="fadeout"></span>').insertBefore('.item-content');
});

//]]>
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
                    $('.popular-posts ul').kwicks({
                    max : 600,
                    min : 300,
                    spacing : -4,
                    duration: 200
                  });
});
/*]]>*/
</script>

7 comentários:

  1. ja baixei o de atualizações automaticas mais vou trocar por esse dai acei melhor vou testar se der certo tudo direitinho eu fico com ele \o/ :D

    Muito obrigado o blog está nota 10!

    um grande Abraço.

    ResponderExcluir
  2. Nãão Pegou ;( aaah :'-' n apareceu nada ;(

    ResponderExcluir
  3. Aqui pegou mais não pegou a imagem '-'

    ResponderExcluir
  4. aqui fucionou mais nao apareceu nadaa

    ResponderExcluir
  5. como que eu troco a cor dessas barrinhas ?

    ResponderExcluir
    Respostas
    1. Procure no código por: #182424

      E troque pelo código da cor desejada.

      Excluir
  6. Só está aparecendo uma postagem, como faço para corrigir?

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube