Fontes para download • Como instalar fontes

Hey! Como estão amigos? Espero que muito bem ;u; Se tem uma coisa que usamos muito sendo blogueiros, essa coisa são fontes. Cara, eu perdi a conta de quantas fontes eu tenho no meu computador, são muitas! E como as vezes é difícil de encontrar fontes legais por aí eu resolvi fazer uma lista de fontes que eu amo e tenho no meu computador, com o link para download, claro! E também vou ensinar como instalar as fontes, é muito simples (;

Tutorial | Retirando espaço entre cabeçalho e topo do blog

Hey! Faz muito tempo que não trago algum tutorial ou goodie pra vocês, né? Tenho saudades disso 'u' E como hoje mudei o layout do Monster High Ráh e usei esse tutorial resolvi compartilhar pra vocês. É bem simples e fica ótimo quando você acertar os números!

1. Vá para Modelo > Editar HTML > Ctrl+F e procure por body {

Você vai encontrar algo parecido com isso:

body {
font-family: arial;
font-color: #1C1C1C;
background: $(body.background);
}

2. Antes de fechar a } do código que você encontrou cole margin-top: -10px;

Ficará assim:

body {
font-family: arial;
font-color: #1C1C1C;
background: $(body.background);
margin-top: -10px;
}

 3. Vá modificando o número -10px; até ficar adequado ao seu blog, visualize e salve se estiver tudo okay.

Simples, não? E fica muito melhor sem aquele espaço todo entre o cabeçalho e o topo, os créditos vão para Uprising Teen. Até logo! 

Beijos, Ráh ♥

DIY - Customizando cadernos com colagens

Hey! As férias já acabaram pra vocês? Eu, felizmente, tenho mais um mês para dormir muito... Na verdade, uma parte de mim quer que as aulas comecem logo, toda aquela mudança de Fundamental pra Médio me deixa ansiosa 'u' Como agora terei que usar mais cadernos na nova escola pretendo gastar menos dinheiro com cadernos e por isso resolvi customizar alguns fazendo algumas colagens e deixando eles com meu estilo mesmo! Resolvi fazer um passo a passo pra vocês se inspirarem, caso queiram fazer isso também... Vamos lá?

Tutorial | Leia Mais na largura do post

Hey, hey, hey!

Ói eu aqui travês! Novamente eu venho com um tutorial, porque além de ser fácil é um dos marcadores mais importantes do blog. Antes de continuar, queria falar que eu só não postei por causa do meu Blogger, que bugou e eu não conseguia colocar imagem na postagem. Graças a Deus consertei isso \o/ Enfim.

O tuto de hoje vai ensinar a vocês como colocar o botão "Leia Mais" em toda a largura do post.

Let's Go! ~

1. Vá em Modelo > Editar HTML e procure por: ]]></b:skin

2. Acima deste código cole um desses:

.jump-link {
text-align: center;
margin-top: 3px;
padding:2px;}
.jump-link a {
text-transform:uppercase;
display:block;
padding:2px;
margin:1px;
background: #dcf8f1;
border: 1px solid #b7ece4;box-shadow: inset 1px 1px 0 #fef8f9;
color: #fff;
font-size: 11px;}

Tutorial | Efeito - Tree

Aloha! Boa tarde humanos! Eu atualizei o blog de testes, onde ficam os previews de alguns tutoriais daqui! E percebi que faz um bom tempo que não posto efeitos para afiliados, etc. Procurei alguns efeitos e encontrei um que eu adoro e já usei, o Tree. Ele é do blog Kawaii World, créditos totais ♥

Blog de Testes aqui ♥

Ah, o preview do tutorial de hoje está no blog de testes c: Se gostou do efeito e quer aplicar no seu blog...

Tutorial | Elite de Afiliados "quadradinha"

Hey, hey, hey!

Peço desculpas pelo sumiço aí, fiquei um momento off da blogosfera para me organizar e isso fez com que eu tivesse várias ideias boas para postagens!

Como o fluxo de tutoriais não está tão grande ultimamente, porque não postar um? Dessa vez trago um modelo bem legal e discreto para elite de afiliados, bora aprender?

Preview: (estas não são as cores do código)

Print tirado blog blog: ♥♥♥.

Abra um gadget HTML/JavaScript e cole o código:

<style>
@font-face { font-family: "wish"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
#afiliados5{
background-color: #fff5f7;
width: 23px;
height: 10px;
font-family: wish;
font-size: 8px;
float: left;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 5px;
margin-bottom: 4px;
color: #f8c0cd;
line-height: 13px;
border: 1px solid #fcd7e0;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
return: false;
}
</style>
<a href="http://www.kawaii-world.net/"  title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/"  title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/"  title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/"  title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/"  title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/"  title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/"  title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/"  title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/"  title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/"  title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/"  title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/"  title="Kawaii World" id="afiliados5">KW</a>

Caso não queira as cores presentes no código, é só mudar de acordo com o seu gosto ;).
Créditos: Kawaii World - Candy Cherry.

Então foi isso, deixei aí nos comentários se você gostou, já viu ou usa este estilo de afiliados!

Beijos e até mais!

Tutorial | Retirar sublinhado dos links

Hey, já ouviram Confident da Demi Lovato? Gente, é maravilhosa ♥ Enfim, lembrei que um dos assuntos do blog é tutoriais, faz muito tempo que não posto nenhum tutorial aqui então escolhi um bem simples mas que é muito útil. Sabe quando os links ficam sublinhados? Eu não consigo ver isso nos meus layouts e logo tiro, é bem simples...

1. Vá no HTML do seu blog, dê Ctrl+F e pesquise por:

a:hover {

2. Abaixo terá text-decoration:underline; encontre e substitua por:

text-decoration:none;

Simples, rápido e muito útil! Encontrei os códigos aqui.

Beijos, Ráh ♥

Modelos de Tooltip ♥

Hey, estava pensando em tutoriais simples que ainda não foram feitos, aqui está.

Peguei os modelos nos blogs: ♥ ♥ ♥ ♥

Não sabe o que é um Tooltip? É aquela caixinha que aparece quando você seleciona algo como, o botão de editar, uma elite de afiliados... Não entendeu? Tirei um print do Tooltip do MHR.

Entendeu agora né? Haha :P

1. No HTML do blog, procure por </head> acima da tag cole:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/>

2. Escolha o modelo de Tooltip e cole o código dele acima de ]]></b:skin>

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
div#qTip {
margin:2px;
padding: 5px 9px;
border-right-width: 1px;
border-bottom-width: 1px;
text-shadow: 1px 1px 0px #ccc6e8;
display: none;
color:#fff;
text-align: left;
position: absolute;
z-index: 1000;
text-transform: uppercase;
background: #dcd8ef;
border: solid 1px #ccc6e8;
font-family: silkscreen;
font-size: 8px;
no-repeat 5%;
}

 

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
div#qTip {
margin:2px;
padding: 5px 9px;
border-right-width: 1px;
border-bottom-width: 1px;
text-shadow: 1px 1px 0px #f7cedd;
display: none;
color:#FFF;
text-align: left;
position: absolute;
z-index: 1000;
text-transform: uppercase;
background: #fce3ec;
border: solid 1px #f7cedd;
font-family: silkscreen;
font-size: 8px;
no-repeat 5%;
}

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
div#qTip {
margin:2px;
padding: 5px 9px;
border-right-width: 1px;
border-bottom-width: 1px;
display: none;
color:#989898;
background: #e9e9e9;
border: solid 1px #c4c2c3;
font-family: silkscreen;
font-size: 8px;
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
opacity: 1.0;
text-transform: uppercase;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
div#qTip {
margin:2px;
padding: 5px 9px;
border-right-width: 1px;
border-bottom-width: 1px;
display: none;
color:#fff;
background: #fd97b1;
border: solid 1px #eb7896;
font-family: silkscreen;
font-size: 8px;
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
opacity: 1.0;
text-transform: uppercase;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-moz-box-shadow:
inset 0px 0px 1px rgba(255,255,255,1.0);
-webkit-box-shadow:
inset 0px 0px 1px rgba(255,255,255,1.0);
box-shadow:
inset 0px 0px 1px rgba(255,255,255,1.0);
}

 

div#qTip {

padding: 3px;

border: 2px solid #A2CD5A;

display: none;

background: transparent url(http://media.tumblr.com/tumblr_mej6isPoDA1r16se4.png);

color: #696969; /* Cor do texto */

font-family: Century Gothic; /* Fonte */

font-size: 11px;

text-align: left; /* Alinhamento do texto */

position: absolute;

z-index: 1000;

}

div#qTip {
padding: 3px;
display: none;
border: 1px solid #1874CD;
background: url(http://24.media.tumblr.com/tumblr_m8li27B93N1r44mhto1_500.png);
color: #FFFFFF; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;
z-index: 1000;
border-radius: 2px;
}

div#qTip { padding: 7px; border-left: 3px solid #000; border-right: 3px solid #000; display: none;background: #f5f5f5; color: #696969; font-family: arial; font-size: 9px;text-align: left; position: absolute;z-index: 1000; }

div#qTip { padding: 5px; border: 2px solid #CD6090; border-radius: 5px; display: none;background: #f5f5f5; color: #000; font-family: arial; font-size: 9px;text-align: left; outline-style:dashed; outline-width:1PX; outline-color: #FF82AB; outline-offset: -5PX; position: absolute;z-index: 1000; }

Se usar, credite.

Beijos, Ráh

Tutorial: Como Fazer Borda Nas Imagens Com o PhotoScape

Hey, hey, hey! Tudo bom?

A Matilde me perguntou como eu fiz aquela bordinha nas imagens que eu postei ontem, então eu resolvi fazer um tutorial ensinando vocês a fazer aquela bordinha! Eu acho ela super fofinha para se usar nas imagens para início do post (tanto que eu até usei essa bordinha no cabeçalho do meu blog) ou até mesmo nas imagens do gadget. E ai, bora aprender?

Tutorial: Como retirar o Assinar Postagens (atom)

Hey :3

O primeiro tutorial do dia! Como Retirar o Assinar Postagens (atom), aquele link super chato que ocupa espaço e não serve para nada que todos querem tirar. Não sabe o que é?

1- Vá em Editar HTML, Ctrl + F e procure por ]]></b:skin> agora cole acima:

.feed-links{display:none !important;}

Pronto! Fácil né?

Créditos: Just... Paradise

Beijo beijo, Ráh

Tutorial: Créditos rolando em um gadget

Olá, a pedido da leitora Manoela, hoje vou ensinar a como colocar os créditos rolando em um gadget, para que não sabe do que estou falando é só ir no gadget Goodbye aqui do blog, veja que tem vários nomes de blogs com links, ou seja, os créditos. O tutorial não envolve HTML, mas mesmo assim é necessário prestar bastante atenção.

1- Vá em um Gadget HTML/JavaScript, ou se preferir em um Gadget Texto (clique em HTML no gadget Texto) e cole o seguinte código:

<marquee>Seu Texto Aqui</marquee>

2- Na parte Seu Texto Aqui escreva o texto que você queira, por exemplo:

Agradeço aos seguintes blogs: Blá blá | Blá blá | Blá blá

(É permitido usar meu exemplo)

3- Tá, mas agora o texto fica passando, mas como vou colocar os links? É fácil! Siga os prints.

Não sei porque os prints ficaram cinzas, eles eram brancos, ficaram horríveis, mas deu para entender.

Créditos: Encomendas da Ráh

Até mais, se quiserem pedir algum tutorial fiquem a vontade!

Beijo, Ráh

Tutorial: Menu Tory

Hey!

Atualizei a página de Goodies, na verdade coloquei um menu super lindo que vi no Sweet of Cherry. Além do menu, lá achei também um menu muito lindo e resolvi postar aqui também.

Preview

1- Vá em Editar HTML > Ctrl + F e procure por ]]></b:skin> agora acima dessa tag cole:

/* -- Menu Tory - tory-spacetutorials.blogspot.com -- */
st{
text-align: center; /* Alinhamento do Texto */
width: 40%; /* Tamanho da caixa */
padding: 3px; /* Altura */
float: left; /* Posicionamento da caixa */
background: #87CEFF; /* Cor do Fundo */
color: #FF7DB1; /* Cor da Fonte */
border-radius: 0px 0px 0px; /* Bordas Arredondadas */
-webkit-transition-duration: .90s; /* Tempo de transição */
margin: 3px; /* Espaço entre uma caixa e a outra */
}
st:hover {
background: #6CA6CD; /* Cor do Fundo Hover*/
color: #000; /* Cor da Fonte Hover*/
border-radius: 0px 100px 100px 0px; /* Bordas  Arredondadas Hover */
letter-spacing: 3px; /* Espaço entre as Letras */
-webkit-transition-duration: .90s; /* Tempo de transição */
/* -- Fim do Menu Tory - tory-spacetutorials.blogspot.com -- */

As cores originais do menu não são estas, eu mudei, por isso são azuis.

 Mude as partes necessárias, o código é autoexplicativo.

2- Agora vá em um novo Gadget > HTML/JavaScript e cole:

<a href="LINK DA PAGINA"><st>NOME DA PAGINA</st></a>

Mude as partes necessárias, se quiser mais de um link, copie o código e cole novamente ao lado.

Créditos pelos códigos: Sweet of Cherry

Até mais!

 

Tutorial: Efeito Dark Shine

Olá, sei que fiquei um bom tempo sem postar, mas voltei.

Efeito Dark Shine

Preview

Ele é bem fofo, você pode mudar as cores depois.

1- Vá em Editar HTML > Ctrl + F e procure por ]]></b:skin agora, acima desse código cole:

/-- Efeito Dark Shine por Alan www.wehearthtml.blogspot.com --/
caixa1 {
background: transparent;
padding: 10px; float: left;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.imagem1 {
margin: 3px;
border: 1px solid #BCAD90;
-webkit-transition-duration: .50s;
}
.imagem1:hover {
-webkit-transition-duration: .50s;
box-shadow: 0px 0px 30px #686051;
}

Mude as cores destacadas. 

O primeiro código de cor destacado é a cor da borda, e o segundo da sombra.

2- Salve. Agora vá em Layout > ADD Gadget > HTML/JavaScript e cole:

<caixa1><a href="LINK"><img src="IMAGEM" class="imagem1"/></a></caixa>

Mude as partes destacadas.

É isso, espero que tenham gostado, caso queiram algum tutorial específico comentem ok?

Créditos: Bunny Crazy 

Tutorial: Efeito bordas hover

Yoo

Trago um tutorial que pode ser usado na sua elite de afiliados, ele é bem simples e fica lindo.

Preview

1- Vá em Editar HTML, Ctrl + F, e procure por ]]></b:skin agora acima do que você procurou cole:

.elitescale{-moz-border-radius: 2px;-webkit-border-radius: 2px;-webkit-transition: 0s linear;-webkit-transition: opacity 0.5s linear;-webkit-transition: all 0.3s linear;-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;transition: all 0.3s linear;background-color: #FF6EB4; /*Cor da borda */ padding: 3px;}.elitescale:hover {background-color: #AB82FF; /*Cor da borda quando passa o mouse */ padding: 3px;}

2- Mude o necessário, salve.

3- Vá em Layout, ADD Gadget, HTML/JavaScript e cole:

<a href="Link do Blog" title="Nome do blog"><img src="link da sua imagem" class="elitescale"/></a>

4- Faça as alterações necessárias, visualize, salve.

Créditos: Without Kawaii

Beijo, Ráh

Tutorial: Dois backgrounds no blog

Yoo

Hoje trago um tutorial bastante usado pelos blogueiros.

Dois backgrounds no blog

1- Vá em Editar HTML, Ctrl + F e procure por body { depois de achar você verá algo mais ou menos assim:

body {

font: $(body.font);

color: $(body.text.color);body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

}

2- Apague todo este código e substitua por:

body, html {

height: ALTURApx;

margin: 0;

padding: 0; }

body {

font: $(body.font);

color: $(body.text.color);

background: url("LINK-DO-BACK-COM-ICONS") repeat; }

html {

background: url("LINK-DO-BACK-SEM-ICONS") repeat; }

Faça as alterações, visualize e se estiver tudo certo salve.

Créditos: Birthday Cake

Beijos, Ráh

Tutorial: Efeito Hero

Hey moços e moças :3

Eu estava procurando um tutorial bem legal para mostrar para vocês, e achei, adivinhe onde? 

No One Dí Things, claro.

O efeito serve para elite de afiliados, mas você pode usar para o que você quiser.

Preview

Lindo né? Eu adorei!

1- Vá em Editar HTML, Ctrl + F e procure por ]]></b:skin> acima dessa tag cole:

@-webkit-keyframes hero {

50% {transform: rotate(16deg) ;

-webkit-transform: rotate(16deg) ;

-moz-transform: rotate(16deg) ;

-o-transform: rotate(16deg) ;

-ms-transform: rotate(16deg) ;}

75% {transform: rotate(-16deg);

-webkit-transform: rotate(-16deg);

-moz-transform: rotate(-16deg);

-o-transform: rotate(-16deg);

-ms-transform: rotate(-16deg) ;}

100% { transform: rotate(0deg) ;

-webkit-transform: rotate(0deg) ;

-moz-transform: rotate(0deg) ;

-o-transform: rotate(0deg) ;

-ms-transform: rotate(0deg) ; }

}

.hero {display: inline-block; border-radius: 5px; margin: -1px; -webkit-transition-duration: .50s; OPACITY: 0.5; outline-style:dotted;

outline-width:1px;

outline-color: transparent;

outline-offset: -5px;}

.hero:hover { -webkit-animation: hero .5s alternate linear; OPACITY: 1; outline-style:dotted;

outline-width:1px;

outline-color: #fff;

outline-offset: -5px;}

2- Salve. Agora vá em Layout > ADD gadget > HTML/JavaScript e cole o seguinte código:

<a href="LINK-DO-BLOG"><img class="hero" src="LINK-DA-IMAGEM" title="TITULO-DO-BLOG" /></a>

Modifique o que é necessário, salve.

Fácil não? Beijos, Ráh

Tutorial: Fonte Pixel na Sidebar

Olá, hoje trago um tutorial bastante usado em vários blogs, sabe aquela fonte Pixel? Não? 

Veja um exemplo:

Esse print é do blog de testes do Assim Tipo Tudo, não copie sem permissão.

1- Vá em Editar HTML, ctrl + f e procure por .footer-inner .widget

2- Selecione de  .footer-inner .widget, .sidebar .widget até }

3- Apague o que você selecionou e substitua por:

footer-inner .widget,
.sidebar .widget {
font-family: "silkscreen";
font-size: 8px;
color: $(widget.text.color);
}

4- Agora procure por ]]></b:skin> acima deste código cole:

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }

5- Visualize, se estiver tudo certo, salve.

Créditos: One Dí Things

Comentem se deu certo no blog de vocês, depende o modelo acho que não funciona. 

Testei apenas no modelo Simple.

Beijos, Ráh

 

Tutorial: Efeito preto e branco nas imagens do post

Olá >ε<

Mais um tutorial hoje... Ele é bem fácil e fica lindo no blog, eu uso ele no MHR, e eu gosto bastante.

Preview

1- Vá em Editar HTML, Ctrl + F e procure por ]]></b:skin> agora acima dessa tag cole:

post img {-webkit-filter: saturate(100%) ;-webkit-transition-duration: .90s;}.post img:hover {-webkit-filter: saturate(0%) ;-webkit-transition-duration: .90s;}

Se você quiser que o Hover não fique tão escuro, 

mude a parte destacada do código (0%) por um número mais alto. 

Fácil não? E fica lindo!

Créditos: Nick Tutoriais

Tutorial: Bordas em Hover na sidebar e nas postagens

Olá, estou feliz que tenham comentado na postagem anterior, obrigada... E continuem assim!

O tutorial de hoje é bem utilizado e fica super bem no blog!

Eu usei ele no MHR, são as bordinhas em Hover na sidebar e nas postagens,

 você passa o mouse e as bordinhas mudam de cor. Fica lindo!

Bordas na área das postagens

1- Vá em Editar HTML, Ctrl + F e procure por /* Posts agora abaixo daquele pontilhado gigante cole:

.post-outer {

background:#fff;

border-top: 2px solid #000;

border-bottom: 2px solid #000;

padding: 2px;

margin-top: 2px;

margin-bottom:20px;

box-shadow: 0 0 2px #000;

-webkit-transition-duration: .60s;

}

.post-outer:hover {

border-top: 2px solid #000;

border-bottom: 2px solid #000;

box-shadow: 0 0 1px #000;

-webkit-transition-duration: .60s;

}

Entendendo o código:

As partes em negrito #000 devem ser mudadas para o código da cor que você queira. Os dois primeiros códigos assim (#000) são as bordas que ficam normais, e os outros dois são as bordas em hover.

As partes em vermelho 2px e 1px são as sombras, coloque 0 no lugar de um ou de dois se não quiser as sombras. Se você quiser as sombras mude o #000 do lado dos números 

de px por uma cor que você queira.

Bordas na área da sidebar

1- Vá em Editar HTML, Ctrl + F e procure por /* Widgets agora abaixo daquele pontilhado gigante cole:

.sidebar .widget {

background:#fff;

border-top: 2px solid #000;

border-bottom: 2px solid #000;

padding: 5px;

margin-left: -30px;

margin-top: 0px;

margin-bottom:20px;

border-radius:0px;

box-shadow: 0 0 4px #000;

-webkit-transition-duration: .60s;

}

.sidebar .widget:hover {

border-top: 2px solid #000;

border-bottom: 2px solid #000;

box-shadow: 0 0 2px #000;

-webkit-transition-duration: .60s;

}

Entendendo o código:

As partes em negrito #000 devem ser mudadas para o código da cor que você queira. Os dois primeiros códigos assim (#000) são as bordas que ficam normais, e os outros dois são as bordas em hover.

As partes em vermelho 2px e 1px são as sombras, coloque 0 no lugar de um ou de dois se não quiser as sombras. Se você quiser as sombras mude o #000 do lado dos números 

de px por uma cor que você queira.

Espero que tenham entendido galera! Qualquer dúvida comentem... 

TABELA DE CORES AQUI

Créditos pelo tutorial: One Dí Things

Beijo, Ráh

Tutorial: Remover a Navbar

Olá, o tutorial de hoje é bem simples e eu acho que fica muito bom no blog.

A Navbar, muitas vezes passa despercebida pelos leitores, alguns talvez usem, mas nem todos. 

Clique na imagem para ampliar!

Se você não gosta dela, pode removê-la!

1- Vá em Editar HTML, Ctrl+F e procure por ]]></b:skin> agora, 

acima desse código que você procurou cole:

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

Visualize, se a Navbar não estiver mais no topo do blog salve. 

Encontrei os códigos no Bunny Crazy

Beijos, Ráh