Coisas de Blog

Coloque imagem de " leia mais " nas postagens

Primeiro você tem que criar uma imagem para usar ( e hospedá-la em um site) ou já escolher uma imagem pronta.
Depois vá no HTML do seu blog (Modelo > Editar HTML). Marque a opção "expandir modelos de widgets", aperte Ctrl+F e procure por:

<data:post.jumpText/>

Apague somente esse código, e no lugar dele coloque isso:

<p align='right'><a expr:href='data:post.url'><img src='Link da imagem aqui'/></a></p>

É só colocar o link da imagem onde se pede e salvar as alterações. Para funcionar, você só precisa clicar nesse botão

quando estiver fazendo o post, no lugar em que você quer que apareça o "leia mais".

Trocar " leia mais " por imagem

Primeiro vá no HTML do seu blog (Modelo > Editar HTML). Marque a opção "expandir modelos de widgets", aperte Ctrl+F e procure por:

<data:post.jumpText/>

Depois apague esse código que você procurou e no lugar dele coloque isso:

<p align='right'><a expr:href='data:post.url'><img src='Link da imagem do seu Leia Mais aqui'/></a></p>

Entendendo o código:
Onde tem ''Link da imagem do seu Leia Mais aqui'' você substitui esse nome e no lugar cola a url da imagem do leia mais.

Para aparecer o botão ''leia mais '' você só precisar clicar nesse botão na postagem onde você quer que apareça a quebra de linha.

Barra de rolagem personalizada

Olá pesoas, hoje eu vou ensinar como colocar uma barra de rolagem! Olha mais ou menos como vai ficar:

Lembrando que as cores são personalizáveis!

Vá em editar HTML dê um ctrl f (command f) e na barra de pesquisa que apareceu procure por:

]]></b:skin>

Esse código vai aparecer destacado ANTES dele cole o código abaixo:

::-webkit-scrollbar-thumb:vertical {
background: #FF69B4; *mude para a cor que você queira*
height:50px;
border: 2px solid #FFFFFF;
box-shadow: 2px 2px 4px #bebdbd;
-moz-box-shadow: 2px 2px 4px #bebdbd;
-webkit-box-shadow: 2px 2px 4px #bebdbd;
-khtml-box-shadow: 2px 2px 4px #beFbdbd;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#f26d92; height:10px;
border: 1px dashed #fff;
-webkit-box-shadow:0 0 1em #eee; }
::-webkit-scrollbar {height:10px; width:20px; background: url(URL DO BACKGROUND FIXO) repeat; *url da imagem de fundo*
box-shadow: -3px -2px 10px #bebdbd;
-moz-box-shadow: -3px -2px 10px #bebdbd;
-webkit-box-shadow: -3px -2px 10px #bebdbd;
-khtml-box-shadow: -3px -2px 10px #bebdbd;}
}

No 1° trecho destacado de vermelho você pode trocar pela cor que te agrada (clique aqui para ver uma tabela de cores). No 2° trecho destacado de vermelho coloque a URL do seu background (o fundo da barra de rolagem).

Visualize se estiver tudo ok salve!

Blackquote com imagem

Sabiam que em um blog de tutoriais uma das coisas que mais faz a diferença é o blockquote? algumas pessoas não o usam, mais eu uso praticamente sempre. Então isso é uma coisa que não pode faltar. E vou mostrar como fazer um parecido com esse!

Para fazer esse blockquote copie o seguinte código:

blockquote {width: 100%; color: #B5B5B5; text-align: left; padding-top: 2px; padding-left: 30px; padding-right: 2px; padding-bottom: 2px; background: transparent url('http://i50.tinypic.com/f4of9k.png'); background-repeat: repeat-y; }

Se preocupe em mudar o Link Da Imagem e algumas cores, o 30px só mude se o texto ficar em cima da imagem. Depois cole o seguinte código acima de ]]></b:skin>. Visualize para ver se deu tudo certo, e salve. O código acima é o mesmo da imagem, você pode usar esse mesmo sem fazer alterações. Espero que tenham gostado,

10 estilos para Blackquote

Olá leitores! Bem vindos novamente (ou não) ao Vintage Mustache! Hoje trouxe um tutorial achado lá no blog We Heart HTML (um de nossos afiliados!), portanto, créditos!
É realmente um blog muito bom, já usei os tutoriais de lá várias vezes! Além do mais os blogueiros são SUPER atenciosos! Mas agora vamos aos blockquotes!

Para colocá-los é só ir no seu HTML e procurar por ]] e logo acima dessa tag, colar o código do blockquote escolhido!

Estilo 1 - Normal

Estilo 1 - Hover

/*** Blockquote por Mundo Html/ all-teardrop-is-a-waterfall ***/
blockquote {background: #transparent;border-left: 2px solid #cbd3dc;border-right: 2px solid #ec5787; padding: 10px 15px 15px 10px;font-size: 13px; color: #696969; text-align: justify; font-family:arial;-webkit-transition-duration: .50s; } blockquote:hover{background: #transparent;border-left: 5px solid #cbd3dc;border-right: 5px solid #ec5787; font-size: 13px; color: #696969; text-align: justify; font-family:arial;-webkit-transition-duration: .50s; }

Estilo 2

/*** Blockquote por Mundo Html/ all-teardrop-is-a-waterfall ***/
blockquote {background: #E8BDCB url('http://static.tumblr.com/eyob2gi/Wq4m7lkbs/aapng.png') no-repeat;border-radius:5px; border-bottom: 6px solid #DE9FB4;padding:15px 15px 15px 3.2em;font-size: 11px; color: #FFF; text-align: justify; font-family:arial; }

Estilo 3

~> Blockquote Folk - By Pincelando o Céu <~
.post blockquote {
background: #F5ECED;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-right: 5px solid #FF9B8B;
font-size: 13px;
text-align:center;
}

Estilo 4

~> Blockquote Girlie - By Pincelando o Céu <~
.post blockquote {
background: #FFF0F5;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border-left: 8px ridge #FF6FBD;
font-size: 13px;
text-align:center;
}

Estilo 5

/* Blockquote Friendship By: The Lovers */
.post blockquote {
background: #fffafa;
border-left: 3px solid #ff34b3;
border-right: 3px solid #ff34b3;
color: #000000;
font-family:century gothic;
font-size: 13px;
text-align: center;
padding: 5px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;}

Estilo 6

/* Blockquote Simple: The Lovers */
.post blockquote {
background: #f5f5f5;
border-left: 8px solid #66cdaa;
color: #000000;
font-family:century gothic;
font-size: 13px;
text-align: center;
padding: 5px;}

Estilo 7

blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
-moz-box-shadow:5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
-khtml-box-shadow: 5px 4px 10px #ccc;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4)";filter:progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4);
}

Estilo 8

/* Blockquote By: Kawaii World */
blockquote {
border-right: 10px solid #f99db3;
border-left: 10px solid #f99db3;
background-color: #f5f2f3;
padding: 10px; font-size: 12px;
color: #e193a6;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
}

Estilo 9

blockquote { border-left: 8px solid #FA6B8F; background-color: #efefef; padding: 4px; color: #333333; text-align: justify; }

Estilo 10

.post blockquote {
background: #f5f5f5;
border-bottom: 3px solid #3C355F;
color: #3C355F;
font-family: tahoma;
font-weight: normal;
font-size: 11px;
text-align: right;
padding: 3px;
border-radius: 25px;
}

Vocês podem alterar tudo o que está em negrito, que são as cores.

Blackquote em estilo caderno

Hoje vou ensinar como personalizar o blockquote dessa forma:

Vamos lá?

Tutorial.

1. No Blogger, vá em Modelo> Editar HTML.
2. Clique em 'Prosseguir'. Tecle Ctrl F e procure por:

]]></b:skin>

3. Logo acima dessa tag, cole:

.post blockquote {background: url("http://static.tumblr.com/oiizew6/Zgqm3v6uq/blockquote.png");padding: 14px;padding-left: 70px;font-size: 11px;color: #696969;text-align:justify;box-shadow: 0px 1px 2px #edeeec;}

4. Salve.

Mustaches no nosso dia-a-dia!

Desde o ínicio dos tempos os bigodes dominam o rosto dos homens. Atualmente os famosos "mustaches" (bigodes) dominam nosso dia-a-dia. Confiram as imagens mais variadas de bigodes, desde canecas e colares a espelhos e bottons!