Cá estou eu, mais uma vez :)
Hoje o que eu trago não se chamaria exatamente de tutorial, mas sim de modelos. Mais especificamente, modelos para sidebar, caso alguém ainda não tenha lido o título. Não são semelhantes de maneira nenhuma, apenas alguns modelos que eu usei em antigos layouts, variados. Podem trocar as cores à vontade, não é complicado. Mostrarei também o modelo do título, embora possam encontrar outros que combinem melhor. Alguns gadgets daqui não são propriamente delicados nem tão bonitinhos como os que se vêm nos layouts atuais, eu tenho uma certa mania em fazer layouts largos, e embora esteja a tentar corrigir isso, quase tudo o que mostrarei tem em parte esse aspeto. Mesmo assim, espero que gostem tanto quanto eu na altura.
Para usar, procure por:
/* Widgets
Localize a área de .sidebar .widget { até à chaveta de fecho de .sidebar .widget h2 {, como mostra a imagen: www
Talvez em alguns layouts não encontre o trecho todo junto, mas é simples. É só substituir as áreas correspondentes, procurando pelos trechos em itálico na linha de cima, apagar as áreas, e colocar os códigos que eu dou acima de /b:skin
Talvez em alguns layouts não encontre o trecho todo junto, mas é simples. É só substituir as áreas correspondentes, procurando pelos trechos em itálico na linha de cima, apagar as áreas, e colocar os códigos que eu dou acima de /b:skin
Substitua pelos códigos abaixo da imagem com o modelo pretendido. Nem todos os modelos mostram como fica em hover, mas só o último é que não muda ao passar o mouse, sim? E não liguem ao conteúdo dos gadgets, são prints de layouts que já usei ou mesmo free que disponibilizei >.<
- Modelo 1: www
- Modelo 2: www
- Modelo 3: www
- Adicione em baixo de <head> o código abaixo:
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch' rel='stylesheet' type='text/css'/>
- Modelo 4: www
- Adicione em baixo de <head> o código abaixo:
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch' rel='stylesheet' type='text/css'/>
- Modelo 5: www
- Adicione em baixo de <head> o código abaixo:
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'/>
Usem à vontade! Mas, mesmo que troquem as cores, por favor creditem, todos os modelos são meus.
Vou usar o modelo 3,mas vou dar os creditos!
ResponderEliminarEste comentário foi removido pelo autor.
ResponderEliminarOi! Eu exclui meu último por engano amore!!
ResponderEliminarEu vou usar sim, e também vou colocar os créditos for you!
Kisses!
Anylian!
ResponderEliminarIrei usar o último modelo! Os seus são sempre tão lindo <3
Pode deixar que irei deixar os créditos!