Postagens Populares -Efeito acordeon Horizontal

14 de jun de 2013
Vim ensinar vocês a colocarem um efeito nas postagens populares no blog

Primeiramente você terá de adicionar o gadget "Postagens Populares"
depois adicione um Gadget HTML/Java Script e adicione o código abaixo
E suas postagens Populares já irão aparecer com efeito 
<style>
. Populares-posts {
  margin: 0px 30px 0 0;
  padding: 0 0 0 0px;
  position: relative;
  width: 900px;
  height: 363px;
  overflow: hidden;
  
}
. Populares-posts {
	/ * Estilos recomendado para o recipiente ul kwicks * /
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
}
. Populares, mensagens li {
	/ * Estes são necessários, mas os valores são até você (deve ser pixels) * /
	width: 185px;
	height: 363px;
	/ * Não alterar estes * /
	display: block;
	overflow: hidden;
	padding: 0px; / * se você precisa de preenchimento, fazê-lo com uma div interna (ou implementar seu próprio corte box-modelo) * /
}
. Desvanecimento {
  display: block;
  position: absolute;
  direita: 0px;
  width: 300px;
  height: 365px;
  z-index: 4;
  background: url (overlay.png) repeat-y rolar superior direito;
}
. Populares, mensagens li {
	/ * Este é opcional e será desconsiderado pelo script. No entanto, deve ser fornecido para não-JS navegadores habilitados. * /
	margin-right:-4px; / * Definir a mesma opção de espaçamento. * /
	float: left;
}
. Populares-posts. Ponto-title {
  background: # 182424 importantes;!
  color: # fff;
  opacidade: 0,77;
  filter: alpha (opacity = 77);
  position: absolute;
  padding: 10px;
  top: 60px;
}

. Populares-posts-título de um artigo: visited {.
  color: # fff;
  font-size: 16px;
  text-transform: uppercase;

}

. Populares-posts. Ponto-snippet {
  background: # 182424;
  color: # fff;
  opacidade: 0,77;
  filter: alpha (opacity = 77);
  position: absolute;
  padding: 10px;
  top: 215px;
  height: 127px;
  
}
. Populares, mensagens img {
  margin: 0 importante;
  padding: 0 importante;
  width: 600px;
  height: 363px;
}

. Populares, mensagens li a {
  margin: 0 importante;
  padding: 0 importante;
  background-color: # 182424 importantes;!
 
}
. Populares-posts. Ponto-title a {
 opacidade: 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" src="http://accordion-template.googlecode.com/svn/trunk/jquerykwick.js"> </ script>
<script language="JavaScript" type="text/javascript">
/ * <! [CDATA [* /
$ (Document). Ready (function () {
                    $ ('. Populares-posts ul'). Kwicks ({
					máx: 600,
                    min: 300,
					spacing: -4,
                    duração: 200
  				});
});
/ *]]> * /
</ Script>

Vocês podem editar as cores se quiser :)

0 comentários :

Postar um comentário

Seu Comentários é sempre bem vindo!
Comente,opine,se expresse! Este espaço é seu!
Comentar faz parte,então por favor deixem comentários

-Todos os comentários são moderados e só ficarão disponíveis ao serem aprovados
-A área de comentários não é casa da mãe Joana,então tenha respeito.Não use palavrões,nem insultos,ofensas,agressões e baixarias;
-Não serão aceitos comentários Anônimos,comentários repetidos,e que tenham qualquer material publicitários ou de merchandising pessoal ou de benefício de terceiros
-Contatos pessoais devem ser feitos na pagina de contato.
-Não deixe links desnecessários os comentários

AVISOS:

--Blog não é Chat,respeitadas as regras ,é livre o debate dos assuntos aqui postados,Que o espaço de comentários não sirva para bate papo sobre assuntos de caráter pessoal ou estranhos ao blog
--A tentativa de clonar nomes e apelidos de outros usuários para emitir opiniões em nome de terceiros configura crime de falsidade ideológica.

Espero que tenham gostado do blog e que volte sempre!