16 de dez. de 2012

Tutorial de lista personalizada

Quem postou? Rabiscado em

Olá pessoal, como vão? Eu vou bem, talvez...
Então, hoje eu trago o primeiro tutorial do blog, vou tentar achar uns tutoriais bem legais para postar aqui, eu postaria antes, só que quando fiz o outro layout, eu coloquei o código para não pegarem nada aqui, talvez eu queria me proteger ou alguma coisa do tipo, mais então quando lembrei que é legal postar tutoriais eu já tinha posto o código no meu HTML e eu tinha esquecido, o bom é que mudei o layout, não é mesmo? Vamos ao que interessa mesmo? Hoje trago um tutorial que achei Crazy Html, é de uma listinha muito fofa, aqui vem o exemplo:

É bem fácil, mais tem que tomar muito cuidado para não errar nada!
Primeiro abra o seu HTML do seu blog e procure por: <head>.
Em baixo do código que você procurou cole:
 <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'/>
Feito isso agora procure por ]]></b:skin> e acima cole esse código:

@font-face { font-family:"04b03"; src: url('http://static.tumblr.com/ywlup7y/bEUm2u8z1/04b_03__.ttf');}
titulolista {color:#7a5464; font-size:20px; width: auto;font-weight:normal; letter-spacing:1px; margin-right: 3px; margin-top: 1px; ;margin-bottom: 1px; -webkit-border-radius: 2px; font-family:'Dosis'; alpha(Opacity=70);opacity:.70;padding:2px; text-transform: uppercase; margin-bottom:8px;}
fontelista {font-size: 8px; font-family:"04b03"; text-transform:uppercase;}
#lista {background: url('http://static.tumblr.com/ywlup7y/tHgm242qs/coracao1.png') no-repeat left; padding-left: 13px; padding-top: 2px; display : block; border-bottom: 1px solid #DBDBDB;}
#lista:hover {background: url('http://static.tumblr.com/ywlup7y/P4tm242r5/coracao2.png') no-repeat left;}
#lista1 {background: url('http://static.tumblr.com/ywlup7y/tHgm242qs/coracao1.png') no-repeat right; padding-right: 13px; padding-top: 2px; display : block; border-bottom: 1px solid #DBDBDB;}
#lista1:hover {background: url('http://static.tumblr.com/ywlup7y/P4tm242r5/coracao2.png') no-repeat right;}
Modifique de acordo com o blog.
Agora o próximo código é para colar aonde você quiser que aparece. Pagina ou sidebar.


<div style="float:right;text-align: right;">
<titulolista>Lista Direita</titulolista>
<br><ht>
<a href="LINK"><div id="lista1">Coisa 1
</a></div>
<a href="LINK"><div id="lista1">Coisa 2
</a></div>
<a href="LINK"><div id="lista1">Coisa 3
</a></div>
<a href="LINK"><div id="lista1">Coisa 4
</a></div>
<a href="LINK"><div id="lista1">Coisa 5
</a></div>
<a href="LINK"><div id="lista1">Coisa 6
</a></div>
</ht></div>

<titulolista>Lista Esquerda</titulolista>
<br><ht>
<a href="LINK"><div id="lista">Coisa 1
</a></div>
<a href="LINK"><div id="lista">Coisa 2
</a></div>
<a href="LINK"><div id="lista">Coisa 3
</a></div>
<a href="LINK"><div id="lista">Coisa 4
</a></div>
<a href="LINK"><div id="lista">Coisa 5
</a></div>
<a href=LINK"/"><div id="lista">Coisa 6
</a></div></ht>

Espero que tenha gostado do primeiro tutorial! Até mais pessoal!

3 comentários:

  1. Unknown17 de dezembro de 2012 às 17:39

    seu blog parece um tumblr, de tão lindo!
    quer se afiliar? prometo visitar sempre!

    HOJE MEU BLOG COMPLETA UM MÊS!
    @esteffanifontes, segue? Beijos,
    Aos Dezesseis Anos - aosdezesseisanos.blogspot.com.br

    (se estiver seguindo, avise por favor? Preciso retribuir como forma de agradecimento)

    ResponderExcluir

- Deixe o endereço do seu blog que eu retribuo o comentário.
- Não aceito selinhos nem tags, desculpem...
- Só aceito afiliação com blogs a partir de 90 seguidores.
- E eu só sigo blogs que eu gosto.
- Não comente ''seguindo, segue de volta?'', isso é ridículo.
- Solte o verbo e seja feliz! :3

Assinar: Postar comentários (Atom)