∞ Sugoi Tutoriais

Oi gente ;) bom o tutorial de hoje é do site ProDeveloper, com vários estilos de postagens resumidas para blogger. Clique na imagem abaixo e confira o tutorial.

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.

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.

Boa noite *O* . Bom, eu tive uma ideia de fazer tipo uma " serie " de postagens relacionadas a personalização - por isso o #custom ( serio? ) - então eu vou tentar postar uma por dia, como é personalizar pode ser que eu pegue códigos de outros e " inove " eles - como eu fiz hoje - o post de hoje, eu foquei mais naquelas  barras ( ? ) que ficam as ultimas imagens . Cliquem em Mais Informações para ver o tutorial .

Bom gente como pediram esse tutorial lá na ask eu decidi postar esse tutorial pertence ao Tumblr HTLM STREW então todos os créditos para eles. Confiram : 1 - Vá em Modelo > Editar Html e procure por ]]></b:skin> e cole esse código antes da ta procurada. /*** efeito back por htmlstrew ***/ @-webkit-keyframes pulse {0% { -webkit-transform: scale(1); }50% { -webkit-transform: scale(1.1); }100% { -webkit-transform: scale(1); }} .moddib {background: url('SUA IMAGEM AQUI'); height: alturapx; width: largurapx; display: inline-block; -webkit-transition-duration: 0.5s; margin-left:10px;} .moddib:hover {background-position: right; -webkit-animation: pulse 1s;-moz-animation: pulse 1s;-ms-animation: pulse 1s; -webkit-transition-duration: 0.5s; } 2 - E coloque esse código a onde você quer que apareça: <div class="moddib"><a href="SEU URL"><img src="SUA IMAGEM TRANSPARENTE DO MESMO TAMANHO QUE A DO CÓDIGO" /></a>...

Esse tutorial pediram no Aks, e eu decidi postar também é bem simples esse menu é mesmo do tutorial de menu hover no blogger confiram: 1 - Vá em Aparência > Editar Modelo > Style.css e cole esse código : menu { font-family: Verdana; letter-spacing: 2px; font-size: 10px; line-height: 13px; display: inline-block; background:#F3F3F3; color:#000; width: auto; padding: 5px; margin: 1px; text-align: center; text-transform: uppercase; border-bottom: 2px solid #FF99CC; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; } menu:hover { font-family:Verdana; letter-spacing: 2px; font-size: 10px; line-height: 13px; display: inline-block; background: #000; color:#fff; width: auto; padding: 5px; margin: 1px; text-align: center; text-transform: uppercase; border-bottom: 5px solid #00CCFF; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; } 2 - E para usar vá em header.php e cole esse código : <a href="LINK" title=...

Bom gente eu vi esse blockquote sendo usado em muito blogs/sites é a mesma processo de como colocar a imagem da largura do post que já foi postado aqui. Bom é muito simples então confira abaixo o tutorial: 1 - Vá em Modelo> Editar Html > e procure por ]]> e cole esse código: blockquote { background:#f0f0f0; /*Cor do fundo*/ color:#9a9898; /*Cor da fonte*/ border: 0; /* borda na imagem em zero, não altere */ margin: 0 -30px 0 -10px; /* margem da direita e esquerda, altere se necessário */ padding: 5px; /* espaço entre margens e imagem, não altere */ width:610px; /* tamanho máximo da imagem, altere se necessário */ } Mude as cores que você deseja e mude somente a largura do mesmo tamanho que a area do post do seu blog. E para usar só usar o parágrafo [citação]. Tutorial feito por : Sugoi Tutoriais.