Tutorial (◕‿◕✿)

Olá, tudo bem com vocês?

Na semana passada eu falei que iria começar a postar tutoriais uma vez por semana, geralmente as sextas feiras certo? Então, cá estou começando a cumprir o que anunciei pra vocês. A partir de hoje, traremos tutoriais semanais que com eles vocês poderão aprender a personalizar seus blogs e fazer seus próprios Layouts, todos os tutoriais que eu trouxer serão tutos os quais já usei ou testei, caso eu não tenha testado eu falarei pra vocês ok? Vamos ao tutorial, go!

Tutorial: Colocando borda hover na área de postagem e/ou Sidebar

Para colocar borda hover na área de postagem,  em seu HTML pesquise por:

.main-inner .column-center-outer {

Você encontrará algo semelhante a isto:

.main-inner .column-center-outer {
  background: $(post.background.color) $(post.background.url) repeat scroll top left;  _background-image: none;}

 Substitua o código acima por:

.post-outer {
background: #fff;font-family: calibri; /*FONTE*/color: #fff;padding: 10px; /*Não modifique aqui*/border-top: 5px solid #SUACOR;border-bottom: 5px solid #SUACOR;box-shadow: inset 0 0 15px #E3E3E6, 0 0 3px #ccc;-webkit-transition-duration:  1.50s;}.post-outer:hover {background:#fff;border-top: 5px solid #SUACOR;border-bottom: 5px solid #SUACOR;box-shadow: inset 0 0 15px #D2D2D2, 0 0 3px #ccc;}

Modifique as partes destacadas em negrito pelo que se pedi, personalize ao seu gosto e depois salve! 

Para colocar borda hover na Sidebar, em seu HTML procure por:  /* Widgets

Abaixo dessa tag, você irá encontar .sidebar .widget {  apague toda a tag referente a ela até a chave "}" como mostra o print a seguir:

~ Clique para ampliar ~

Agora, no lugar onde estava a Tag que você apagou, cole o código:

.sidebar .widget {
background: #fff;font-family: calibri; /*FONTE*/color: #fff;padding: 10px; /*Não modifique aqui*/border-top: 5px solid #Cor da borda de cima normal;border-bottom: 5px solid #Cor da borda debaixo normal;box-shadow: inset 0 0 15px #E3E3E6, 0 0 3px #ccc;-webkit-transition-duration: 1.50s; /*duração da transição*/ }.sidebar .widget:hover {background:#fff;border-top: 5px solid #Cor da borda de cima hover;border-bottom: 5px solid #Cor da borda debaixo hover;box-shadow: inset 0 0 15px #D2D2D2, 0 0 3px #ccc;}

Modifique do que está em destaque e personalize como preferir, após é só salvar <3

Créditos de códigos: Bunny Crazy

Print por: Barbie Seu Mundo Pink.

Informações adicionais: Barbie Seu Mundo Pink

Tabela de cores: AQUI ♥

~Abraços e beijos da tia Babi ♡