Efeito para Home Page

[IsmaelS.]

Qual é sua questão:
Olá,

Vejam esta print:



Desejava ter esse efeito, mas para o meu Home Page, fórum que vi:

http://testmp.forumeiro.com/forum

Endereço e versão do meu fórum:
www.master-publicitario.forumeiros.com (PunBB)

Apresente-nos imagens do problema (se necessário):
Nenhuma

[Scrat]

Olá senhor,
Adicione o seguinte código à vossa Mensagem da Home Page:

Código:

<script>$(function(){$('#pun-navlinks a').css( {backgroundPosition: "0px 32px"} ).mouseover(function(){$(this).stop().animate({backgroundPosition:"(-0px 64px)"}, {duration:350})}).mouseout(function(){$(this).stop().animate({backgroundPosition:"(0px 32px)"}, {duration:300, complete:function(){$(this).css({backgroundPosition: "0px 32px"})}})})});</script><script type="text/javascript">$(function(){$("#vertical_slider li a").each(function(){$(this).hover(function(){$(this).animate({width: "405px"}, {queue:false, duration:450});},function() {$(this).animate({width: "128px"}, {queue:false, duration:450});});});/*To use this you need to load jquery easing plugins*/$("#vertical_slider.easing li a").each(function(){$(this).hover(function(){$(this).animate({width: "405px"}, {queue:false, duration:450, easing:'easeOutBack'});},function() {$(this).animate({width: "128px"}, {queue:false, duration:450, easing:'easeInBack'});});});});</script></head><ul id="vertical_slider"><li><a href="/rss" class="rss_feed"><p><strong>Ultimele Subiecte</strong><br />Urmareste ultimele subiecte ale <br />forumului <br> </p></a></li><li><a href="#" class="news"><p><strong style="font-size:24px;">Anunturi/Actualizari</strong><br />Ultimele noutati si actualizari de pe <br>forumul .<br> </p></a></li><li><a href="#" class="suport"><p><strong>Suport</strong><br />Lorem ipsum dolor sit amet, <br>consectetur adipisicing elit<br> sed do eiusmod tempor incididunt</p></a></li><li><a href="#" class="portfolio"><p><strong>Portofoliu</strong><br />Sed ut perspiciatis unde omnis <br>error sit voluptatem accusantium doloremque <br> </p></a></li></ul>

E depois este código em vossa folha de estilo CSS:

Código:

#vertical_slider {
font :italic 1.2em/1.2em Georgia, "Times New Roman", Times, serif;
color:#999;
text-align:center;
list-style: none;
margin-bottom: 10px;
margin-top: 4px;
padding: 0;}

#vertical_slider  a{
text-decoration:none;
color:#999;}

#vertical_slider li{
height: 90px;
padding: 0px;
margin:0 15px 0 0;
list-style:none;
display:inline;}

#vertical_slider li a{
display: inline-block!important;
overflow: hidden;
height: 90px;
line-height:90px;
width: 128px;
white-space:nowrap;
text-align:left;}


#vertical_slider li a p {
padding:0 0 0 135px;
line-height:normal;}

#vertical_slider li a p strong {
font-size:24px;
color:#336600;}


#vertical_slider  li a.rss_feed {
background:url(http://i36.servimg.com/u/f36/11/96/49/61/rss10.png) top left no-repeat;}

#vertical_slider li a.news {
background:url(http://2img.net/i/fa/optimisation_fdf/common/voix.png) top left no-repeat;}

#vertical_slider li a.suport {
background:url(http://i36.servimg.com/u/f36/11/96/49/61/suport10.png) top left no-repeat;}


#vertical_slider li a.portfolio {
background:url(http://i36.servimg.com/u/f36/11/96/49/61/portof10.png) top left no-repeat;}

Até mais

[IsmaelS.]

Perfeito obrigado !
Resolvido.

[Conteúdo patrocinado]