Tutorial - Criando uma sidebar grande

вяµиเเиђoO

Dae galera terminei a minha sidebar grande aqui para seguidores e resolvi fazer um tutorial
Então vamos la esse tutorial e exclusivo feito por mim então si copiar seja camarada e deixe os créditos
SIDEBAR GRANDE

Primeiro concelho a vocês a fazer

Fazer backup / Restaurar modelo


Si acontecer alguma vocês ja terem como volta ao normal.

Primeiro vocês tem que criar uma sua imagem eu fiz a minha imagem de fundo do tamanho 500 x 450.
Depois de criado sua imagem de fundo você terá que recorta em 3 partes(sidebar topo, sidebar meio, sidebar footer) eu do esses nomes agora si ta certo ou não to nem aii qualquer nome servi sendo 3 cortados.
Hospedem e guardem os links, vamos começa a parte do HTML prestem ATENÇÃO.

Primeiro vá em EDITAR HTML, der CONTROL+F(para buscar a tag)
Procure pela TAG:
 ]]></b:skin> 
acima dela de dois ENTER e cole o seguinte código fazendo as modificações adequada:

height: altura se sua imagem
widht: largura de sua imagem
-------------------------------------------------------------------------------------------------------


/*----------------------------------------------------
{--------}  SideBar  {--------}
----------------------------------------------------*/
.articles-right {
width:445px;
float:left;
}
#sidebar4 {
float: center;
width: 500px;
height:450px;
font: 12px Arial, Tahoma, Helvetica, sans-serif;
margin:30px 0px 0px 0px;
}
.sidebar4 h2 {
padding:45px 0px 35px 194px;
color:#fff;
text-shadow:1px 1px #000;
font: bold 17px Arial, Helvetica, sans-serif, Verdana, Tahoma;
overflow: hidden;
background: url(LINK DE SUA IMAGEM 'sidebar top') no-repeat;
height:40px;
}
#sidebar4 .widget-content{
background: url(LINK DE SUA IMAGEM 'sidebar meio') repeat-y;
wight:500px;
height:250px;
padding:0px 15px 0px 15px;
margin:0px 0px 0px 0px;
}
#sidebar4 .widget {
margin:0px 0px 20px 0px;
padding:0px 0px 80px 0px;
background: url(LINK DE SUA IMAGEM 'sidebar footer') no-repeat bottom left;
}


Depois vamos procurar a "DIV"

 <div id='main-wrapper'> 
(caso não tenha procure pela DIV de sua sidebar original e cole em cima dela isto)


<div class='articles-right'> 
<!-- begin.SIDEBAR1 --> 
        <b:section class='sidebar4 section' id='sidebar4' preferred='yes'>
</b:section>
<!-- End.Sidebar1 --> </div>

Agora e só salva e ver como ficou si tiver fora do lugar e só ir ajustando de sua preferencia ok ^^)

TUTORIAL EXCLUSIVO FEITO POR:

QUALQUER COISA ME COMUNIQUE

COMENTEM SUA MÃO NÃO IRAR CAIR ISSO EU GARANTO!
0 comentários

0 comentários:

Postar um comentário

Assinar: Postar comentários