Como colocar qualquer fonte no blog?

Oi! Eu estive a ler as respostas àquilo que eu tenho feito sobre "O que achas do Bibokices?" e já vi muitas coisas em que podia melhorar! Obrigado a todos e se ainda não respondeste ainda podes responder!
Uma coisa que eu adoro personalizar no blog são as fontes! Há uma tão fofinhas e cuteee e umas com um ar tão jornalístico. Eu antes colocava através do Google Fonts só que tinha poucas e não podia usar as que eu criava, com um tempo descobri um método de colocar as que eu quisesse sozinha, e a seguir encontrei um tutorial muito mais fácil do que como fazia antes! É através do @font-face
Clica em ler mais para aprenderes como fazer!
Dificuldade: Média

Faixas para sidebar + Como colocá-las

(Do kawaii world)

Olá, tudo bem com vocês? Espero que sim, antes de mais peço para irem ao meu blog (aqui) e fazerem o favor de colocarem mais de 50 seguidores :D. Hoje venho explicar-vos como colocar faixas nos gadgets da sidebar e vou dar-vos também algumas. Créditos das faixas: Life Teen Editions

#Links: Tutoriais Pouco Vistos

Hoooy, acho que é hoje que oficialmente começam os posts diários e como eu tenho super ideias para posts vou postar sempre -sqn. E como eu acho que um post de links pode ser bem útil para conhecer tutoriais (ou então não) eu trouxe um post só com links para tutoriais. Aaaahhh, e a minha pullip Asuka chegou! É linda *-* e chama-se Mikki...

Rolagem infinita de posts
Menú lateral deslizante
Barra Lateral Fixa
Link que abre várias páginas *Link Alterado*
Página Inicial com miniaturas de postagem
Baixar fontes do GoogleFonts para o PC
Arquivos em Flash no Blog
1 a 4 backgounds no blog
Menu Horizontal com SubMenus e caixa de pesquisa
Criar App do Blog

Eu achei bem úteis e vocês?

Ahhh, obrigada pelos 100 seguidores, por causa disso vou trazer um layout free muito especial mesmo, que não terá regras nem créditos!

Novo editor HTML do Blogger

(daqui)

Olá, ainda se lembram de mim? O Bruno do Teen Cat. Espero que sim, hoje decidi vir fazer um mini-tutorial para vocês ficarem a entender mais sobre o novo editor HTML do blogger, aproveito para dizer que as Vagas para Postadoras/Postadores estão abertas no meu blog. Passando então ao tutorial:

Efeitos em Links do Blog

Bem, a pedido do Bruno e da Rita hoje trago um tutorial de como colocar os links como os meus, eu por acaso gosto deste efeito, vou mostrar ainda outros para quem não gosta muito deste.

Todos os códigos é para colocar acima de b:skin

Efeito Afastado

Pelo que me disseram dá um ar futurista, os créditos estão na imagem ^-^ bem... Bora começar? Acima de b:skin cola este código: (não retires nenhuma parte do código)

*// Efeito nos links by Bibokices (bibokices.blogspot.com) //*
a{
letter-spacing:2px;  **espaço entre as letras**
-webkit-transition-duration: .50s;  **tempo que demora a desaparecer o efeito**
}

 a:hover {

color:#000; **cor hover** 
text-shadow: 2px 7px 1px #b8d935, **cor afastamento de cima**
               -10px 1px 1px #fc5d77, **cor afastamento do meio**
               4px -7px 1px #5dcdfc; **cor afastamento de baixo**
-webkit-transition-duration: .50s; **tempo que demora a aparecer o efeito**
}

Fácil né? 

Efeito 3D

a{
   color: white;
   text-shadow: 1px 1px #D0A9F5,                 2px 2px #D0A9F5,                 3px 3px #D0A9F5;   -webkit-transition: all 0.12s ease-out;
   -moz-transition:    all 0.12s ease-out;
   -ms-transition:     all 0.12s ease-out;
   -o-transition:      all 0.12s ease-out;
}
 a:hover{
   position: relative;
   top: -3px;
   left: -3px;
   text-shadow: 1px 1px #F781F3,                 2px 2px #F781F3,                 3px 3px #F781F3,                 4px 4px #F781F3,                 5px 5px #F781F3,                 6px 6px #F781F3;}

Efeito Glow

 

a{
 -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
}
 a:hover{
 color: #00adbc;
      text-shadow: 0px 0px 12px #00adbc;
}

O que acharam dos efeitos? 

Brushes Dolls por Mim [Agora mais bonecas - texturas]

Faz-me lembrar o blog Soltando Balões... *~*

Hoje como tive algum tempo apeteceu-me fazer utilitários, por isso resolvi fazer umas dolls fofas como eu adoro. Acho que foram as melhores que fiz até agora, fiz em várias cores e tons de pele para tu usares as que tu mais gostares. Espero que gostes delas e as uses se quiseres e gostares...

Clica para veres em tamanho original
Lisas:

Com texturas: [Atualização]

Se preferires em outras cores ou tom de pele avisa!

Formatação Hover

Oie, não eu não desapareci apenas não postei, apesar de Terça passada e amanhã não ter aulas! Hoje venho dar-vos um tutorial sobre como formatar os tipos de Letra Negrito Itálico Sublinhado Riscado link

Pesquisa por body { ao lado da 1ª chaveta (depois deste código) cola isto: 

/*Hover by: Teen Cat*/

b, strong, bold { color: Cor; -webkit-transition-duration: .80s}

s, strike { color: Cor; -webkit-transition-duration: .80s}

u, underline { color: Cor; border-bottom: 1px dashed Cor; text-decoration: none; -webkit-transition-duration: .80s}

i, em, italic { color: Cor; -webkit-transition-duration: .80s}

/*Hover by: Teen Cat - Isto é como vai ficar os estilos de letras quando passa o mouse*/

u:hover { color: Cor; border-bottom: 2px solid Cor; text-decoration: none; -webkit-transition-duration: .80s}

b:hover { color: Cor; -webkit-transition-duration: .80s}

s:hover { color: Cor; -webkit-transition-duration: .80s}

i:hover { color: Cor; -webkit-transition-duration: .80s}

Estilos de letra por letras:

B -> Negrito

S -> Riscado

U -> Sublinhado

I -> Itálico

E é isto, xau e bom resto de quinta, amanhã é sexta \o/

Dicas para ter mais seguidores do blog + Eu no Club Penguin

Olá, eu não posto há muito tempo, eu sei, eu sei! Por isso como não tenho aulas de manhã por causa dos fofos e fofas do 4.º ano que vão ter exames de LP. Dear little sister! Back home early! Não se assustem com aquilo, não era com vocês! Nem hoje nem na sexta (Matemática) mas na sexta é o dia todo!  
Aquilo sou mais ou menos eu a pensar na minha sexta, o post não será assim muito grande, mas pelo menos voltei!

Muitas pessoas, incluindo eu mais no inicio da blogosfera, têm dificuldades a ter mais visitas e seguidores, mas não é assim tão difícil, dou aqui algumas dicas que eu fui aprendendo com o tempo.

1. Visitar muitos blogs e comentá-los, tenta ter uma amizade com várias blogueiras.
2. Fazer parcerias e afiliações, é uma boa maneira de divulgação.
3. Comentar SOBRE O POST e deixar o link do blog no fim não por exemplo como no Unicorn Paradise que a querida da Dani disse que estava a pensar excluir o blog e aparece lá uma a comentar k legal! Visita e segue o meu blog?
4. Nunca comentar "Seguindo, segue de volta?" isso mostra que só comentas para ter seguidores e não porque gostas do blog que estás a visitar.
5. Colocar sempre os créditos. Apesar de poderes pensar que assim estás a dizer que não foste tu que fizeste o post, estás a dar confiança tua às leitoras, porque assim ficam a saber que pões sempre os créditos
6. Organizar concursos e sorteios com parcerias com outros blogs, pode ser muito divertido e ajuda na divulgação e na amizade com mais blogueiras.

Bem, acho que foi isto, a sério que resulta mesmo, comigo resulta e com as pessoas que comentam aqui no meu blog.

Eu queria falar um poquinho sobre mim no Club Penguin, é que esta semana sou assinante, que vinha como oferta numa revista. Ontem encontrei a Tia Artic, nem imaginas como a encontrei! Foi assim:

A História do Encontro com a Tia Artic
Eu estava no servidor Zero Graus a fingir que gravava um video para o Youtube, mais ou menos a dizer isto:
-Hey, Youtube vou mostrar como encontrar a tia Artic! - isto foi a gozar porque eu não sabia mesmo encontrá-la e começam a chegar pessoas:
-Posso ir comigo? - eu respondi logo que sim, também a gozar.
De repente entro no Centro e começam a dizer:
-A tia Artic em 10 minutos!
-9 minutos!!!
....
-1 minuto!
-5, 4, 3, 2, 1, 0!!
E recebo o selo da tia Artic e eu via mesmo e andei muito atrás dela!
Fim!!!

Eu também dei origem a uma batalha de ninjas da água contra os dos fogo, no iceberg, e fui eu que comecei! <3 font=""> Fire
Add me! Sou a Bitiz

Outro dia ponho fotos do meu pinguim!

Backgrounds Discretos para o teu Blog

Olá, hoje trago-vos uns Backgrounds para os vossos blogs, sei que a Bia já publicou, mas eu trago uns mais discretos! Vejam...

Criando um Header (cabeçalho) com o Inkscape + Swing Table + Pullip Dolls

Oi, meus unicórnios-cor-de-rosa-com-uma-mancha-branca-na-orelha-direita-e-sabor-a-doce-de-morango-com-chantilly-e-uma-cereja-em-cima, em sei que não posto há algum tempo, e isso deve ter feito muitas visitas ir embora como se tivesse alguma mas por isso tenho uma surpresa, um post triplo! Bem, vou falar de headers, swing tables e pullip dolls.

Criando um Header (Cabeçalho) com o Inkscape

Bem, este pode parecer um tutorial mega fácil de explicar mas o print screens e assim dão trabalho, bem, vê esta mega-imagem sobre isso.

Bem, o header ficou muito simples, mas um pouco fofo, se quiseres cumprir a indicação 7 aqui vai:

Bem simples mesmo u.u

Swing Table

Eu acho que as swing tables estão na lista de sonhos das pessoas que as conhecem, conheci hoje e simplesmente amo, mal as vi fiz uma cara de boba como quem vê um unicórnio. Já vais perceber como me senti.

Então??? Qual de vocês me dá essa mesa aí? Passaria o jantar todo a baloiçar

Esta acima é uma Dutch Swing Table, a minha irmã voava com esta, nunca ninguem poderia jantar sozinho.

Bem, para quem está interessado e tem uma carteira gorda aqui está o link de onde comprar: comprar uma swing table

Pullip Dolls

As pullip são do tipo a boneca mais linda à face da terra existem muitas e sai uma nova todos os meses custam mais ou menos de 70 a 300 euros neste blog são necessárias carteiras obesas muitas pessoas personalizam estas bonecas, os olhos os cabelos, tudo! E há com cada roupa, eu vou ter uma, por isso nessa altura falo mais sobre elas, agora vou mostrar várias imagens:

A que eu acho que vou ter, é uma Pullip Asuka é das mais em conta.

Lindérrima a Pullip Oui'Vera o único defeito é o preço.

A Pullip Nina é uma das mais vendidas, também é cara.

A Pullip Ddalgi (sim com dois "d") é bonita e não muito cara em comparação às outras.

Vem originalmente com o fato de dinossauro verde, só poderia ser a Pullip Paja

Os portes de envio são em alguns casos metade do preço da boneca, mas vale a pena são lindas, quase me ia esquecendo de uma Pullip Tokidoki como poderia:

Trás um outro vestidinho com uma malinha a condisser, onnnh! 

Eu recomendo o eBay, mas antes disso vê todas as pullip bem, é que há imensas, e a sua irmã mais nova, Pullip Dal, o namorado.....

O post chegou ao fim, o que acharam que cada um dos temas falados?

Primeira Letra do Post Grande (Automática)

Bem, eu já vi imensos tutoriais a explicar uma cena para colocar a primeira letras, mas era com uma coisa que em todos os posts tínhamos de alterar e com este código não é só colocar acima de  
]]></b:skin>
Este código:

.post-body:first-letter { font-size: 50px; color: #FFB6C1; }

Bold: Aterar para a cor escolhida (se quiseres a cor padrão do texto apaga "color: #FFB6C1;")
Underlined: Alterar para o tamanho escolhido (se quiseres  o tamanho padrão apaga "font-size: 50px;")

Também podes mudar a fonte, acrescentando:
font-family: blábláblá;

Italic: Mudar para o nome da fonte escolhida aqui eu explico como usar uma fonte à tua escolha.

E foi isto, agora o blog está numa onda de tutoriais Porquê Bibi? Porque é sobre o que eu realmente gosto de postar  espero que gostes tanto de ler como eu de os escrever, eu vou fazer uma mudança de layout, apesar de amar este por isso deixo aqui um print do atual para sempre se lembrarem dele:

Posso me inspirar? Só se não confundires inspirar com copiar!

Ele quando o criei estava menos bagunçado e mais simples, mas mesmo gostando do anterior tenho de mudar alguma vez de layout.

Mega Post: Tutoriais pouco vistos (Contém um super tuto nunca visto na blogosfera)

Qual de vocês se vem sentar ali comigo?

O povo votou, e decidiu que o mega post de hoje seriam tutoriais pouco vistos.

Só é pena o povo ser só 8 pessoas, mas, pelo menos, 4 dela ficam felizes. Mesmo assim fiquei mesmo feliz por terem respondido quatro pessoas no Domingo, o dia em que eu criei isto, e duas hoje, que eu achava que ninguém ia ligar a isto. Estou feliz, acho que o meu blog começa a ter visitantes fieis, antes tinha sempre 0 comentários.

Bem, vamos começar por inserir FieldSet

Inserindo fieldset

Mas o que é isso? É uma funcionalidade do blog pouco conhecida pelas blogueiras, mas que tá um ar bem cutie e kawaii. Existem dois tipos que eu conheça ASHASH

1.º- Imagem e texto

Ex.:

Eu acho que quase ninguém sabe o que escrever nas demonstrações...

E é isto, uma espécie de caixinha que no inicio a meio da borda tem uma imagem ou texto.
Onde queres a tua fieldset cola:

<fieldset> <legend><img src="ULR DA IMAGEM"/></legend>TEXTO</fieldset>

2.º- Só texto

Isto

Outra vez... uma coisa para escrever!

O só texto é substituir o trecho < img src="ULR DA IMAGEM" / > pelo texto, acho que não é necessário exemplificar.  

Uffff! Nem imaginas a dificuldade de escolher tutoriais pouco vistos, conseguir explicar-los e ainda ver se existem muitos blogs a explicar o mesmo.

Super Tutorial
Inserir fontes no blog que tens guardadas no computador e NÃO estão em nenhum site de fontes para usar no blog

Bem que titulo enorme, mas é mesmo isso, mais nada, sabes aquela fonte linda que tens guardada no computador e procuras, procuras, procuras mas não encontras em nenhum site que fornece fontes para utilizar no blog? Ou até uma fonte que tu criaste mas só tens o arquivo tff? Agora podes usar fontes criadas por ti no blog, sem ser em imagens.

Passo 1
Cria uma fonte ou faz o download de uma, bem, fazer o download acho que todos sabem, mas mostro aqui alguns packs na mesma e ensino a criar uma fonte.
(recomendo carregar nos links em bold)
Podes fazer o download de 40 fontes aqui ou aqui
Podes fazer o download de 422 fontes aqui ou aqui
Créditos dos pacotes de fontes: (www)

Para criar uma fonte cria uma conta ou faz login aqui e deixa a tua imaginação voar.

Eu própria fiz uma fonte mas ninguém no mundo quer que ponha aqui a minha fonte e por esse motivo não a vou por a menos que alguém queira esqueçam isso seria impossível.

Passo 2
Bem, agora tens de hospedar a tua fonte aqui, carrega Escolher arquivo » Carregar arquivo e copia o url que aparecer na caixinha de texto, guarda-o num bloco de notas. num documento word, num post em rascunho, o que te der mais jeito, ou então simplesmente não feixes essa página.

Passo 3~
Acima de
]]></b:skin>
Cola o código abaixo

 @font-face {font-family: 'NOME DA TUA FONTE';
src: url('URL DA TUA FONTE') format('truetype');
font-weight: normal;
 font-style: normal; }

Sim só isso, agora onde a quiseres usar tens de colar
font-family: 'NOME DA TUA FONTE';
O Nome da Fonte tem de ser mesmo igual ao que está no código acima, se o nome da fonte for Lá e tu puseres lá não resulta tem que ser mesmo igual.
Bem, vou ajudar um pouco a quem não percebeu onde colar aquilo, se queres no titulo do post (h3) procura      h3.post-title {
E acrescenta o trecho abaixo disso, se acrescentares no acima acrescenta também em
h3.post-title a {
e
h3.post-title a:hover {
Para os títulos dos posts ficarem sempre com a mesma fonte.

Se queres no texto todo do post cola o trecho abaixo de
.post-body {

E assim sucessivamente, se quiseres em algum lugar onde eu não explico avisa, que eu tento localizar onde deves colar, e acabaram os tutoriais, qualquer dúvida comenta, ou avisa se resultou.