Things I Love: Tutorial

Mostrando postagens com marcador Tutorial. Mostrar todas as postagens

Personalizar blockquote

Olá curicas, voltei hoje para fazer um tutorial fantástico, que se destaca ao blog, é de como personalizar o blockquote. Let's go?! Vá em design > Editar HTML > Aperte ctrl + F e procure por:

]]></b:skin>

Acima do código acima cole o seguinte código:

.post blockquote {
background:url(LINK DA IMAGEM DE FUNDO AQUI) ; /*Altere o fundo como preferir*/
border:2px dashed #2b2a59; /*Altere a cor da borda como preferir*/
padding: 5px;
margin:10px 20px 10px 20px;
}

Agora é só alterar o que você quiser. Substitua LINK DA IMAGEM DE FUNDO AQUI pelo link da imagem que você quer colocar no fundo do blockquote. Se quiser colocar apenas uma cor no fundo do blockquote, substitua por url(LINK DA IMAGEM DE FUNDO AQUI) por: #códigodacor. Se quiser mudar a cor da borda é só mudar o código da cor, para aumentar a espessura da borda é só mudar o 2px pelo número que quiser. Depois é só salvar! É só, até a próxima.

Separar widgets da sidebar

(Muito diva...)

Olá cupcakes de chocolate com brigadeiro :3 voltei aqui para fazer um tuto muito fácil e que deixa seu blog muito perfeito, eu estou usando ele aqui, eu amo esse tuto hahaha mais enfim, let's go. Vá em modelo > Personalizar > Avançado > Plano de fundo da barra lateral e escolha transparente. Salve as alterações, volte ao modelo do blog e agora vamos mexer com o HTML. Aperte Ctrl + F e procure por:

.sidebar .widget {

Quando achar o código acima cole abaixo dele o seguinte código:

background: #000;

Agora é só trocar o #000 pela cor que você quer e salva! Facinho né?
Nath volta depois!

Rádio Cola-Cola FM no blog + Sumiço

Olá queridinhos leitores ! Tudo bem ? Eu estou bem. -q

Primeiro devo desculpinhas a vocês por não ter postado a um tempo aqui, dei um grande chá de sumiço rs, mas era porquê essa semana era de ~~provas~~, agora vou entrar frequentemente aqui apenas de sábado & domingo, mas vamos ao tutorial agora. Hoje a tia naah vai ensinar vocês á como colocar aquele coca-cola rádio FM no blog, vou parar de falar um pouco e LET'S GO ! -n Se você quiser colocar a Coca-Cola rádio FM em uma página, vá no seu HTML e cole o seguinte código:

<iframe allowtransparency="true" frameborder="0" height="150"

marginheight="0" marginwidth="0" scrolling="no" src="http://coke-

brasil.goomradio.com/embed.php" style="color: #333333; font-family: arial,

verdana, sans-serif; font-size: 12px; line-height: 19px; text-align: center;"

width="300"></iframe>

Mas se for num gadget vá em -> layout -> adicionar gadget -> html/javascript e cole o seguinte código:

<iframe allowtransparency="true" frameborder="0" height="150"

marginheight="0" marginwidth="0" scrolling="no" src="http://coke-

brasil.goomradio.com/embed.php" style="color: #333333; font-family: arial,

verdana, sans-serif; font-size: 12px; line-height: 19px; text-align: center;"

width="300"></iframe>

Fácil demais né ? Espero que gostaram, bye ! <3

Menu cute trasition

Oi negada, hoje vim com mais um ~~tutorial~~, mas agora é como fazer aquele menu cute trasition, você não sabe como ele é ? Não fique preocupada jaja eu mostro um print dele, bom eu encomendo esse menu para você, ele é bem fofo você vai ver ! Então primeiro vou mostrar o print dele :

Sem o mouse:

Com o mouse:

Gostaram ? Então vamos ver como faz. Vai no seu HTML e procure por:

]]></b:skin>

Achou ? hm. Acima da tag, cole o seguinte código:

/*---Início do Menu Cute trasition---*/

ct {

font-family: century gothic; /* Fonte do Menu */

width: 10%; /* Tamanho do Menu */

float: left;

background:#FF82AB; /* Cor do fundo do Menu */

padding: 5px;

text-align: center;

margin: 2px;

-webkit-border-radius: 11px;

-webkit-border-top-left-radius: 1px;/* Efeito das bordas */

border-radius: 11px;

border-top-left-radius: 1px;

-webkit-transition-duration: .80s; /* efeito trasition */

font-size: 10pt; /* Tamanho da fonte */

color: #000; /* Cor da fonte */

}

ct:hover {

font-family: century gothic; /* Fonte do Menu quando passa o mouse */

width: 10%; /* Tamanho do Menu quando passa o mouse */

float: left;

background:#eee; /* Cor do fundo do Menu quando passa o mouse */

padding: 5px;

text-align: center;

margin: 2px;

-webkit-border-radius: 22px;

border-radius: 22px;

-webkit-transition-duration: .80s; /* efeito trasition */

font-size: 10pt; /* Tamanho da fonte do Menu quando passa o mouse */

font-style:bold; /* Fica em negrito quando passa o mouse */

color: #000; /* Cor da fonte do Menu quando passa o mouse */

}

/*---Fim do Menu Cute trasition---*/

Depois de colar é só você editar se quiser, agora é só colar o seguinte código abaixo para formar um gadget de HTML/JavaScript:

<a href="Link"><ct>Nome</ct></a>

<a href="Link"><ct>Nome</ct></a>

<a href="Link"><ct>Nome</ct></a>

<a href="Link"><ct>Nome</ct></a>

Depois é só salvar, lembrando que aonde está em vermelho é o link da página e aonde está azul é o nome da página. Beijos. xoxo

Blockquote com barra de rolagem

Olá queridos leitores ! Hoje o tutorial é como colocar blockquote com barra de rolagem, é um tutorial bem simples e fácil de fazer. Para colocar barra de rolagem no seu blockquote é só você procurar o código do seu blockquote e adicionar o seguinte código antes de fechar a chave:

overflow: scroll;

Pronto, viram como é fácil ? Espero ter ajudado ! Beijos.

Data fora do corpo da postagem (Entender)

Olá queridos leitores, como vão vocês? disse que não ia mais perguntar isso. -n

Hoje a Naah trouxe um tuto pra vocês, então vamos lá amiguinhos do things i love. c:

Ah, lembrando que eu vou fazer de como deixar a data fora do corpo da postagem !

Vou ser direta com vocês hoje -q procurem no seu HTML a seguinte tag:

h2.date-header {

E então, antes de fechar a chave desta tag, cole isto:

margin-top: -20px; /* arruma se quiser */
margin-right: -40px; /* arrume se quiser */
float: right; /* faz a data ir para a direita */
background: #fff; /* fundo da data, hm */

Vamos aprender? Nas duas primeiras linhas, simplesmente é o alinhamento da data no quadro da sua postagem. Alterando os valores, você vai ver que ela muda. Onde está o float, é o que faz a data sair de dentro do quadro de sua postagem, e se quiser, altere para "left", o que irá fazer ela sair do quadro da postagem para o lado esquerdo.

Aprendi no blog Chovendo em Paris.
Legal né? Espero que tenho ajudado, até a próxima. :3

Personalizar avatar dos comentários

Olá amiguinhos, hoje vamos aprender como personalizar os avatares dos comentários, não vou ficar de bate-papo com vocês hoje, então vamos lá ! Primeiro querido leitor você irá no seu HTML e procura a seguinte tag .avatar-image-container { e vai estar mais ou menos isso:

.avatar-image-container {
margin: .2em 0 0;
}

Este que é o código que mudará a imagem do querido comentarista. Então vou colocar vários modelos para vocês usarem:

Para fazer deste jeito, acrescente o seguinte código antes de fechar a chave:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Para fazer deste jeito, acrescente o seguinte código antes de fechar a chave:

-webkit-border-top-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topright: 30px;
-moz-border-radius-bottomleft: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;

Para fazer deste jeito, acrescente o seguinte código antes de fechar a chave:

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

Para fazer deste jeito, acrescente o seguinte código antes de fechar a chave:

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

Credits images: Chovendo em Paris.
Credits tutorial: Chovendo em Paris.
Espero ter ajudado ~~blábláblá~~... Beijos !

Menu de abas

Olá leitores lindos da Naah ! Como vocês estão? ~~Eu sempre falo isso~~ ¬¬ ~~parei~~.

Vamos aprender a fazer um menu de abas? "Mais o que é isso Naah?" aqui está uma foto do menu de abas que eu tenho aqui no meu blog:

Gostou? É super fofo ! Mas... vamos aprender?

Vai no seu HTML bem bonitinho (~~sim estou louca hoje~~ ^~^) bem no comecinho você vai encontrar a tag <head> mas para ser mais rápido para procurar aperte a tecla Ctrl + F e quando você achar essa tag, abaixo dela você cola o seguinte código:

<link href='http://naah-oliver.zip.net/menu2.css' media='screen' rel='stylesheet' type='text/css'/><script src='http://poisonedapple.awardspace.us/tabber.js' type='text/javascript'/>

no caso acima, ele é sim todo embaralhadinho mesmo ok? OK!
Se tiver tudo direitinho salve. Mas ainda não acabou ! Depois disso, adicione um lindo gadget de HTML/Javascript, e cole:

<div class="tabber">
<div class="tabbertab" title="Aba 1">
<br>
Conteúdo 1
</>
</div>
<div class="tabbertab" title="Aba 2">
<br />
Conteúdo 2
</div>
<div class="tabbertab" title="Aba 3">
<br />
Conteúdo 3
</div>
</div>

<center><br />

Credits: Drikoti (Mas ele foi fechado! Mesmo assim o link é esse.)
"Mas como editar as cores?" As cores vão está da mesma cor dos links dos seus gadgets anteriores, não se preocupe. Depois disso é só você colocar o titulo e o conteúdo do seu menu. END !

Navbar invisível (Efeito hover.)

Olá fofuchos, como vocês estão? Eu estou ótima.
Hoje vim fazer outro ~~tuto~~ de como deixar a navbar invisível com efeito hover, eu já fiz um tuto assim só que era sem o efeito hover, e hoje eu estou fazendo com o efeito hover, para quem não sabe ainda, efeito hover é quando você passar o mouse em cima da navbar ela irá aparecer, mas então... vamos lá !

vai em Design

Editar HTML

Ctrl + F: ]]></b:skin> acima dessa tag cole o seguinte código:

/* ----- Efeito de esconder e mostrar a navbar By Things I Love----- */
#navbar-iframe {
opacity:0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#navbar-iframe:hover {
opacity:1;
}

Pronto ! Fácil né? Espero ter ajudado, beijos fiquem com Deus.

Criar plaquinha "KEEP CALM..."

Hoy leitores, estou eu aqui de volta ~~haha~~, trouxe um tuto que várias pessoas não sabem como fazer, não é exatamente um tuto de blog, mas é super legal, então vamos lá?

O "tuto" de hoje é como criar aquelas plaquinhas de KEEP CALM, as pessoas sempre querem a mesma letra dessa plaquinha mas dependendo do programa que você usa, essa letrinha não vai ter, mas eu estou aqui para avisar a vocês que existe um site para fazer essas plaquinhas, é só você entrar nesse site http://www.keepcalm-o-matic.co.uk/ e fazer sua plaquinha, é muito fácil né? Espero ter ajudado *-* antes de falar tchau quero mostrar minha plaquinha pra vocês! Olha ela ai:

E ai gostaram? u-ú é isso, tchau meus cupcakes.

Bordas arredondadas nas imagens

Hooy mocinhas

Vim fazer um ~~tuto~~ de como deixar a borda da imagem redonda,é um tuto simples e útil,e não é você que se esforça para fazer é um site! Vamos lá pessoal?

1. Primeiro clique aqui para entrar no site,e em seguida selecione o arquivo da imagem desejada.

2. Depois da imagem selecionada vocês apertem em Round It.

3. E depois de carregar vai aparecer a imagem com bordas redondas!

Viram como é simples? Ele é simples e muito fofo! Beijos ate mais.

Caixinha de link-me

Hooy lindas,trouxe um tuto super simples de fazer,é como colocar uma caixinha de link-me no seu blog,é eu sei que quase todo mundo sabe fazer sua própria caixinha de link-me mais essa é para os iniciantes que tem dificuldade ainda,mais relaxa que um dia você se acostuma kkkk Bom vamos começar? Clique em Read More e vamos aprender!

Oi cupcakes,tudo bom?

Hoje vou ensinar á vocês como colocar link em uma palavra por exemplo 'clique aqui' é bem fácil de fazer e fica bem mais bonito no estilo do blog,é só você escrever a palavra que deseja virar link e clicando com o botão esquerdo você passa por cima da palavra e depois na barra aperte o icon que está escrito link e coloque o link que deseja ir. Viu como é fácil e simples? É isso galerinha beijos!

Como colocar leia mais nas postagens

Hooy pessoinhas,tudo bom?

Hoje vim ensinar á vocês como colocar leia mais nas postagens,é o ~~tuto~~ mais simples que eu já fiz e deixa seu post mais charmoso,é super fofo vamos lá?

Bom... sabe quando você vai fazer um novo comentário e em cima tem um barra? Então,nessa barra tem tipo um papel separado ou recortado como preferir,viu? Se não eu tenho um exemplo para você:

É esse que está destacado de vermelho,é só você escrever seu post ~~normal~~ e quando você quiser que clique em leia mais você aperta este icon e continue sua postagem,depois é só você clicar em publicar e pronto! Viu como é super fácil e simples? É isso meninas. Beijos <3

Navbar invisível

Hooy docinhos,tudo bem?

Hoje vim fazer um tuto bem útil e que deixa seu blog como um site,fica bem lindinho,é como deixar a Navbar do seu blog invisível. Não sabe o que é navbar? Trouxe um exemplo do blog My Little Bear:

(Clique na imagem para ampliar)

Clique em leia mais para continuar aprendendo.

Hooy abacaxis,tudo bem?

Hoje vou ensinar a vocês como colocar barrinha divisória no final do post ok? Vamos lá docinhos.

Vá em Design

Editar HTML

Espandir modelo de widgets:

Aperte Ctrl+F e procure por:<b:include data='post' name='post'/>

Escolha a sua barra divisória aqui. Clique com o mouse direito em cima da sua barrinha divisória e clique na opção 'copiar URL da imagem'. Logo abaixo da tag,cole o seguindo código <center><img src="URL da imagem"/></center> Aonde está escrito "URL da imagem" você cola o URL da imagem (avá). Visualize se tiver certo salve.

Efeito negrito,itálico,sublinhado e riscado!

Hooy moranguinhos, hoje vou ensinar como faz o efeito negrito,itálico,sublinhado e ~~riscado~~ no blog,para aprender clique em leia mais >>

Hooy cutes, tudo bem? (espero que estejam ótimos)
Bom hoje vim aqui ensinar á vocês a colocarem cursor.
Tenho uma forma mais fácil de fazer, porque as vezes vejo alguns blogs com esse tutorial meio complicado, mais é bem fácil vocês vão ver, antes de começar queria avisar a a vocês que aqui tem alguns cursores que postei, podem pegar a vontade, e quais não tem url em baixo é só você apertar o botão direito e apertar em "Copiar url da imagem" vamos lá. Vão em Design>Layout>Adicionar um Gadget>HTML/JavaScript>Cole o código do cursor>Salvar. Pronto terminamos!! Tá vendo como é fácil, espero ter ajudado.
Beijos até a próxima, Fiquem com Deus.

Cursores

Hooy leitores, hoje estou aqui para avisar vocês que vou começar a fazer tutoriais e também alguns cursores, brushes, mini gifs e etc... Antes disso queria avisar vocês que quais não tem a URL é só clicar com o botão direito e apertar em "copiar URL da imagem" [...] Bom vou colocar alguns cursores aqui para vocês e depois coloco mini gifs, brushes, pngs. Vamos lá, ~~estou enrolando demais~~ rs.

Cursores de bigodinho: