SSGamers - 12 Anos online por você.

#SSGamers - A Comunidade que mais crescer no brasil!

Participe do fórum, é rápido e fácil

SSGamers - 12 Anos online por você.

#SSGamers - A Comunidade que mais crescer no brasil!

SSGamers - 12 Anos online por você.

Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Chegou o novo tema 6.5.5 - SSGamers - Servidores online de qualidade - Aproveite e entre para nossa comunidade, inscreva-se já! - Ouça nossa web radio - Veja nossas novidades - Participe dos nossos setores de jogos online - Parcerias aberta fale já com um administrador.

    Barra lateral de SHOPPING.

    FreddyVsJason
    FreddyVsJason
    --> Postador Médio
    --> Postador Médio


    Mensagens : 246
    Moedas : 5689
    Data de inscrição : 24/09/2012

    Barra lateral de SHOPPING. Empty Barra lateral de SHOPPING.

    Mensagem por FreddyVsJason Sáb 23 Mar 2013 - 11:26

    Olá a todos,

    Hoje iremos fazer uma barra lateral de SHOPPING

    Primeiro insira o código html:
    Código:
    <div id="vitrine">
                
                <p class="pub">Shopping <b>RAAFS</b>©
                   <a href="#" rel="nofollow" target="_blank" class="exit" onclick="document.getElementById('vitrine').style.display='none';"> </a>
                   <a href="#" rel="nofollow" class="oa" target="_blank"> </a>
                </p>
                
                <ul id="menuprodutos">
                   <a href="#" target="_blank" rel="nofollow" title="1" itemscope="" itemtype="http://schema.org/Product" itemprop="url">
                      <img width="90" height="90" src="/imagens/1.png" title="1" alt="1" itemprop="image">
                      <p class="produto" itemprop="name">Template 1</p>
                      <p class="valor" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"><span itemprop="price">R$15.00</span></p>
                      <p class="cartoes">HTML + CSS</p>
                   </a>
                   
                   <a href="#" target="_blank" title="2" rel="nofollow" itemscope="" itemtype="http://schema.org/Product" itemprop="url">
                      <img width="90" height="90" src="/imagens/2.png" title="2" alt="2" itemprop="image">
                      <p class="produto" itemprop="name">Sistema de Notícias</p>
                      <p class="valor" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"><span itemprop="price">R$5.00</span></p>
                      <p class="cartoes">PHP + CSS</p>
                   </a>
                   
                   <a href="#" target="_blank" rel="nofollow" title="One Piece" itemscope="" itemtype="http://schema.org/Product" itemprop="url">
                      <img width="90" height="90" src="/imagens/3.png" title="2" alt="2" itemprop="image">
                      <p class="produto" itemprop="name">Encriptador </p>
                      <p class="valor" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"><span itemprop="price">R$10.00</span></p>
                      <p class="cartoes">HTML + JS</p>
                   </a>
                   
                   <a href="#" target="_blank" rel="nofollow" title="Fairy Tail" itemscope="" itemtype="http://schema.org/Product" itemprop="url">
                      <img width="90" height="90" src="/imagens/4.png" title="3" alt="3" itemprop="image">
                      <p class="produto" itemprop="name">Template 2</p>
                      <p class="valor" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"><span itemprop="price">R$20.00</span></p>
                      <p class="cartoes">HTML + CSS + JS</p>
                   </a>
                   
                </ul>
             </div>

    Bom, para funcionar precisa de um CSS.
    Código:
    #vitrine:hover {
       right:0px;
       -moz-transition-delay: 0s;
        -moz-transition-duration: 0.6s;
        -moz-transition-property: #vitrine;
        -moz-transition-timing-function: ease-in-all;
       -webkit-transition-delay: 0s;
        -webkit-transition-duration: 0.6s;
        -webkit-transition-property: #vitrine;
        -webkit-transition-timing-function: ease-in-all;
    }
    #vitrine {
        background: url("http://i.imgur.com/upNlPqJ.png") no-repeat scroll left 60px transparent !important;
        display: block;
        float: left;
        height: 290px;
        padding: 0 0 0 63px;
        position: fixed;
        right: -714px;
        top: 30%;
        width: 714px;
        z-index: 99999;
       -moz-transition-delay: 0s;
        -moz-transition-duration: 0.6s;
        -moz-transition-property: #vitrine;
        -moz-transition-timing-function: ease-in-all;
       -webkit-transition-delay: 0s;
        -webkit-transition-duration: 0.6s;
        -webkit-transition-property: #vitrine;
        -webkit-transition-timing-function: ease-in-all;
    }
    #vitrine .pub {
       border-bottom: 1px solid #CBCBCB;
       border-right: 1px solid #CBCBCB;
       border-left: 1px solid #CBCBCB;
        border-top: 1px solid #CBCBCB;
        color: #5F5F5F;
        display: block;
        left: right;
        font-family: Arial;
        font-size: 14px;
        height: 46px;
        line-height: 50px;
        margin: -14px 0 0;
        overflow: hidden;
        padding: 0 0 0 20px;
        position: relative;
        width: 692px;
        z-index: -1;
       background:#efefef;
       text-align: left;
    }
    #vitrine .pub .oa {
        background: url("http://i.imgur.com/2aC3TpS.png") no-repeat scroll 0 0 transparent;
        display: block;
        float: right;
        height: 34px;
        margin-top: 6px;
        text-indent: -5000px !important;
        text-decoration:none;
       width: 127px;
    }
    #vitrine .pub .exit {
        background: url("http://i.imgur.com/u86ZYcl.jpg") no-repeat scroll 0 0 transparent;
        display: block;
        float: right;
        height: 22px;
        margin: 12px 15px 10px 20px;
        text-indent: -5000px !important;
        width: 23px;
       text-decoration:none;
    }
    #vitrine .pub span {
       display:block;
       width:10px;
       height:10px;
       background:#000;
    }
    #vitrine #menuprodutos {
       background:#efefef;
        border-left: 1px solid #CBCBCB;
       border-right: 1px solid #CBCBCB;
       border-bottom: 1px solid #CBCBCB;
        height: 240px;
        overflow: hidden;
        padding: 5px;
       width:702px;
       margin:0;
    }
    #vitrine #menuprodutos a {
        border-radius: 0 30px 0 0;
        color: #000000;
        display: inline-table;
        font-family: Myriad Pro;
        font-size: 14px;
        margin-left: 10px;
       margin-top:10px;
        overflow: hidden;
        padding: 20px 10px 0 10px;
        text-align: center;
        text-decoration: none;
        width: 136px;
       height:190px !important;
       border-top:1px solid #cbcbcb;
       border-left:1px solid #cbcbcb;
       border-right:1px solid #cbcbcb;
       background: none repeat scroll 0 0 #fff;
       border-bottom: 2px solid #cbcbcb;
       box-shadow:2px 2px 0 0 #cbcbcb;
    }
    #vitrine #menuprodutos a:hover {
        background: none repeat scroll 0 0 #efefef;
        text-decoration: none;
    }
    #vitrine #menuprodutos a img {
        height: 110px;
        width: 110px;
    }
    #vitrine_ #menuprodutos p { margin:0; text-align:right; width:133px;font-family: Arial;}
    #vitrine #menuprodutos a .cartoes {color:#F2641A; font-size:12px; font-weight:bold;}
    #vitrine #menuprodutos a .valor {
        line-height:18px;
       color:#C50000;
       font-size:16px;
       font-weight:bold;
       text-align:center;
    }
    #vitrine #menuprodutos a .produto {
       margin-top: 22px;
       color:#222;
       font-size:14px;
       text-align:center;
    }

    TAMANHO DAS IMAGENS DO SHOPPING: 123PX x 123PX

    A logomarca: 125PX x 34PX

    Botão fechar: 22PX x 21PX

    A aba: 64PX x 200PX

    Pré-Visualização: Clique aqui



    Barra lateral de SHOPPING. Q87CR
    • FreddyVsJason sugere:
    - Respeite as regras do fórum.

    - Fique alerta sempre aos anúncios do fórum.


    Barra lateral de SHOPPING. Suppor10

      Data/hora atual: Qui 28 Mar 2024 - 9:46