Postagens

Mostrando postagens com o rótulo CSS

#VIDEOAULA - Design Responsivo por Node Studio

Imagem

#SLIDEDOBLOG - Slide Diapo

Imagem
Oi gente! Esse tutorial é do slide que é usado aqui no blog. Confira abaixo o tutorial. Diapo by Pixedelic 1) Coloque esse código no seu css.

#VIDEOAULA - Curso de HTML e CSS para iniciantes

Imagem

#BLOGGER: Rodapé personalizado

Imagem
Oi Gente! o tutorial de hoje é um estilo diferente de rodapé, já vários blogs/sites usando, então eu adaptei um código de outro post do blog - pra quem não viu é esse aqui - é bem fácil de usar, clique em "Mais informações" para conferir o tutorial completo.

Bem vindos + Agenda

Imagem
O Sugoi Tutoriais ficou um bom tempo sem postagens novas, até pensei em desistir de vez, mas como sempre, voltei de novo. Agora vai ficar melhor porque estou com tempo para preparar tutoriais para vocês. E pra voltar com tudo segue abaixo um tutorial legalzim para vocês. Bjbj 

#CUSTOM: Background personalizado

Imagem
Oi gente :) hoje eu trouxe um código que bastante gente está usando nos blogs/sites, o código é do Lucas Miquéias . Confira abaixo a prévia e clique em Mais informações para conferir o tutorial.

Ask: Box personalizada twitter

Imagem
Oi gente, como foi pedido na Ask, aqui está o tutorial é o mesmo processo do box facebook . Confira abaixo.

ASK: Menu redes sociais

Imagem
Oi gente, mais um tutorial que foi pedido. Esse menu é bem simples. Confira o resultado e o tutorial para blogger e Wordpress.

ASK: Menu Lava Lamp

Imagem
Oi gente! Mais um tutorial que foi pedido na ask que conseguimos fazer, esse menu na verdade é do site Gmarwaha , e esse será uma versão adaptada para vocês, então sem duvida nenhuma créditos para eles.Veja o resultado abaixo e confira o tutorial clicando em Mais Informações . Resultado

Menu Bracket

Imagem
Oi gente! esse tutorial eu montei em cima de dois outros tutoriais um é de blog So Kawai, nosso parceiro, e outro é do Tympanus/Crodops um site de tutoriais muito bom. Confira o resultado e o tutorial abaixo: RESULTADO.

Como fazer sidebar personalizadas

Imagem
Oi pessoal, mais uma vez, eu estou fazendo um tutorial, enfim, eu estava vendo a ASK do Sugoi, e achei uma pergunta de como fazer sidebares igual do FansBr. A nova versão deles, estão com sidebares personalizadas, cada um digamos de um tamanho, e hoje, irei passar um código que eu criei para vocês, vamos lá. Coloque isso na sua css ( style.css ou abaixo do ]]> ) o seguinte código: .side1 {width:150px; height:180px; background:#000;} .side2{margin-left:162px; margin-top:-180px; width:150px; height:180px; background:#000;} .side3{margin-left:-px; margin-top:10px; width:313px; height:310px; background:#000;} .side4{margin-left:-px; margin-top:10px; width:313px; height:110px; background:#000;}

Fontes para títulos

Imagem
Olá! separei algumas fontes para colocar em títulos, tanto na área de postagens como na sidebar. Foram todos retiradas do Google Fonts. Confiram abaixo:

Destaques: Caixa de textos

Imagem
Oi gente eu percebi que vários sites estão usando um jeito legal de colocar destaques, as vezes são mais no rodapé. Nesse exemplo o destaque está sendo 220px de largura e 500px de altura, isso pode ser alterado de acordo com o seu gosto confira o resultado e o tutorial:  RESULTADO.

Menu Sanfona

Imagem
Oi gente, como pediram na Ask, eu procurei e achei no blog Mundo Blogger um tutorial fácil então confiram: RESULTADO

Facebook: Box Personalizada

Imagem
Oi gente, vários e vários blogs/sites estão usando as suas box's personalizadas lindas e maravilhosas que deixam o template a coisa mais linda do mundo então ... eu decidi postar clique em mais informações e confira o tutorial.

Destaques

Imagem
Oi gente, como pediram no ask, como fazer uma parte para destaques no site decidi postar esse que eu sei, confiram o resultado e o tutorial abaixo. 1 - Coloque esse código em seu css: Código link 2 - Coloque esse código aonde você quer que apareça: <div class="view view-third"> <img src="URL DA IMAGEM" /> <div class="mask"> <h2>TITULO</h2> <p>Aqui Você coloca um pouco sobre o que vai ficar em destaque.</p> <a href="#" class="info">Leia Mais</a> </div> </div> Meu Resultado. Créditos : Tympanus

Menu Borda

Imagem
{leiam o livro A Seleção e A Elite} Oi gente, bom esse menu eu editei com a inspiração no site Mcyrus.com o porque da inspiração é só a borda, lá você vê que o header tem uma borda então eu editei o menu confiram o resultado e cliquem em Mais Informações para ver o tutorial: Nome Nome Nome Nome

Menu Agenda

Imagem
Oi gente, como pediram na Ask. como fazer uma agenda personalizada, achei melhor fazer um "Menu Agenda" que é mais fácil para explicar. Para esse tutorial eu usei um menu do Tumblr Single Themes e o modifiquei {já postei aqui confiram}: Ver Resultado

Personalizando Marcadores da postagem

Imagem
Bom gente , pra esse tutorial existir foi preciso usar o código da site Cor Seletiva ele foi retirado do tema Skyscraper que foi disponibilizado pelo site. Clique em mais informações para conferir o tutorial.

Código Base portal por Sweetness Design

Imagem
Oi gente bom depois de uma semana eu estou de volta e vai ser assim por um bom tempo e agora o Sugoi tem mais uma colaboradora que é a Lorrayne, ela vi fazer um post se apresentando. Então sobre o código os créditos são para o blog Sweerness Designs -Mayara Pescovic e para ter acesso a ele siga essas regras clique aqui para ir ao blog.